1. Project Overview

Jiandanyun Visual Form Designer is dedicated to no-code development, enabling users to build various management systems and advancing toward the capabilities of Jiandaoyun. Preview rendering uses Vue source code. It also supports online editing of various business logic and makes it easy to define events for different controls. It faithfully reproduces Jiandaoyun's relational database controls, relational data query controls, logic configuration, and other features, allowing users to build various micro-systems without writing code.

2. Open Source License

Licensed under Apache-2.0

3. Screenshots

PC Design 

iPad Design 

Mobile Design

PC Preview

Mobile Preview 

Generates the final Vue code, CSS, and HTML pages. This is also the page for editing Vue code.

Download the Vue source code, which is automatically formatted.

4. Feature Overview

Features and Introduction.

The biggest advantage of Jiandanyun's visual form designer is that it renders Vue code directly rather than using JSON-based array rendering. Most Vue visual form designers on the market use JSON rendering. Rendering directly from Vue source code offers better cohesion, lower coupling, higher reusability, stronger encapsulation, and easier extensibility. Because it uses direct Vue source code rendering, any code written online can be rendered as long as it follows Vue syntax conventions and the generated Vue code is valid. No compilation is required. It fully inherits Vue's powerful extensibility, readability, modularity, reusability, and encapsulation. It can also easily integrate with virtually all Vue components available on the market, such as ECharts, DataV, Element UI, Baidu Maps, AMap, Ant Design Vue, and various custom components.

Distinctive features compared with other form designers on the market:

1. Design all three modes together using a single form.

2. Generate a single set of code that supports previews on PC, iPad, and mobile devices.

3. Supports online editing of Vue code logic without conflicting with Vue code generated by the visual designer. You can also insert debugger statements to debug while designing.

4. Supports online CSS editing, allowing you to customize the CSS styles of forms.

5. Supports downloading Vue source code locally, which can be previewed directly without any modifications.

6. Properties, components, events, and common CSS styles can all be configured through configuration files.

7. Vue source code is generated using jQuery + jQuery Template. Different code styles, business logic, and frameworks can be generated based on different business requirements. Existing supported form projects include Element UI forms, Ant Design Vue forms, and Mini UI forms. It can also support generating App UI and Mini Program syntax code.

8. Different templates can be created for different business requirements to generate specialized business forms, such as survey forms, large-screen data visualization dashboards, workflow forms, and general-purpose CRUD forms. As long as a business scenario has a certain degree of commonality, we can create a dedicated template parser for it.

9. Supports many convenient shortcuts. For example, clicking an event can switch to the source code and edit the corresponding event method.

10. Detail components automatically support import and export after drag-and-drop configuration.

11. Adds row and column controls for more precise layout management.

5. Tech Stack

Technologies Used:

Vue 2.0, Element UI, Monaco, vuedraggable, and other plugins.

Installation Guide

Download address for other Node.js versions: Enter link description.

• Make sure Node.js version 10–15 is installed. Higher versions have not been tested.
• After downloading the project for the first time, install the project dependencies:

npm install

• Local development

npm run serve

• Build

npm run build