npm package: @karthiksripad/json-craft
Description: Interactive JSON editor with dual-pane interface and nested JSON support
Author: Karthik Sripad
Latest version: 1.0.0

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

```bash
npm install @karthiksripad/json-craft
```

### Peer Dependencies

Make sure you have React 17+ installed:

```bash
npm install react react-dom
```

## Quick Start

```tsx
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:

```tsx
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

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

### Custom Styling

```tsx
<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):

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

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

### Form Integration

```tsx
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

```tsx
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