Registry / devops / jsonjoy-builder

jsonjoy-builder

library1.0.3jsnpmunverified

JSONJoy Builder is a React component library for visually editing JSON Schema definitions. Version 1.0.3 is the current stable release. It provides a visual schema editor, a Monaco-based JSON source editor, schema inference from example JSON, and JSON validation. The library is fully typed (TypeScript), requires React 19+ and monaco-editor 0.25+, and is designed for easy integration into existing apps. Key differentiators: controlled component pattern, multiple component options (SchemaBuilder, SchemaFieldsEditor, SchemaJsonEditor), and schema inference from sample data.

devops

npm install jsonjoy-builder

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · JSONJOY-BUILDER

jsonjoy-builder

devopsjavascriptv1.0.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

SchemaBuilder

✓ import { SchemaBuilder } from 'jsonjoy-builder'

✗ import SchemaBuilder from 'jsonjoy-builder'

Named export, not default. Ensure styles are imported separately.

SchemaFieldsEditor

✓ import { SchemaFieldsEditor } from 'jsonjoy-builder'

✗ import SchemaFieldsEditor from 'jsonjoy-builder'

Named export. Use when you only need the visual editor without the JSON panel.

SchemaJsonEditor

✓ import { SchemaJsonEditor } from 'jsonjoy-builder'

✗ import SchemaJsonEditor from 'jsonjoy-builder'

Named export. Requires monaco-editor to be installed.

InferSchemaDialog

✓ import { InferSchemaDialog } from 'jsonjoy-builder'

✗ import InferSchemaDialog from 'jsonjoy-builder'

Named export. Use with a state-controlled open prop.

JsonSchema

✓ import { type JsonSchema } from 'jsonjoy-builder'

TypeScript type export. Not available at runtime.

Basic usage of SchemaBuilder with controlled state. Shows how to import styles, component, and type, and manage the schema value.

import 'jsonjoy-builder/styles.css'; import { SchemaBuilder, type JsonSchema } from 'jsonjoy-builder'; import { useState } from 'react'; export function App() { const [schema, setSchema] = useState<JsonSchema>({ type: 'object', properties: {} }); return ( <SchemaBuilder value={schema} onChange={setSchema} readOnly={false} /> ); } export default App;

Debug

Known issues

gotchaStyles must be explicitly imported: import 'jsonjoy-builder/styles.css'. Without this, components render without styling.

fix

Add the CSS import to your app entry point.

affects: >=1.0.0

gotchaReact 19 or later required. Using a lower React version will cause runtime errors.

fix

Upgrade react and react-dom to >=19.0.0.

affects: >=1.0.0

deprecateddefaultValue is supported only for initial render. For controlled usage always use value and onChange.

fix

Use value+onChange pair instead of defaultValue.

affects: >=1.0.0

gotchamonaco-editor must be installed separately (peer dependency). Missing it causes SchemaJsonEditor and full SchemaBuilder to fail silently.

fix

Install monaco-editor: npm install monaco-editor

affects: >=1.0.0

breakingThe library is ESM-only. This may require adjustments for CJS projects or older bundlers.

fix

Use a bundler that supports ESM (e.g., Vite, Webpack 5, Next.js 12+).

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'monaco-editor'

Missing peer dependency monaco-editor.

fix

npm install monaco-editor

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons...

Using an older version of React (<19) that doesn't support hooks used by the library.

fix

Upgrade to React 19: npm install react@19 react-dom@19

TypeError: Cannot destructure property 'type' of '...' as it is undefined.

Rendering component without providing a value prop or with an invalid initial schema.

fix

Pass a valid JSON Schema object as the value prop, e.g., { type: 'object' }.

Warning: Received `true` for a non-boolean attribute `readOnly`.

Passing readOnly as a string or missing prop entirely.

fix

Set readOnly as a boolean: readOnly={false} or readOnly={true}.

Upgrade

Version history

1.0.3latest on npm

Audit

Dependencies

monaco-editorrequiredRequired peer dependency for the JSON source editor component

reactrequiredRequired peer dependency for React components

react-domrequiredRequired peer dependency for React DOM rendering

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/lovasoa/jsonjoy-builder ↗

packagejsonjoy-builder ↗

homepagehttps://github.com/lovasoa/jsonjoy-builder#readme ↗