Build Status


An editor with two basic goals:

  1. Only allow valid code to be entered (no syntax errors)
  2. Common code transformations in just as many or less keystrokes, compared to other editors

For now, it's only a JSON editor.


In your commandline:

yarn add syntactor
npm install syntactor --save

In your code:

const Syntactor = require('syntactor');
Syntactor.render(document.querySelector('#container'), {
  initiallyShowKeymap: true,
  defaultValue: {answer: 42}

Or if you're using React (and ES2015):

import {Editor} from 'syntactor';

const SomeComponent = () => (
    <Editor initiallyShowKeymap defaultValue={{answer: 42}}/>


These can be either passed as React props or as the 2nd argument into the Syntactor.render function.

Name Type Default Value
initiallyShowKeymap boolean true
defaultValue JSON {}

Contributing/Running the demo page

First clone this repo, then:


And start it with

yarn start


A JSON editor for editing data instead of syntax.

Syntactor Info

⭐ Stars 28
🔗 Homepage
🔗 Source Code
🕒 Last Update a year ago
🕒 Created 5 years ago
🐞 Open Issues 4
➗ Star-Issue Ratio 7
😎 Author Gregoor