jdorn/json-editor

★ 5,824JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((json-editor))
    What it does
      Schema to HTML form
      Auto-build form fields
      Validate user input
    Features
      Array row management
      Object nesting
      Rich text support
    Styling
      Plain HTML default
      Bootstrap support
      Foundation and jQueryUI
    Status
      No longer maintained
      Use community fork
      Draft 3 and 4 schemas

mindmap root((json-editor)) What it does Schema to HTML form Auto-build form fields Validate user input Features Array row management Object nesting Rich text support Styling Plain HTML default Bootstrap support Foundation and jQueryUI Status No longer maintained Use community fork Draft 3 and 4 schemas

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Generate an HTML form automatically from any JSON Schema without writing form markup by hand.

USE CASE 2

Allow users to edit nested JSON data through a browser UI with live validation and add/delete array rows.

USE CASE 3

Style the generated form with Bootstrap or Foundation by passing a single option to the constructor.

USE CASE 4

Use the actively maintained community fork at github.com/json-editor/json-editor for new projects.

Tech stack

JavaScriptHTMLBootstrapFoundationjQueryUI

Getting it running

Difficulty · easy Time to first run · 30min

This repo is unmaintained, use the community fork at github.com/json-editor/json-editor for active development and bug fixes.

License terms are not described in the explanation.

In plain English

Note: this repository is no longer maintained. Active development moved to a community fork at github.com/json-editor/json-editor. JSON Editor is a JavaScript library that takes a JSON Schema document and automatically builds an HTML form from it. A JSON Schema is a file that describes what shape your data should take: which fields exist, what types they are, which ones are required, and so on. JSON Editor reads that description and produces a working form that users can fill in, with the result being valid JSON data. The library has no required dependencies and runs in any modern browser. You give it a container element on your page and a schema, and it renders the form. It reads data back out through a simple API call and validates the current form values against the schema on demand. For arrays of items, it generates repeated form rows with controls to add, delete, or reorder entries. For objects with multiple possible structures, it renders a switcher so the user can pick which variant applies. Styling is optional. Without any extra libraries the editor renders plain HTML. If you include Bootstrap, Foundation, or jQueryUI, you can configure the editor to use those frameworks for a more polished look. There is also optional support for rich text editors (for fields containing HTML or Markdown), a code editor for raw JSON fields, and enhanced dropdown controls from Select2 or Selectize. Configuration is done through a JavaScript options object. Options control things like whether to show validation errors immediately or only after interaction, whether to allow additional properties beyond the schema, and whether to pre-load external schema references via network requests. The editor exposes events so you can react when values change or when the editor finishes loading. The project supported JSON Schema draft versions 3 and 4. The full README is longer than what was shown.

Copy-paste prompts

Prompt 1

I have a JSON Schema describing a user profile with nested address fields. Write the JavaScript code to initialize json-editor on a page div, load the schema, and read back the filled-in JSON when the user clicks submit.

Prompt 2

My JSON Schema has an array of product items. How do I configure json-editor so users can add, delete, and reorder rows in that array?

Prompt 3

I want to use json-editor with Bootstrap 4 styling. What constructor options do I pass to enable Bootstrap, show inline validation errors, and disallow extra fields not in the schema?

Prompt 4

How do I preload existing JSON data into json-editor so users see their previously saved values when the form opens?

Prompt 5

I'm migrating from jdorn/json-editor to the community fork. What are the key differences in setup and which package do I install?

Open on GitHub → Explain another repo

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

Verify against the repo before relying on details.