JsonToForm v2.0 🚀

Modern jQuery plugin that turns JSON Schema-like definitions into beautiful, responsive HTML forms with real-time validation.

Live Demo

✨ Highlights

🎨 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.ts for great IntelliSense

🚀 Quick Start

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>

🧭 API (essentials)

getValue() → returns the current form value
setValue(obj) → sets/replaces form value
isValid() → boolean validity of the whole form
validator.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());

🎨 Theming & RTL

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>

🧱 Project Structure

src/ → modular source (core, renderer, validator, events, utils, styles)
jsonToForm/jsonToForm.v2.js → compiled v2 bundle
jsonToForm/jsonToForm.d.ts → TypeScript definitions
v1/ → legacy v1 plugin, styles, and demos
demo-v2.html → v2 demo

🔁 Migrating from v1.x

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.

🧪 Try locally

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.html

mirshahreza/jsonToForm