xaboy/form-create

★ 7,010JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((form-create))
    What it does
      JSON-driven form builder
      Auto layout and validation
      Two-way data binding
    Field types
      Text and date inputs
      File upload
      Dropdowns
      Custom Vue components
    Usage
      JSON config rules
      maker builder API
      CDN or npm
    Integrations
      Vue.js
      iViewUI
      ElementUI

mindmap root((form-create)) What it does JSON-driven form builder Auto layout and validation Two-way data binding Field types Text and date inputs File upload Dropdowns Custom Vue components Usage JSON config rules maker builder API CDN or npm Integrations Vue.js iViewUI ElementUI

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build an admin data-entry form for an ERP system by writing a JSON rule list instead of hand-coding HTML.

USE CASE 2

Generate a government registration form dynamically from a server-side JSON config without any frontend changes.

USE CASE 3

Drop form-create into an existing Vue.js ElementUI app to add complex forms without leaving the design system.

USE CASE 4

Use the maker builder API to construct a multi-field form programmatically with chained method calls in a Vue component.

Tech stack

JavaScriptVue.jsiViewUIElementUI

Getting it running

Difficulty · easy Time to first run · 30min

Requires an existing Vue.js project with iViewUI or ElementUI already installed as peer dependencies.

MIT license, use freely for any purpose, including commercial, with no restrictions beyond keeping the copyright notice.

In plain English

form-create is a JavaScript library that lets developers build web forms by writing a JSON description rather than hand-coding HTML. You define what fields you want (text inputs, date pickers, file uploads, dropdowns, and so on) as a list of rules in JSON, pass that list to the form-create component, and it renders a complete, working form on the page. The library handles layout, validation, and collecting the submitted data automatically. The project targets Vue.js web applications and works alongside popular Vue UI component sets, specifically iViewUI and ElementUI (and their newer successors). This means the forms it generates look consistent with the rest of a Vue-based product and pick up the design styles from whichever component library the project already uses. Beyond the JSON-driven approach, the library includes a JavaScript builder called maker that lets you construct form rules in code without writing raw JSON objects. You call methods like maker.input('label', 'field_name') or maker.date('label', 'field_name') to add fields, and chain them together to build up a form programmatically. Both styles, JSON config and the maker builder, can be mixed in the same form. The library also supports two-way data binding, so the form values stay in sync with your application's data model as the user types. There is an event extension system for reacting to field changes, and you can drop any custom Vue component into a form alongside the 17 built-in field types. The README is brief and mostly contains installation and usage code examples. Installation is through npm. The library can also be loaded directly in a browser via a CDN script tag without a build step, which makes it usable in simpler setups. The project description mentions it has been used in production in government systems, office automation, ERP, and e-commerce platforms. The code is under the MIT license.

Copy-paste prompts

Prompt 1

Using xaboy/form-create with ElementUI, write the JSON rule list to create a user registration form with name, email, date-of-birth, and a profile photo upload with validation.

Prompt 2

I want to build a dynamic form in Vue 3 using form-create where the fields change based on a dropdown selection. Show me how to update the rules array reactively.

Prompt 3

Using the form-create maker builder, programmatically add 5 fields to a form and collect submitted values in a Vue data object.

Prompt 4

Show me how to embed a custom Vue component as a field inside a form-create form alongside built-in field types like input and select.

Open on GitHub → Explain another repo

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

Verify against the repo before relying on details.