JSON Schema Editor

A Phoenix LiveComponent for visually building, editing, and validating JSON Schemas.

JSON Schema Editor Screenshot

Features

Visual Editing: Recursively build and edit deeply nested objects and arrays.
Advanced Logic: Support for oneOf, anyOf, allOf and conditional keywords (if, then, else, not).
Test Lab: Validate sample JSON data against your schema in real-time with detailed error reporting.
Schema Generation: Automatically infer a JSON Schema from a pasted JSON object.
Undo/Redo: Full history support for all schema modifications.
Real-time Validation: In-editor logic checking (e.g., min <= max) with immediate visual feedback.
Draft 07 Support: Includes constraints, enums, constants, null type, and $schema management.
Custom Extensions: Support for adding and editing custom x- properties at any node level.
Copy to Clipboard: One-click export of the generated schema.
Lightweight: Zero external JS dependencies (uses native Phoenix hooks), only requires phoenix_live_view.
JSON Viewer: Dedicated component for displaying JSON with syntax highlighting and indentation guides.
JSON Editor: Specialized component for editing JSON data according to a provided JSON Schema.

Installation

This library uses a small CSS file for styling and a JavaScript hook for clipboard functionality.

1. Add `json_schema_editor` to your list of dependencies in `mix.exs`:

def deps do
  [
    {:json_schema_editor, "~> 0.9.7"}
  ]
end

2. Import the library's CSS in your `assets/css/app.css` (or equivalent):

@import "../../deps/json_schema_editor/assets/css/json_schema_editor.css";

3. Configure JavaScript Hooks (Clipboard Support):

In your assets/js/app.js, import and register the hook:

import { Hooks as JSEHooks } from "../../deps/json_schema_editor/assets/js/json_schema_editor"

// ... existing hooks
let liveSocket = new LiveSocket("/live", Socket, {
  params: {_csrf_token: csrfToken},
  hooks: { ...JSEHooks, ...other_hooks }
})

Usage

The editor supports JSON Schema Draft 07. It automatically injects the $schema URI if not provided.

1. Initialize the Schema

def mount(_params, _session, socket) do
  schema = %{
    "type" => "object",
    "properties" => %{
      "user" => %{
        "type" => "object",
        "properties" => %{
          "name" => %{"type" => "string", "minLength" => 2}
        }
      }
    }
  }

  {:ok, assign(socket, my_schema: schema)}
end

2. Render the Component

<.live_component
  module={JSONSchemaEditor}
  id="json-editor"
  schema={@my_schema}
  on_change={fn updated_schema -> send(self(), {:schema_changed, updated_schema}) end}
  on_save={fn updated_schema -> send(self(), {:schema_saved, updated_schema}) end}
  class="my-custom-theme"
  header_class="bg-gray-100 p-4"
  toolbar_class="flex gap-2"
/>

Note: Both on_save and on_change are optional. If on_save is omitted, the "Save" button will not be rendered. on_change triggers on every valid update.

3. Handle Updates

def handle_info({:schema_saved, updated_schema}, socket) do
  # The schema is guaranteed to be logically consistent here
  {:noreply, assign(socket, my_schema: updated_schema)}
end

def handle_info({:schema_changed, updated_schema}, socket) do
  # Triggered whenever the schema is modified and valid
  {:noreply, assign(socket, my_schema: updated_schema)}
end

JSON Viewer

You can also use the standalone viewer component to display any JSON data with syntax highlighting.

<JSONSchemaEditor.Viewer.render json={@my_schema} />

It accepts maps, lists, or even raw JSON strings (which it will attempt to decode and pretty-print).

JSON Editor

The library also includes a dedicated JSON Editor component for editing JSON data according to a schema.

<.live_component
  module={JSONSchemaEditor.JSONEditor}
  id="json-data-editor"
  schema={@my_schema}
  json={@my_data}
  on_change={fn updated_json -> send(self(), {:json_changed, updated_json}) end}
  on_save={fn updated_json -> send(self(), {:json_updated, updated_json}) end}
/>

It features real-time validation, a visual tree editor, and a live preview of the edited data.

Theming

The editor uses CSS variables for styling, which can be easily overridden in your project's CSS or via the class attribute.

.my-custom-theme {
  /* Override main colors */
  --jse-primary: #ec4899;
  --jse-primary-hover: #db2777;
  
  /* Override layout dimensions */
  --jse-tree-row-height: 2rem;
}

See assets/css/json_schema_editor.css for the full list of available variables.

Development

Running Tests

mix test --cover

Running the Demos

# Main Schema Editor Demo
elixir examples/demo.exs

# JSON Data Editor Demo
elixir examples/json_editor.exs

Visit http://localhost:4040 (or 4041 for the JSON editor) to see the components in action.

Next Page → Changelog