@karthiksripad/json-craft

A modern, interactive JSON editor library built with React, TypeScript, and Tailwind CSS. Features dual-pane editing with real-time synchronization between text and visual tree editors, and advanced nested JSON support.

Features

Core Functionality

• Dual-Pane Interface: Split view with raw text editor (left) and visual tree editor (right)
• Real-time Synchronization: Changes in either pane instantly reflect in the other
• Resizable Panes: Adjust the split between editors with draggable handle
• Layout Options: Switch between horizontal and vertical layouts

Text Editor (Left Pane)

• JSON syntax highlighting
• Real-time validation with error reporting
• Auto-formatting with "Format" button
• Line and character count display
• Error highlighting with descriptive messages

Visual Tree Editor (Right Pane)

• Interactive tree structure display
• Expandable/collapsible nodes
• Data type indicators with color coding
• Inline editing of values
• Add/delete properties and array items
• Drag-and-drop reordering
• Breadcrumb navigation

Search & Navigation

• Search across keys and values
• Case-insensitive search
• Result highlighting with current result indicator
• Navigate between search results
• Auto-expand paths containing results

Import/Export

• Import JSON from file upload
• Export to JSON file
• Copy to clipboard
• Clear all data with confirmation

User Experience

• Dark/Light theme toggle with system preference support
• Keyboard navigation support
• Error prevention and validation
• Responsive design
• Modern UI with shadcn/ui components

Installation

npm install @karthiksripad/json-craft

Peer Dependencies

Make sure you have React 17+ installed:

npm install react react-dom

Quick Start

import { JsonEditor } from '@karthiksripad/json-craft';
import '@karthiksripad/json-craft/style.css';

function App() {
  const [jsonData, setJsonData] = useState(null);

  return (
    <div style={{ height: '500px' }}>
      <JsonEditor
        value={jsonData}
        onChange={(value, text) => {
          setJsonData(value);
          console.log('JSON changed:', { value, text });
        }}
      />
    </div>
  );
}

API Reference

JsonEditor Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string \| JsonValue | '' | Initial JSON value (string or parsed object) | | onChange | (value: JsonValue \| null, jsonText: string) => void | - | Called when JSON changes | | defaultLayout | 'horizontal' \| 'vertical' | 'horizontal' | Initial layout orientation | | showToolbar | boolean | true | Show/hide the toolbar | | allowImportExport | boolean | true | Enable import/export functionality | | readonly | boolean | false | Make the editor read-only | | className | string | '' | Additional CSS class | | style | React.CSSProperties | - | Inline styles | | placeholder | string | 'Enter JSON here...' | Placeholder text for empty editor |

Individual Components

You can also use individual components for more control:

import { JsonTextEditor, JsonTreeEditor } from '@karthiksripad/json-craft';
import '@karthiksripad/json-craft/style.css';

// Text editor only
<JsonTextEditor
  value={jsonString}
  onChange={setJsonString}
  isValid={isValid}
  readonly={false}
/>

// Tree editor only
<JsonTreeEditor
  data={jsonData}
  onChange={setJsonData}
  isValid={isValid}
  readonly={false}
/>

Advanced Usage Examples

Read-only Mode

<JsonEditor
  value={apiResponse}
  readonly={true}
  showToolbar={false}
  onChange={() => {}} // Won't be called in readonly mode
/>

Custom Styling

<JsonEditor
  value={data}
  onChange={handleChange}
  className="my-custom-editor"
  style={{
    height: '600px',
    border: '1px solid #ccc',
    borderRadius: '8px'
  }}
/>

Handling Nested JSON Strings

The editor automatically detects and parses nested JSON strings (common in API responses):

{
  "config": "{\"theme\":\"dark\",\"settings\":[1,2,3]}"
}

Click the eye icon next to JSON strings to expand and edit them inline.

Form Integration

import { useForm } from 'react-hook-form';

function ConfigForm() {
  const { setValue, watch } = useForm();
  const config = watch('config');

  return (
    <div>
      <label>API Configuration:</label>
      <JsonEditor
        value={config}
        onChange={(value) => setValue('config', value)}
        placeholder="Enter your API configuration..."
      />
    </div>
  );
}

TypeScript Types

import type {
  JsonValue,
  JsonObject,
  JsonArray,
  JsonEditorProps
} from '@karthiksripad/json-craft';

const data: JsonObject = {
  name: "John",
  scores: [1, 2, 3] as JsonArray
};

Technology Stack

• React 19 - UI framework
• TypeScript - Type safety
• Vite - Build tool and dev server
• Tailwind CSS - Styling
• shadcn/ui - Component library
• Lucide React - Icons
• react-resizable-panels - Resizable layout

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run npm run build to ensure no errors
5. Submit a pull request

License

MIT License - see LICENSE file for details