Modern jQuery plugin that turns JSON Schema-like definitions into beautiful, responsive HTML forms with real-time validation.
- 🎨 Modern UI: clean, responsive (Flexbox/Grid), light/dark ready
- 🔎 Real-time validation: instant feedback with friendly hints
- 🌍 i18n & RTL: Persian/Farsi and other RTL languages supported
- 🧩 Rich inputs: string, number, email, tel, url, date, time, textarea, select, checkbox, radio, color, html, object, array
- 🧱 Modular code: Renderer, Validator, EventHandler, Utils
- 🛡️ TypeScript: bundled
.d.tsfor great IntelliSense
Include jQuery, the compiled plugin, and one of the themes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="jquery/jquery.min.js"></script>
<script src="jsonToForm/jsonToForm.v2.js"></script>
<link href="src/styles/jsonToForm.clean.css" rel="stylesheet" />
<!-- Or: <link href="src/styles/jsonToForm.modern.css" rel="stylesheet" /> -->
</head>
<body>
<div id="myForm"></div>
<script>
const form = $("#myForm").jsonToForm({
schema: {
type: "object",
properties: {
name: { type: "string", title: "Full Name", minLength: 2 },
email: { type: "email", title: "Email Address" },
age: { type: "number", title: "Age", min: 18, max: 100 }
},
required: ["name", "email"]
}
});
// Read & validate
console.log(form.getValue());
console.log(form.isValid());
</script>
</body>
</html>getValue()→ returns the current form valuesetValue(obj)→ sets/replaces form valueisValid()→ boolean validity of the whole formvalidator.getAllErrors()→ list of validation errors
Example:
const form = $("#myForm").jsonToForm(options);
form.setValue({ name: "John Doe" });
console.log(form.getValue(), form.isValid());
console.log(form.validator.getAllErrors());- Themes:
src/styles/jsonToForm.clean.css(simple),src/styles/jsonToForm.modern.css(polished) - Dark mode: set
data-json-form-theme="dark"on<body> - RTL: add
dir="rtl"on<html>/<body>/container
<body dir="rtl" data-json-form-theme="dark">
<!-- your form container -->
</body>src/→ modular source (core, renderer, validator, events, utils, styles)jsonToForm/jsonToForm.v2.js→ compiled v2 bundlejsonToForm/jsonToForm.d.ts→ TypeScript definitionsv1/→ legacy v1 plugin, styles, and demosdemo-v2.html→ v2 demo
Old usage (v1.x):
$('#myForm').jsonToForm({ schema, value });New usage (v2):
$('#myForm').jsonToForm({ schema });
$('#myForm').jsonToForm('setValue', value);For legacy plugin and original demos, see the v1/ folder.
Run a simple static server and open the demo (PowerShell):
# From the repo root
python -m http.server 8080
# Open in your browser:
# http://localhost:8080/demo-v2.htmlMIT © Contributors — see LICENSE
