Visual Builder List | 可视化构建

  • 2015-react-ui-builder #Project#: This tool is a visual builder of React JS components for your web application. In builder you can easily combine available components with each other, and see how they look and feel right on a web page.

  • 2016-Structor #Project#: Install Components > Prototype UI > Generate Source Code > Build Application.

  • 2017-grapesjs #Project#: Free and Open source Web Builder Framework. Next generation tool for building templates without coding.

  • 2018-Pagedraw #Project#: Pagedraw is a UI builder for React web apps. It works like a Sketch or Figma style design tool, but emits good quality JSX code.

  • 2019-Elementor #Project#: The most advanced frontend drag & drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.

  • 2019-Tina #Project#: Tina is a site editing toolkit for modern React-based sites (Gatsby and Next.js).

  • 2020-Animockup #Project#: Create animated mockups on the browser 🔥

  • BuildIO/builder: Drag and drop page building using your code components.

  • craft.js: 🚀 A React Framework for building extensible drag and drop page editors .

  • react-visual-editor: 基于 React 的可视化编辑,组件自由拖拽,dom 实时追踪,组件无限制嵌套组合,不添加多余节点,可完美还原 UI 设计,多平台支持,代码生成,实时预览。

Case Study

Component Specification

  • 2019-WeComponents #Project#: WeComponents 是一个基于通用组件语言规范 (CLS) 实现的 Vue.js 声明式组件库,写完 JSON 就做好了页面,让开发变得简单。

Visually Selector




Form | 表单

Json Schema

Form Builder

  • json-editor #Project#: JSON Schema Based Editor

  • React Form Builder #Project#: A complete react form builder that interfaces with a json endpoint to load and save generated forms. The toolbox contains 16 items for gathering data. Everything from star ratings to signature boxes!

  • 2019-form-render #Project#: 🏄 跨组件体系的表单渲染引擎 - 通过 JSON Schema 快速生成自定义表单配置界面。

Materials | 物料

  • ICE #Project#: 飞冰 - 海量可复用物料,通过 GUI 工具极速构建中后台应用。