{"id":48312,"library":"jsonjoy-builder","title":"JSONJoy Builder","description":"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.","status":"active","version":"1.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/lovasoa/jsonjoy-builder","tags":["javascript","json","schema","editor","visual","react","typescript"],"install":[{"cmd":"npm install jsonjoy-builder","lang":"bash","label":"npm"},{"cmd":"yarn add jsonjoy-builder","lang":"bash","label":"yarn"},{"cmd":"pnpm add jsonjoy-builder","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for the JSON source editor component","package":"monaco-editor","optional":false},{"reason":"Required peer dependency for React components","package":"react","optional":false},{"reason":"Required peer dependency for React DOM rendering","package":"react-dom","optional":false}],"imports":[{"note":"Named export, not default. Ensure styles are imported separately.","wrong":"import SchemaBuilder from 'jsonjoy-builder'","symbol":"SchemaBuilder","correct":"import { SchemaBuilder } from 'jsonjoy-builder'"},{"note":"Named export. Use when you only need the visual editor without the JSON panel.","wrong":"import SchemaFieldsEditor from 'jsonjoy-builder'","symbol":"SchemaFieldsEditor","correct":"import { SchemaFieldsEditor } from 'jsonjoy-builder'"},{"note":"Named export. Requires monaco-editor to be installed.","wrong":"import SchemaJsonEditor from 'jsonjoy-builder'","symbol":"SchemaJsonEditor","correct":"import { SchemaJsonEditor } from 'jsonjoy-builder'"},{"note":"Named export. Use with a state-controlled open prop.","wrong":"import InferSchemaDialog from 'jsonjoy-builder'","symbol":"InferSchemaDialog","correct":"import { InferSchemaDialog } from 'jsonjoy-builder'"},{"note":"TypeScript type export. Not available at runtime.","symbol":"JsonSchema","correct":"import { type JsonSchema } from 'jsonjoy-builder'"}],"quickstart":{"code":"import 'jsonjoy-builder/styles.css';\nimport { SchemaBuilder, type JsonSchema } from 'jsonjoy-builder';\nimport { useState } from 'react';\n\nexport function App() {\n  const [schema, setSchema] = useState<JsonSchema>({ type: 'object', properties: {} });\n\n  return (\n    <SchemaBuilder\n      value={schema}\n      onChange={setSchema}\n      readOnly={false}\n    />\n  );\n}\n\nexport default App;","lang":"typescript","description":"Basic usage of SchemaBuilder with controlled state. Shows how to import styles, component, and type, and manage the schema value."},"warnings":[{"fix":"Add the CSS import to your app entry point.","message":"Styles must be explicitly imported: import 'jsonjoy-builder/styles.css'. Without this, components render without styling.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade react and react-dom to >=19.0.0.","message":"React 19 or later required. Using a lower React version will cause runtime errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use value+onChange pair instead of defaultValue.","message":"defaultValue is supported only for initial render. For controlled usage always use value and onChange.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Install monaco-editor: npm install monaco-editor","message":"monaco-editor must be installed separately (peer dependency). Missing it causes SchemaJsonEditor and full SchemaBuilder to fail silently.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use a bundler that supports ESM (e.g., Vite, Webpack 5, Next.js 12+).","message":"The library is ESM-only. This may require adjustments for CJS projects or older bundlers.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'0.25':57 '1.0.3':17 '19':52 'app':66 'base':32 'builder':2,4 'compon':8,70,73 'control':69 'current':20 'data':83 'definit':15 'design':60 'differenti':68 'easi':62 'edit':12 'editor':28,35,56,87 'exampl':39 'exist':65 'fulli':47 'infer':37,80 'integr':63 'javascript':84 'json':13,33,40,42,85 'jsonjoy':1,3 'key':67 'librari':9,45 'monaco':31,55 'monaco-bas':30 'monaco-editor':54 'multipl':72 'option':74 'pattern':71 'provid':24 'react':7,51,89 'releas':22 'requir':50 'sampl':82 'schema':14,27,36,79,86 'schemabuild':75 'schemafieldseditor':76 'schemajsoneditor':77 'sourc':34 'stabl':21 'type':48 'typescript':49,90 'valid':43 'version':16 'visual':11,26,88","created_at":"2026-06-07T16:56:00.096313+00:00","updated_at":"2026-06-07T16:56:00.096313+00:00","problems":[{"fix":"npm install monaco-editor","cause":"Missing peer dependency monaco-editor.","error":"Module not found: Can't resolve 'monaco-editor'"},{"fix":"Upgrade to React 19: npm install react@19 react-dom@19","cause":"Using an older version of React (<19) that doesn't support hooks used by the library.","error":"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..."},{"fix":"Pass a valid JSON Schema object as the value prop, e.g., { type: 'object' }.","cause":"Rendering component without providing a value prop or with an invalid initial schema.","error":"TypeError: Cannot destructure property 'type' of '...' as it is undefined."},{"fix":"Set readOnly as a boolean: readOnly={false} or readOnly={true}.","cause":"Passing readOnly as a string or missing prop entirely.","error":"Warning: Received `true` for a non-boolean attribute `readOnly`."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/lovasoa/jsonjoy-builder#readme","github":"https://github.com/lovasoa/jsonjoy-builder","docs":null,"changelog":null,"pypi":null,"npm":"jsonjoy-builder","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}