{"id":49096,"library":"react-schema-based-json-editor","title":"react-schema-based-json-editor","description":"A React component for editing JSON objects based on a JSON schema. This package provides a form-like UI that dynamically generates input fields from a schema definition, allowing users to edit JSON data without writing raw JSON. Version 8.3.0 is the latest stable release, with active development and updates. Key differentiators include support for nested schemas, custom validation, and integration with popular form libraries. It ships TypeScript types and works in modern browsers and Node.js.","status":"active","version":"8.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/plantain-00/schema-based-json-editor","tags":["javascript","json","schema","react","typescript"],"install":[{"cmd":"npm install react-schema-based-json-editor","lang":"bash","label":"npm"},{"cmd":"yarn add react-schema-based-json-editor","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-schema-based-json-editor","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"React peer dependency for rendering the editor component","package":"react","optional":false},{"reason":"Core editor logic and utilities","package":"schema-based-json-editor","optional":false}],"imports":[{"note":"Default export is not available; use named import.","wrong":"import ReactSchemaBasedJsonEditor from 'react-schema-based-json-editor'","symbol":"ReactSchemaBasedJsonEditor","correct":"import { ReactSchemaBasedJsonEditor } from 'react-schema-based-json-editor'"},{"note":"Type definitions are re-exported from this package.","wrong":"import { SchemaBasedJsonEditorProps } from 'schema-based-json-editor'","symbol":"SchemaBasedJsonEditorProps","correct":"import { SchemaBasedJsonEditorProps } from 'react-schema-based-json-editor'"},{"note":"Enum for editor modes like 'text', 'tree', etc.","symbol":"EJSONEditorMode","correct":"import { EJSONEditorMode } from 'react-schema-based-json-editor'"}],"quickstart":{"code":"import React from 'react';\nimport { ReactSchemaBasedJsonEditor } from 'react-schema-based-json-editor';\n\nconst schema = {\n  type: 'object',\n  properties: {\n    name: { type: 'string', title: 'Name' },\n    age: { type: 'number', title: 'Age' },\n  },\n};\n\nconst App = () => {\n  const [value, setValue] = React.useState({ name: 'John', age: 30 });\n  return (\n    <ReactSchemaBasedJsonEditor\n      schema={schema}\n      value={value}\n      onChange={setValue}\n      editorMode=\"tree\"\n    />\n  );\n};\n\nexport default App;","lang":"typescript","description":"Example of using ReactSchemaBasedJsonEditor to edit a simple object schema."},"warnings":[{"fix":"Use editorMode={EJSONEditorMode.Tree} or editorMode='tree' for string.","message":"Version 8.0.0 removed the 'mode' prop in favor of 'editorMode' enum. Old code using mode='tree' will break.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Initialize state with an empty object or default values matching schema.","message":"The component expects a controlled value; if undefined, it may crash. Always provide initial value.","severity":"gotcha","affected_versions":"all"},{"fix":"Replace 'options' with 'uiSchema' following the new format.","message":"The 'options' prop for customizing UI is deprecated since v7.5. Use 'uiSchema' instead.","severity":"deprecated","affected_versions":">=7.5.0"}],"env_vars":null,"search_vec":"'8.3.0':47 'activ':54 'allow':36 'base':4,14 'browser':81 'compon':9 'custom':65 'data':41 'definit':35 'develop':55 'differenti':59 'dynam':28 'edit':11,39 'editor':6 'field':31 'form':24,71 'form-lik':23 'generat':29 'includ':60 'input':30 'integr':68 'javascript':84 'json':5,12,17,40,45,85 'key':58 'latest':50 'librari':72 'like':25 'modern':80 'nest':63 'node.js':83 'object':13 'packag':20 'popular':70 'provid':21 'raw':44 'react':2,8,87 'react-schema-based-json-editor':1 'releas':52 'schema':3,18,34,64,86 'ship':74 'stabl':51 'support':61 'type':76 'typescript':75,88 'ui':26 'updat':57 'user':37 'valid':66 'version':46 'without':42 'work':78 'write':43","created_at":"2026-06-07T17:00:02.091117+00:00","updated_at":"2026-06-07T17:00:02.091117+00:00","problems":[{"fix":"Ensure schema is correctly defined and passed as an object with type and properties.","cause":"Missing or invalid schema prop","error":"TypeError: Cannot read property 'properties' of undefined"},{"fix":"Run 'npm install react-schema-based-json-editor react'","cause":"Package not installed or peer dependencies missing","error":"Module not found: Can't resolve 'react-schema-based-json-editor'"},{"fix":"Use EJSONEditorMode enum or upgrade to v8+. Or pass as string if v8+ supports it.","cause":"Using string value for editorMode in older version that required enum","error":"Warning: React does not recognize the `editorMode` prop on a DOM element"}],"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/plantain-00/schema-based-json-editor#readme","github":"https://github.com/plantain-00/schema-based-json-editor","docs":null,"changelog":null,"pypi":null,"npm":"react-schema-based-json-editor","openapi_spec":null,"status_page":null,"smithery":null,"categories":["productivity"],"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}}