# jakhuang/form-generator **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/jakhuang-form-generator).** 9,330 stars · 2,166 forks · Vue · MIT ## Links - GitHub: https://github.com/JakHuang/form-generator - Homepage: https://jakhuang.github.io/form-generator - awesome-repositories: https://awesome-repositories.com/repository/jakhuang-form-generator.md ## Topics `element-ui` `form-designer` `monaco-editor` `vue` `vue-jsx` `vue-multipage` `vue-render` `vuejs` ## Description This is a visual form builder that generates Vue single-file components from a drag-and-drop canvas. It provides a complete workflow for designing forms visually, previewing them in real time, and exporting them as ready-to-use Vue code with validation rules already configured. The tool integrates a drag-and-drop canvas with a live preview pane, allowing you to see the generated form interactively as you build it. It includes an embedded code editor with hot reload, so changes to the generated code are reflected immediately in the preview. A VS Code extension bridge lets you open the designer from the editor and save generated files directly into your project. The form designer supports configuring component-level properties such as field names, labels, placeholders, and validation rules, as well as form-level settings like grid layout and label alignment. It also includes a dialog form wrapper component that encapsulates a validated form inside a modal with built-in open, close, and confirm lifecycle handlers. The visual design can be serialized to a JSON schema for inspection or further processing. ## Tags ### User Interface & Experience - [Visual Designers](https://awesome-repositories.com/f/user-interface-experience/form-element-mapping/visual-designers.md) — Provides a visual form builder built on Element UI that exports native Vue components with validation. - [Visual Form Designers](https://awesome-repositories.com/f/user-interface-experience/visual-form-designers.md) — Builds form layouts by dragging and dropping pre-configured components onto a canvas without writing code. ([source](https://jakhuang.github.io/form-generator)) - [Vue Single-File Generators](https://awesome-repositories.com/f/user-interface-experience/component-architectures/single-file-components/vue-single-file-generators.md) — Transforms a JSON schema into a complete Vue component with template, script, and style sections. - [Component Property Configurators](https://awesome-repositories.com/f/user-interface-experience/component-property-systems/component-property-configurators.md) — Sets field name, label, placeholder, validation rules, and other attributes for each form component. ([source](https://jakhuang.github.io/form-generator)) - [Form Input Validation](https://awesome-repositories.com/f/user-interface-experience/form-input-validation.md) — Configures validation rules on form fields so user input is checked before submission. ([source](https://cdn.jsdelivr.net/gh/jakhuang/form-generator@dev/README.md)) - [Generated Content Previews](https://awesome-repositories.com/f/user-interface-experience/generated-content-previews.md) — Previews the generated form inside an iframe to see how it behaves without leaving the designer. ([source](https://github.com/JakHuang/form-generator/wiki/%E9%A1%B9%E7%9B%AE%E4%B8%BB%E8%A6%81%E7%BB%93%E6%9E%84%E5%88%86%E6%9E%90)) - [Form Preview Tools](https://awesome-repositories.com/f/user-interface-experience/interactive-design-previews/form-preview-tools.md) — Provides an embedded iframe preview that shows the generated form interactively as you design. - [Vue Form Code Generators](https://awesome-repositories.com/f/user-interface-experience/mockup-generators/code-generation/vue-form-code-generators.md) — Generates native Vue single-file component code from a visual form design, including HTML, CSS, and JavaScript. ([source](https://github.com/JakHuang/form-generator/wiki/%E9%A1%B9%E7%9B%AE%E4%B8%BB%E8%A6%81%E7%BB%93%E6%9E%84%E5%88%86%E6%9E%90)) - [Code Generators](https://awesome-repositories.com/f/user-interface-experience/vue-js-form-component-suites/code-generators.md) — Generates native Vue single-file components from a visual drag-and-drop form design. - [Visual Designers](https://awesome-repositories.com/f/user-interface-experience/vue-js-form-component-suites/visual-designers.md) — Provides a drag-and-drop form designer that generates Vue single-file component code from a visual layout. - [Form Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs/alert-dialogs/form-dialogs.md) — Displays a modal dialog with a validated form and built-in open, close, and confirm handlers. ([source](https://github.com/JakHuang/form-generator/wiki/el-dialog%E7%9A%84%E5%B0%81%E8%A3%85%E4%B8%8E%E8%B0%83%E7%94%A8)) - [Auto-resetting Forms](https://awesome-repositories.com/f/user-interface-experience/modal-form-components/auto-resetting-forms.md) — Creates a modal dialog with a validated form that resets automatically when opened or closed. ([source](https://github.com/JakHuang/form-generator/wiki/el-dialog%E7%9A%84%E5%B0%81%E8%A3%85%E4%B8%8E%E8%B0%83%E7%94%A8)) - [Dialog Form Wrappers](https://awesome-repositories.com/f/user-interface-experience/modal-form-components/dialog-form-wrappers.md) — Ships a dialog form wrapper component with built-in open, close, and confirm lifecycle handlers for validated forms. ### Part of an Awesome List - [Drag-and-Drop](https://awesome-repositories.com/f/awesome-lists/devtools/form-builders/drag-and-drop.md) — Provides an interface for composing form fields on a canvas without writing code, with live preview. - [Form Validation](https://awesome-repositories.com/f/awesome-lists/devtools/form-validation.md) — Configures validation rules on form fields to check user input before submission. - [Visual Page Builders](https://awesome-repositories.com/f/awesome-lists/devtools/visual-page-builders.md) — Visual form designer that generates Element UI code. ### Development Tools & Productivity - [Visual Designers](https://awesome-repositories.com/f/development-tools-productivity/form-generators/visual-designers.md) — Converts a visual form design into ready-to-use Vue code with HTML, CSS, and JavaScript. - [Hot Code Reloading](https://awesome-repositories.com/f/development-tools-productivity/hot-code-reloading.md) — Provides an embedded code editor that instantly updates the preview pane when generated code is modified. - [Form Previewers](https://awesome-repositories.com/f/development-tools-productivity/live-preview-tools/form-previewers.md) — Provides an embedded iframe preview that shows the generated form interactively as you design. - [VS Code Extensions](https://awesome-repositories.com/f/development-tools-productivity/vs-code-extensions.md) — Launches the visual form designer directly from a VS Code extension, saving generated code into the project. ([source](https://cdn.jsdelivr.net/gh/jakhuang/form-generator@dev/README.md)) - [Form Designer Bridges](https://awesome-repositories.com/f/development-tools-productivity/vs-code-extensions/form-designer-bridges.md) — Opens the form designer from a VS Code extension and saves generated code directly into the project. ([source](https://cdn.jsdelivr.net/gh/jakhuang/form-generator@dev/README.md)) ### Security & Cryptography - [Live Preview Sandboxes](https://awesome-repositories.com/f/security-cryptography/third-party-script-security/iframe-sandboxing/live-preview-sandboxes.md) — Renders generated Vue code inside an isolated iframe for real-time interaction and testing. ### Software Engineering & Architecture - [Validation Rule Engines](https://awesome-repositories.com/f/software-engineering-architecture/contextual-validation-rules/dynamic-validation-rules/validation-rule-engines.md) — Attaches declarative validation constraints to form fields that are enforced at runtime before submission. ### Web Development - [Custom Form Field Configurations](https://awesome-repositories.com/f/web-development/form-field-state-management/custom-form-field-configurations.md) — Sets field name, title, placeholder, grid layout, and validation rules for each form component. ([source](https://jakhuang.github.io/form-generator)) - [Form Layouts](https://awesome-repositories.com/f/web-development/form-handling/form-layouts.md) — Adjusts form-level settings such as grid layout, label alignment, size, and button visibility. ([source](https://jakhuang.github.io/form-generator)) - [Editor Live Previews](https://awesome-repositories.com/f/web-development/live-preview-systems/editor-live-previews.md) — Runs the designed form in a live preview pane to test layout and behavior immediately. ([source](https://jakhuang.github.io/form-generator)) - [Form Code Exporters](https://awesome-repositories.com/f/web-development/vue-component-wrappers/vue-component-libraries/form-code-exporters.md) — Exports a visual form design as a native Vue single-file component ready for use in a project. ([source](https://jakhuang.github.io/form-generator)) - [Vue Form Code Generators](https://awesome-repositories.com/f/web-development/vue-js-project-generators/vue-form-code-generators.md) — Produces native Vue single-page form code from a visual design, ready for direct use and full customization. ([source](https://cdn.jsdelivr.net/gh/jakhuang/form-generator@dev/README.md))