@@ -13,17 +13,19 @@ A [React](https://github.com/facebook/react) component for editing or viewing JS
13
13
14
14
### Features include:
15
15
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!
27
29
28
30
<img width =" 392 " alt =" screenshot " src =" image/screenshot.png " >
29
31
@@ -81,23 +83,26 @@ A [React](https://github.com/facebook/react) component for editing or viewing JS
81
83
82
84
## Installation
83
85
84
- ` npm i json-edit-react `
86
+ ``` sh
87
+ # Depending on your package manager:
85
88
86
- or
87
-
88
- ` yarn add json-edit-react `
89
+ npm i json-edit-react
90
+ # OR
91
+ yarn add json-edit-react
92
+ ```
89
93
90
94
## Implementation
91
95
92
96
``` jsx
93
97
import { JsonEditor } from ' json-edit-react'
94
98
95
99
// In your React component:
96
- return
100
+ return (
97
101
< JsonEditor
98
102
data= { jsonData }
99
103
setData= { setJsonData } // optional
100
104
{ ... otherProps } / >
105
+ );
101
106
```
102
107
103
108
## Usage
0 commit comments