Skip to content

Commit 5e15526

Browse files
committed
Update README.md
1 parent 073278e commit 5e15526

File tree

1 file changed

+21
-16
lines changed

1 file changed

+21
-16
lines changed

README.md

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -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
9397
import { 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

Comments
 (0)