// the find
JakHuang/form-generator
:sparkles:Element UI表单设计及代码生成器
A drag-and-drop form designer for Vue 2 + Element UI that generates working component code or a JSON schema you can persist and re-render at runtime. Aimed at internal tool teams who build a lot of data-entry forms and want to skip the boilerplate. The generated code is real Vue, not a black-box config blob.
The live code preview via Monaco is genuinely useful — you see the template, script, and CSS update in real time as you configure fields, which makes it easy to grab just the generated snippet rather than commit to the whole workflow. The JSON schema / parser split is a clean design: design-time config is stored separately from the renderer, so form definitions can live in a database and be rendered without shipping the designer. The VSCode plugin that lets you right-click to open the designer and write code directly into your project file is a practical workflow shortcut most tools like this skip. The render engine uses Vue 2 render functions rather than raw v-model wrappers, so the output actually behaves like real components.
The project is effectively dead — last commit April 2023, and it targets Vue 2 + Element UI 2, both of which are themselves EOL. Adopting this means owning three stale dependencies with no upgrade path to Vue 3 or Element Plus. Monaco editor is checked into `public/libs/` as a ~20MB static dump rather than an npm dependency, which means updating it is a manual file-replacement job and it bloats the repo history permanently. The documentation is Chinese-only; if you need to understand anything beyond the live demo, you're digging through GitHub Issues in Chinese. No TypeScript anywhere, no meaningful tests, and the generator logic in `src/components/generator/` relies on undocumented internal field conventions — adding a custom field type requires reverse-engineering the config structure from existing examples.