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:

Make sure you have Tailwind CSS installed in your project:

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

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.

Package detail