A Phoenix LiveComponent for visually editing JSON data.

It provides a tree-based editor for modifying nested JSON structures, with support for various data types and real-time JSON Schema validation.

Attributes

• id (required) - A unique identifier for the component instance.
• json (optional) - The initial JSON data to edit. Defaults to %{}.
• schema (optional) - A JSON Schema (as a map) to validate the data against.
• on_save (optional) - A 1-arity callback function invoked when the user clicks "Save". It receives the current JSON data as a map or list.
• on_change (optional) - A 1-arity callback function invoked when the JSON data changes. It receives the updated JSON data as a map or list. Note: This callback is NOT invoked if the data is invalid according to the provided schema.
• class (optional) - Additional CSS classes to apply to the root container.
• header_class (optional) - Additional CSS classes to apply to the header section.
• toolbar_class (optional) - Additional CSS classes to apply to the toolbar/actions section.

Examples

Basic Usage

<.live_component
  module={JSONSchemaEditor.JSONEditor}
  id="json-editor"
  json={%{"foo" => "bar", "count" => 42}}
  on_change={fn new_json -> IO.inspect(new_json) end}
/>

With Schema Validation

<.live_component
  module={JSONSchemaEditor.JSONEditor}
  id="json-editor-with-schema"
  json={@user_data}
  schema={@user_schema}
  on_save={fn updated -> IO.inspect(updated) end}
/>