Absolutely! Low-code/zero-code page designer and code generator

A true master will always have the heart of an apprentice!

1. Project Introduction

Low-code/zero-code page designer and code generator

Second, the implementation of functions

1. Infinite nested layout support: CraftDesigner provides the ability to infinitely nest layouts, which means you can create layout structures of any depth in your pages. No matter how many layers of nesting you need, CraftDesigner has you covered, allowing you to design more complex and hierarchical pages.
2. Drag-and-drop layout of native HTML tags: CraftDesigner not only supports native HTML tags, but also allows you to lay out these tags with a simple drag-and-drop operation. This means that you can easily place various HTML elements into your page and resize them by dragging and dropping them for a custom layout.
3. Drag-and-drop layout support for any React component: In addition to native HTML tags, CraftDesigner supports drag-and-drop layouts for any React component, including open-source and custom components, without the need to modify existing components. This means that you can use a variety of ready-made React components on your pages, or you can develop your own components to achieve richer and more personalized layouts.
4. Support for iframe embedding components: If you need to embed other web pages or applications in your page, CraftDesigner also provides support for iframes. You can easily place an iframe into a page and set the appropriate properties to load the specified web page content, enabling integration and interaction with external resources.
5. Support for ECharts Graphics Drag-and-Drop Layouts: CraftDesigner also integrates support for ECharts graphics, allowing you to quickly create a variety of data visualizations by simply dragging and dropping to lay out and configure various graphics components.
6. Pages serialized to JSON data: Pages designed by CraftDesigner can be easily serialized into JSON data instead of generating code. This means that you can save the layout structure and configuration information of the entire page as a JSON object for easy storage, transfer, and subsequent processing, and can also be imported into CraftDesigner at any time for editing and adjustment.
7. CraftDesigner as a normal React component: CraftDesigner is a normal React component in its own right, and can be easily integrated into any React project. Whether you're working on a new project or want to add visual layout capabilities to an existing project, you can use CraftDesigner with simple ingestion and configuration.
8. Server-agnostic, only output and input JSON data: CraftDesigner is designed to be server-agnostic, it only handles the layout and configuration of the page, and does not involve any backend-related logic. This means that you can use CraftDesigner in any environment, with only the input and output of JSON data, regardless of being tied to a specific back-end technology stack or framework.

3. Technology selection

craft.js

Ant Design

React

storybook

react-markdown

Fourth, the interface display











5. Source code address

Private correspondence: 98