JakHuang/form-generator
Form Generator
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.