JSON Online Beautifier & Editor

Option 1: Vanilla JS (simplest) Web

Include one script, then use any of three declarative or programmatic styles.

<!-- A: <json> tag, auto-rendered, multiple instances -->
<json data-title="Config">{"name": "Jakey", "tags": ["admin"]}</json>

<!-- B: any element with tag="json" -->
<div tag="json" data-theme="dark">{"a": 1}</div>

<!-- C: container + JS call -->
<div id="editor"></div>
<script src="json-editor.js"></script>
<script>
  var editor = JED.create({
    el: '#editor',
    title: 'My Editor',
    theme: 'dark',
    max_height: '50vh',
    value: { hello: 'world' },
    onChange: function (json) { console.log(json); }
  });
</script>

Option 2: Vue 3 Vue

Include json-vue.js (engine included), register the global component, use v-model.

<script src="https://unpkg.com/vue@3"></script>
<script src="json-vue.js"></script>

<div id="app">
  <json-editor v-model="config" theme="dark" />
</div>
<script>
  Vue.createApp({ data: () => ({ config: { a: 1 } }) })
     .use(JED.vue)      // registers the global <json-editor> component
     .mount('#app');
</script>

Option 3: React 18 React

Include json-react.js (engine included), no JSX needed — plain createElement.

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="json-react.js"></script>

<div id="root"></div>
<script>
  const e = React.createElement;
  function App() {
    const [data, setData] = React.useState({ a: 1 });
    return e(JED.react.component, { value: data, onChange: setData });
  }
  ReactDOM.createRoot(document.getElementById('root')).render(e(App));
</script>

npm install

npm install @juicy696/jsoneditor

// import as needed in your project:
import '@juicy696/jsoneditor'         // vanilla
import '@juicy696/jsoneditor/vue'     // Vue 3
import '@juicy696/jsoneditor/react'   // React 18