@@ -13,17 +13,19 @@ A [React](https://github.com/facebook/react) component for editing or viewing JS
1313
1414### Features include:
1515
16- - Edit individual values, or whole objects as JSON text
17- - Fine-grained control over which elements can be edited, deleted, or added to
18- - Full [ JSON Schema] ( https://json-schema.org/ ) validation (using 3rd-party validation library)
19- - Customisable UI, through simple, pre-defined [ themes] ( #themes--styles ) , specific CSS overrides for UI components, or by targeting CSS classes
20- - Self-contained — rendered with plain HTML/CSS, so no dependence on external UI libraries
21- - Search/filter data by key, value or custom function
22- - Provide your own [ custom component] ( #custom-nodes ) to integrate specialised UI for certain data.
23- - [ localisable] ( #localisation ) UI
24- - [ Drag-n-drop] ( #drag-n-drop ) editing
25- - [ Keyboard customisation] ( #keyboard-customisation )
26- - [ External control] ( #external-control-1 ) via callbacks and triggers
16+ - ✅ ** Easy inline editing** of individual values or whole blocks of JSON text
17+ - 🔒 ** Granular control** – restrict edits, deletions, or additions per element
18+ - 📏 ** [ JSON Schema] ( https://json-schema.org/ ) validation** (using 3rd-party validation library)
19+ - 🎨 ** Customisable UI** — built-in or custom [ themes] ( #themes--styles ) , CSS overrides or targeted classes
20+ - 📦 ** Self-contained** — plain HTML/CSS, so no dependence on external UI libraries
21+ - 🔍 ** Search & filter** — find data by key, value or custom function
22+ - 🚧 ** [ Custom components] ( #custom-nodes ) ** — replace specific nodes with specialised components (e.g. date picker, links, images)
23+ - 🌏 ** [ Localisation] ( #localisation ) ** — easily translate UI labels and messages
24+ - 🔄 ** [ Drag-n-drop] ( #drag-n-drop ) ** re-ordering within objects/arrays
25+ - 🎹 ** [ Keyboard customisation] ( #keyboard-customisation ) ** — define your own key bindings
26+ - 🎮 ** [ External control] ( #external-control-1 ) ** via callbacks and triggers
27+
28+ 💡 Try the ** [ Live Demo] ( https://carlosnz.github.io/json-edit-react/ ) ** to see these features in action!
2729
2830<img width =" 392 " alt =" screenshot " src =" image/screenshot.png " >
2931
@@ -81,23 +83,26 @@ A [React](https://github.com/facebook/react) component for editing or viewing JS
8183
8284## Installation
8385
84- ` npm i json-edit-react `
86+ ``` sh
87+ # Depending on your package manager:
8588
86- or
87-
88- ` yarn add json-edit-react `
89+ npm i json-edit-react
90+ # OR
91+ yarn add json-edit-react
92+ ```
8993
9094## Implementation
9195
9296``` jsx
9397import { JsonEditor } from ' json-edit-react'
9498
9599// In your React component:
96- return
100+ return (
97101 < JsonEditor
98102 data= { jsonData }
99103 setData= { setJsonData } // optional
100104 { ... otherProps } / >
105+ );
101106```
102107
103108## Usage
0 commit comments