[Research] JSON Editor Web Component Options

Research Objective

Evaluate JSON editor libraries and strategies for ConfigJsonEditor Web Component migration.

Current State (ConfigJsonEditor.svelte)

• Using svelte-jsoneditor component
• Full-featured JSON editing with tree and text views
• Schema validation
• Search and replace
• Undo/redo
• Config save to backend (Tauri or HTTP)

Reference: desktop/src/lib/ConfigJsonEditor.svelte

Research Questions

1. Which JSON editor libraries work with Web Components?
2. Can we wrap existing editors or need native Web Component?
3. Shadow DOM compatibility for editors?
4. How to maintain schema validation?
5. Performance with large config objects?

JSON Editor Options

1. vanilla-jsoneditor (Current Library Repackaged)

Original: svelte-jsoneditor is wrapper around vanilla-jsoneditor

Pros:

• Already using it (via Svelte wrapper)
• Rich features (tree, text, preview modes)
• Schema validation
• Search, sort, transform
• Undo/redo
• Large file support

Cons:

• Heavy library (~200KB gzipped)
• Complex integration
• May need custom wrapper

Action: Try direct integration without Svelte wrapper

Repository: https://github.com/josdejong/svelte-jsoneditor

2. jsoneditor (Older Version)

Original JSON Editor by same author, now deprecated.

Pros:

• Battle-tested
• Smaller than vanilla-jsoneditor
• Good documentation

Cons:

• Deprecated in favor of vanilla-jsoneditor
• Less modern
• jQuery dependency

Action: Skip - superseded by vanilla-jsoneditor

3. ace-editor / codemirror-6 (Code Editor Approach)

Use general code editor with JSON mode.

Pros:

• Lightweight
• Great performance
• Syntax highlighting
• Autocomplete
• Linting

Cons:

• No tree view
• Less JSON-specific features
• Manual schema validation
• More work to integrate

Libraries:

• ACE Editor: https://ace.c9.io/
• CodeMirror 6: https://codemirror.net/

4. Custom Web Component

Build minimal JSON editor from scratch.

Pros:

• Full control
• Minimal bundle size
• Exactly what we need

Cons:

• Significant development effort
• Need tree view, validation, undo/redo
• Accessibility burden
• Testing complexity

Feasibility: High effort, only if other options fail

5. monaco-editor (VS Code Editor)

Microsoft's editor powering VS Code.

Pros:

• Excellent JSON support
• IntelliSense
• Schema validation
• Diff view
• Very polished

Cons:

• Heavy (~3MB)
• Complex integration
• Overkill for config editor

Action: Consider for future if advanced features needed

Integration Approaches

Approach 1: Wrap vanilla-jsoneditor

Create Web Component wrapper around vanilla-jsoneditor.

import { JSONEditor } from 'vanilla-jsoneditor';

class TerraphimConfigEditor extends HTMLElement {
  connectedCallback() {
    this.editor = new JSONEditor({
      target: this.shadowRoot || this,
      props: {
        content: { json: this.config },
        onChange: (content) => this.handleChange(content)
      }
    });
  }
  
  disconnectedCallback() {
    this.editor?.destroy();
  }
}

Challenges:

• Shadow DOM styles
• Event handling
• Schema injection

Approach 2: Light DOM Editor

Mount editor in Light DOM, Web Component provides API only.

class TerraphimConfigEditor extends HTMLElement {
  connectedCallback() {
    // Editor mounts in Light DOM
    const container = this.querySelector('[data-editor]');
    this.editor = new JSONEditor({
      target: container,
      props: { ... }
    });
  }
}

Pros:

• Simpler integration
• No style issues
• Editor "just works"

Cons:

• Less encapsulation
• Editor styles leak

Approach 3: CodeMirror 6 Custom

Use CodeMirror 6 with JSON extension.

import { EditorView, basicSetup } from 'codemirror';
import { json } from '@codemirror/lang-json';

class TerraphimConfigEditor extends HTMLElement {
  connectedCallback() {
    this.view = new EditorView({
      doc: JSON.stringify(this.config, null, 2),
      extensions: [basicSetup, json()],
      parent: this.shadowRoot || this
    });
  }
}

Pros:

• Lightweight
• Modern
• Great TypeScript support
• Excellent docs

Cons:

• No tree view
• Need custom validation
• Less JSON-specific

Features to Maintain

From Current Implementation:

• Tree and text view modes
• JSON validation
• Schema support
• Search and replace
• Undo/redo
• Large file handling
• Save to backend (Tauri/HTTP)
• Error highlighting

New Requirements:

• Web Component API
• Shadow DOM compatible (if needed)
• TypeScript types
• Theme-aware
• Accessible

Schema Validation

Current: Uses JSON Schema via svelte-jsoneditor

Options for Web Component:

1. Pass schema as property

   <terraphim-config-editor
     schema="{...}"
     value="{...}"
   ></terraphim-config-editor>
   

2. Load schema from URL

   <terraphim-config-editor
     schema-url="/api/config/schema"
     value="{...}"
   ></terraphim-config-editor>
   

3. Use AJV for validation

   • Library: ajv (JSON Schema validator)
   • Integrate directly in Web Component

Performance Considerations

Config Size: Terraphim configs are ~10KB, not large

Concerns:

• Tree view rendering for deeply nested objects
• Undo/redo history memory
• Real-time validation performance

Solution:

• vanilla-jsoneditor handles this well
• CodeMirror also performant
• Not a major concern for our use case

Acceptance Criteria

• JSON editor library selected
• Integration approach documented
• Prototype Web Component
• Schema validation working
• Undo/redo functional
• Save to backend tested
• Tree and text modes (if using vanilla-jsoneditor)
• Performance acceptable
• Bundle size acceptable (<300KB)

References

• Current editor: desktop/src/lib/ConfigJsonEditor.svelte
• Config types: desktop/src/lib/generated/types.ts
• vanilla-jsoneditor: https://github.com/josdejong/svelte-jsoneditor

Documentation

Findings will be documented in: .docs/research-json-editor.md

Start with desktop/src/lib/ConfigJsonEditor.svelte and desktop/src/lib/generated/types.ts, then compare the listed editor options and integration approaches. Record the selected library and approach in .docs/research-json-editor.md, and prototype the Web Component with schema validation, undo/redo, backend save, and acceptable bundle and performance behavior covered by the acceptance criteria.