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

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

Setup

Import the component and use it in your React application:

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:

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

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

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:

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

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

Advanced usage with custom configuration:

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

npm install
npm run dev

Contributing

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