Building a Visual JSON Editor - Part 2 of ?: Code View
October 21, 2020
We're working on a visual JSON editor that will make it easy to edit all sorts of JSON data. Because JSON is used by countless APIs, it contains all the different types of data APIs contain. While a neat JSON document like a package.json contains maybe a dozen or two nodes with each leaf node having no more than a couple hundred characters, JSON documents found in the wild can contain hundreds or thousands or tens of thousands of nodes, multiline strings, and binary data encoded as base64.
This post is about viewing and editing multiline strings, that can be found in a lot of different types of APIs including Content Management Systems (like WordPress or Ghost), Functions as a Service providers (like AWS Lambda, OpenFaas, or Vercel), Email Providers (like MailJet), and code repository hosts (like GitHub and GitLab).
vtv has a code view based on CodeMirror.
Code View
In JSON, strings can only appear in a single line. The \n escape sequence is used to store multiline strings.
This is practical for serialization, is inconvenient for working with strings in multiple lines. As JSON is used for more and more things, this limitation is becoming more noticeable, and alternatives like YAML are being used more often, and new formats are being developed.
To facilitate editing code, CodeMirror is used with react-codemirror2.
To integrate it with Next.js, the CSS files are added to pages/_app.tsx and a dynamic import is added to load CodeMirror only in the browser, because it depends on navigator which is not available on the server.
The previous post describes the state, which contains information for each node, such as whether it is expanded or not. This is also where it stores what format each node is, for syntax highlighting. The data is passed in as the value prop to the vtv React component, and these details are passed in as the "state" prop. Here is the data and state for a JSON object containing some HTML and CSS:
Here is the view with the above value and state:
As you can see, each code block is highlighted with its language. The language can be changed by selecting View from the menu that pops up when clicking on a node.
To get JSON in and out of it, click the parent node and select View > JSON, and copy and paste from the JSON code editor that appears.
Future Work
There are numerous things that can be improved:
- Server side rendering support: Instead of rendering a code editor, it could start by rendering a code viewer, and change into an editor when it's clicked. This would make it render faster and make it able to render on the server. There are syntax highlighters such as prism.js but they may differ from the
- Editor configuration: There are a lot of options for a code editor, including the type of syntax that is supported, and autocomplete.
- Support for different editors: Besides the current version of CodeMirror, there is the next version of CodeMirror, CodeMirror 6, which is in beta and has great mobile usability because it relies more on ContentEditable and less on custom JavaScript. There is also Monaco editor which is based on the editor in Visual Studio Code and has a lot of wonderful features for working with code.
- Performance: This will break on very large documents, or ones with very long lines. A paginator that stays out of the way normally but shows up in long documents would help, as would as a server-side storage mechanism that supports streaming.
This can be used to make API requests in the Resources.co console, and we've tested sending emails on SendGrid using the code view. To keep up with future developments, follow us on social media at one of the links in our footer.