Package Exports

@karthiksripad/json-craft

Readme

@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 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

Fork the repository
Create a feature branch
Make your changes
Run npm run build to ensure no errors
Submit a pull request

License

MIT License - see LICENSE file for details

JSPM