Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>svelte-jsoneditor demo</title>
    <style>
      #jsoneditor {
        width: 500px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <p>
      <button id="update1">update via updateProps()</button>
      <button id="update2">update via update()</button>
      <button id="update3">update via set()</button>
    </p>
    <div id="jsoneditor"></div>
​
    <script type="module">
      import { JSONEditor } from 'https://cdn.jsdelivr.net/npm/vanilla-jsoneditor/index.js'
​
      let content = {
        text: undefined,
        json: {
          greeting: 'Hello World'
        }
      }
​
      const editor = new JSONEditor({
        target: document.getElementById('jsoneditor'),
        props: {
          content,
          onChange: (updatedContent) => {
            console.log('onChange', updatedContent)
            content = updatedContent
          }
        }
      })
      
      document.getElementById('update1').addEventListener('click', () => {
        editor.updateProps({
          content: {
            json: {
              greeting: 'Hello World',
              randomValue: Math.random()
            }
          }
        })
      })
      
      document.getElementById('update2').addEventListener('click', () => {
        editor.update({
          json: {
            greeting: 'Hello World',
            randomValue: Math.random()
          }
        })
      })
      
      document.getElementById('update3').addEventListener('click', () => {
        // content.json.randomValue = Math.random()
        // editor.set(content)
        
        editor.set({
          json: {
            greeting: 'Hello World',
            randomValue: Math.random()
          }
        })
      })
      
    </script>
  </body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
josdejongpro
0viewers