json-schema-canvas/README.md

A React component for visually building and editing JSON Schema definitions with a modern UI

# JSON Schema Canvas

A React component for visually building and editing JSON Schema definitions with a modern UI.

## Features

- 🎨 Modern, intuitive UI built with Radix UI
- 🔄 Drag-and-drop property reordering
- 📝 Live schema preview
- ✨ Strict/Non-strict mode support
- 🎯 Enum value management
- 📋 One-click schema copying

## Installation

```bash
npm install json-schema-canvas
# or
yarn add json-schema-canvas
```

## Setup

Import the component and use it in your React application:

```js
import { SchemaBuilder } from 'json-schema-canvas';
```

### Tailwind CSS Setup

This component uses Tailwind CSS for styling. To ensure all styles are properly applied when using the component in your project, you need to configure your Tailwind setup:

1. Make sure you have Tailwind CSS installed in your project:

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

2. Update your `tailwind.config.js` to include the component's styles:

```js
import { tailwindContent } from 'json-schema-canvas';

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    ...tailwindContent() // Add this line to include the component's styles
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

This ensures that all the Tailwind classes used by the component are included in your final CSS bundle.

## Usage

Basic usage with default settings:

```tsx
import { SchemaBuilder } from 'json-schema-canvas'

function App() {
  return (
    <SchemaBuilder />
  )
}
```

Advanced usage with custom configuration:

```tsx
const schemaState = useSchemaState(
    {
      properties: [
        {
          name: "name",
          type: "string",
          required: true,
          hasEnum: false
        }
      ],
      additionalProperties: false
    },
    true
  )
  
return (
  <SchemaBuilder 
    initialSchema={schemaState.schema}
    initialStrictMode={schemaState.isStrictMode}
    onSchemaChange={(schema) => console.log('Schema updated:', schema)}
  />
)
```

## Props

### SchemaBuilder Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| initialSchema | object | `{}` | Initial JSON Schema object to edit |
| initialStrictMode | boolean | true | Initial strict mode state |
| className | string | "flex min-h-screen bg-background p-6 gap-6 animate-fade-in" | Container class name |
| cardClassName | string | "flex-1 p-6 backdrop-blur-sm bg-opacity-50 min-w-[600px]" | Card class name |
| maxHeight | string | undefined | Maximum height of the schema editor |
| showOutput | boolean | true | Whether to show the schema output panel |
| onSchemaChange | (schema: object) => void | undefined | Callback when schema changes |
| onStrictModeChange | (isStrict: boolean) => void | undefined | Callback when strict mode changes |

### useSchemaState Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| initialSchema | object | `{ properties: [], additionalProperties: false }` | Initial schema state |
| initialStrictMode | boolean | true | Initial strict mode state |

## Development

```bash
npm install
npm run dev
```

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.