Experiments >

Code animation: JSON editor

Experiment #14018th April, 2021by Joshua Nussbaum

Before I start building out the timeline view for the code animation project, it would be handy to have a JSON editor. That would make it easier to debug different scenarios by editing the document in a JSON format or by copying and pasting in examples.


The JSON editor is just another use of codemirror, where the code is parsed and data bound in realtime.

The only hitch is that when the JSON changes, the file needs to get rebuilt, and sometimes there will be errors. So it needs to show those errors.

Also, I prefer to use json5 instead of the built-in JSON, as it’s a more leniant parser.


<!-- CodeEditor.svelte -->
  import JSON5 from 'json5'
  import CodeMirror from './CodeMirror.svelte'
  import { document } from '$lib/document'

  export let code

  let error

  $: {
    // parse JSON and capture errors
    try {
      $document = JSON5.parse(code)
      error = null
    } catch (e) {
      // capture error for display
      if (e.name == 'SyntaxError') {
        error = e
      } else {
        console.error('unknown error', e)

<div class="container">
  {#if error}
    <!-- display error message -->
    <div class="error">
      Syntax error: {error.message.substr(7)}

  <CodeMirror language="javascript" bind:code lineNumbers/>





  • Updating JSON settings, like height, width settings, update the controls immediately. Should it work in other direction too?
view all experiments

Stay tuned in

Learn how to add more experimentation to your workflow