jakhuang/form-generator

★ 9,326VueAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((form-generator))
    What It Does
      Drag-drop designer
      Code generation
    Outputs
      Vue component code
      JSON config
    Tools
      VS Code plugin
      Monaco editor
    Ecosystem
      Element UI
      form-gen-parser

mindmap root((form-generator)) What It Does Drag-drop designer Code generation Outputs Vue component code JSON config Tools VS Code plugin Monaco editor Ecosystem Element UI form-gen-parser

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Design a data-entry form visually using drag and drop, then copy the generated Vue component code directly into a project

USE CASE 2

Save a form layout as JSON to a database and render it dynamically at runtime using the form-gen-parser package

USE CASE 3

Build and configure forms inside VS Code without switching to a browser using the Form Generator Plugin

Tech stack

VueJavaScriptElement UIMonaco Editor

Getting it running

Difficulty · easy Time to first run · 5min

Requires an existing Vue 2 project with Element UI, the VS Code plugin is searchable in the marketplace as Form Generator Plugin.

Use freely for any purpose including commercial use, as long as you keep the copyright notice (MIT license).

In plain English

This project is a visual form designer and code generator built for Vue.js applications that use the Element UI component library. Element UI is a widely-used set of ready-made interface components for Vue. The tool provides a drag-and-drop canvas for laying out form fields, then automatically produces the Vue code that matches the design, ready to copy into a project. There are two main outputs the tool can produce. The first is working Vue code that runs directly in any project already using Element UI. The second is a JSON representation of the form, which can be saved to a database and later converted back into a live form using a companion parser. The parser is published as a separate npm package called form-gen-parser, installable with a single command. A VS Code plugin is also provided for developers who prefer to stay in their editor. It lets developers right-click to open the form designer, visually configure the form, and save the resulting code directly into the project without switching applications. The plugin is searchable in the VS Code marketplace under the name Form Generator Plugin. The Monaco editor, the same editor engine that powers VS Code, is used inside the interface for displaying and editing generated code. The README is written in Chinese, and the project includes QQ chat groups for community discussion. It is released under the MIT license.

Copy-paste prompts

Prompt 1

Show me how to install form-gen-parser and use a JSON config from form-generator to dynamically render a form in a Vue 2 app with Element UI.

Prompt 2

I got a JSON config from the form-generator designer. Write the Vue component that takes this JSON and renders the live form with validation.

Prompt 3

How do I install and use the Form Generator VS Code extension to design a form and save the generated Vue code to my project?

Prompt 4

Show me how to add a custom validation rule to a specific field in a form built with the form-generator drag-and-drop interface.

Open on GitHub → Explain another repo

← jakhuang on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.