Monaco JSON Editor

A JSON editor using the Monaco editor.

Provides a JSONEditor component wrapping the Monaco editor with sane defaults.

Installation and usage

With your preferred bundler:

npm install @open-formulieren/monaco-json-editor

// main.tsx
import {JSONEditor} from '@open-formulieren/monaco-json-editor';
// in your JS or CSS pipeline
import '@open-formulieren/monaco-json-editor/style.css';

const MyComponent: React.FC = () => {
  const [json, setJson] = useState({});
  return <JSONEditor value={json} onChange={setJson} readOnly={false} />;
};

Contributing

Contributions that do not provide a direct benefit to the Open Forms project will unfortunately be rejected, as we do not have the ambition nor resources to maintain these.

For (code) contributions that do fit the goals of this library, please follow these guidelines:

• Create an issue with a description of the problem or required feature
• Reference the issue ID in commit messages and pull requests
• Functionality must be documented in Storybook
• Functionality must be covered by tests - Jest (unit/integration) tests and/or Storybook interaction tests

Getting started

1. Clone the repository and then ensure you use the correct node version:

nvm use

2. Start Storybook in dev mode for component development:

npm start

3. Make code changes, check in Storybook, add tests... etc.

4. Check that the (Typescript) build compiles cleanly:

npm run build

Additional NPM scripts can be found in package.json.