All Projects → brick-design → Brick Design

brick-design / Brick Design

Licence: mit
全场景流式布局,可视化拖拽、随意嵌套组合、实时渲染、实时辅助线展示,实时组件间距展示、实时拖拽排序、状态域管理,可视化属性配置、可视化样式配置、多设备适配展示,支持逻辑渲染、模板字符变量、表达式、自定义方法、自定义状态

Programming Languages

typescript
32286 projects
Less
1899 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Brick Design

Grapesjs
Free and Open source Web Builder Framework. Next generation tool for building templates without coding
Stars: ✭ 14,892 (+267.89%)
Mutual labels:  drag-and-drop, page-builder, site-generator, site-builder, web-builder, no-code, nocode
H5 Dooring
H5 Page Maker, H5 Editor, LowCode. Make H5 as easy as building blocks. | 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站,LowCode平台.
Stars: ✭ 5,832 (+44.07%)
Mutual labels:  page-builder, drag-and-drop, site-generator, low-code, lowcode, h5-editor
Craft.js
🚀 A React Framework for building extensible drag and drop page editors
Stars: ✭ 4,512 (+11.46%)
Mutual labels:  page-builder, drag-and-drop, html-builder, site-builder, web-builder
vite-vue3-lowcode
vue3.x + vite2.x + vant + element-plus H5移动端低代码平台 lowcode 可视化拖拽 可视化编辑器 visual editor 类似易企秀的H5制作、建站工具、可视化搭建工具
Stars: ✭ 1,309 (-67.66%)
Mutual labels:  drag-and-drop, low-code, nocode, lowcode
Budibase
Budibase is an open-source low-code platform for creating internal apps in minutes. Supports PostgreSQL, MySQL, MSSQL, MongoDB, Rest API, Docker, K8s 🚀
Stars: ✭ 8,071 (+99.38%)
Mutual labels:  low-code, nocode, lowcode
Amis
前端低代码框架,通过 JSON 配置就能生成各种页面。
Stars: ✭ 8,930 (+120.6%)
Mutual labels:  low-code, no-code, lowcode
Awesome Lowcode
国内低代码平台从业者交流
Stars: ✭ 7,099 (+75.37%)
Mutual labels:  low-code, nocode, lowcode
Vvvebjs
Drag and drop website builder javascript library.
Stars: ✭ 4,609 (+13.86%)
Mutual labels:  drag-and-drop, site-generator, site-builder
plasmic
Visual page builder and web design tool for any website or web app tech stack
Stars: ✭ 1,475 (-63.56%)
Mutual labels:  page-builder, nocode, lowcode
Luban H5
[WIP]en: web design tool || mobile page builder/editor || mini webflow for mobile page. zh: 类似易企秀的H5制作、建站工具、可视化搭建系统.
Stars: ✭ 4,991 (+23.3%)
Mutual labels:  page-builder, web-design, page-editor
vscode
Builder.io for VSCode - turn designs into code!
Stars: ✭ 139 (-96.57%)
Mutual labels:  no-code, nocode
tideflow
Building extensible automation. Tideflow is a Realtime, open source workflows execution and monitorization web application.
Stars: ✭ 101 (-97.5%)
Mutual labels:  no-code, nocode
epage-core
epage 核心依赖 低代码可视化配置
Stars: ✭ 22 (-99.46%)
Mutual labels:  nocode, lowcode
appflowy
AppFlowy is an open-source alternative to Notion. You are in charge of your data and customizations. Built with Flutter and Rust.
Stars: ✭ 24,929 (+515.83%)
Mutual labels:  low-code, no-code
elemental-lowcode
Elemental lowcode development platform.
Stars: ✭ 44 (-98.91%)
Mutual labels:  low-code, lowcode
sheetful
The sheetiest REST API on the block.
Stars: ✭ 65 (-98.39%)
Mutual labels:  low-code, no-code
pd
明道云私有部署版 - 快速部署可免费使用的零代码企业应用平台(APaaS)
Stars: ✭ 249 (-93.85%)
Mutual labels:  low-code, no-code
openvalidation
Compose validation rules in the language you use every day, openVALIDATION handles code creation for you.
Stars: ✭ 62 (-98.47%)
Mutual labels:  nocode, lowcode
citrus
🌈 低代码快速开发脚手架,灵活、高效,降低开发成本
Stars: ✭ 368 (-90.91%)
Mutual labels:  low-code, lowcode
nocodb
🔥 🔥 🔥 Open Source Airtable Alternative - turns any MySQL, Postgres, SQLite into a Spreadsheet with REST APIs.
Stars: ✭ 28,894 (+613.78%)
Mutual labels:  low-code, no-code

Brick Design

build status npm version npm downloads codecov

SNAPSHOT

brickd1 brickd2 brickd3

描述

基于React组件之间原始约束设计,还原真实开发中组件编码过程,所见即所得。当前版本还在开发中,新功能持续更新.....欢迎关注!

快捷键

command/control+"+" 放大

command/control+"-" 缩小

command/control+U 全局查看与窗口查看切换

command/control+z 撤销

command/control+shift+z 回退

run example

yarn  install

npm run start:example

Features

画布 组件树 属性配置 样式配置 高级配置 渲染器 代码生成器
【X】-操作:参考线展示、组件间距实时查看、拖拽改变组件宽高 【 】-组件-复制 【X】-普通属性配置(待重做) 【 】-支持所有Css样式 【 】-支原生事件方法自定 【X】-完全还原渲染 【 】-完代码生成
【X】-弹窗类组件:选中展示 【 】-组件-删除 【 】-变量配置 【 】-组件样式定制 【 】-支dsl方法选择 【 】-dsl支持 【 】-完画布与代码相互转换
【 】-自由拖拽:绝对布局自由拖拽调整位置 【 】-组件-清空 【 】-表达式配置 【 】-样式变量支持 【 】-支手写自定义方法:执行生命周期规则 【 】-完画布与代码实时交互
【X】-拖拽实时预览 【 】-主域组件分类标记 【 】-手写样式支持
【X】-组件: 复制、删除、清空子组件 【X】-拖拽-同级排序 【X】-样式实时预览
【X】-拖拽:实时预览、实时排序、自由嵌套、属性节点区分 【X】-拖拽-跨组件排序
【X】-模板:生成、添加、模板截图 【X】-画板协同-选中实时协同
【X】-快速预览 【X】-画板协同-hover实时协同
【X】-撤销、重做
【 】-样式可视化操作:实时预览
【 】-属性可视化操作
【 】-自定义组件:组件协议自动生成
【X】-父子组件约束限制:红色-禁止添加、黄色-提示可添加、绿色-可添加
【X】-组件对象(vDom)扩展
【X】-自定义reducer处理页面状态
【X】-组件渲染:逻辑渲染、Map渲染、方法渲染
【X】-数据:状态域、变量
【 】-逻辑:自定义方法、数据映射、变量过滤器
【X】-平台支持:PC各型号手机
【 】-声明周期:初始化执行、每次渲染执行
【 】-dsl: dsl插件支持
【 】-plugin:插件扩展
【 】-标尺展示
【 】-组件:样式就近操作
【X】-React
【 】-Rax

技术交流 QQ群

捐赠作者

如果你觉得这个项目对你有用或者有所启发,可以请作者喝杯咖啡提提神持续更新:

微信捐赠 支付宝捐赠

LICENSE

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].