JSON editor¶

Classification¶

Difficulty: Medium or High, depending on experience
Skills needed: HTML, CSS, TypeScript, JavaScript, Svelte, UX design
Length: Medium (~175 hours) or Long (~350 hours), depending on experience

The Mathesar UI allows users to configure the column types for their data, choosing between types like “Number”, “Date”, “Text”, and so on. All data entered into the column is then validated against the rules according to the type. So for example, in a Number column, Mathesar will allow input of 2 but will reject input of hello.
Mathesar currently has partial support for two new types:
- JSON Object columns, which should allow user input such as:
```
{
  "foo": "bar",
  "baz": { "bat": [ 1, 2, 3] }
}
```
- JSON Array columns, which should allow user input such as:
```
[
  { "foo": "bar", "baz": 0 },
  { "bat": null }
]
```
The goal with these types is to allow users to enter JSON data into Mathesar.
The backend and API work is already complete for these two types. The front end work has begun but needs to be finished. The front end currently allows users to convert Text columns to JSON Object and JSON Array. And the front end is able to displays JSON values already stored in the database. But…
The UI does not yet allow users to input JSON values into table cells. There are also some other contexts which require user-entry of JSON values. We need a dedicated JSON editor for the user to input JSON.

The JSON editor should meet all the following requirements:

It should provide syntax highlighting, and be compatible with dark mode too.
It should give users feedback on when their entry is not valid JSON.
It should give users feedback on when their entry is valid JSON but is not valid for the column type. For example, the JSON Object column should not accept a JSON Array, and neither of our JSON column types should accept JSON values like 1.
It should display server errors
It should load all its resources (e.g. JavaScript, static assets) asynchronously so that the initial page load is not degraded after adding this feature.
It should provide a graceful experience for the user while loading.
It should be easy to use.
Its 3rd party libraries should be compatible with Mathesar’s license (GPLv3).

Research available 3rd party libraries for accepting JSON input and present your findings to the Mathesar front end team for consideration. Then select the 3rd party library, in collaboration with the front end team.
Write a UX design document describing the manner in which the JSON editor will be incorporated into Mathesar’s UI. Then work with the front end team and product designer to solidify the UX design.
Get the JSON editor to load an empty document asynchronously within the desired UI location.
Get the JSON editor to load and display the cell contents, as fetched from the API.
Get the JSON editor to save cell values via the API.
Handle client-side error validation for cases where the input is valid JSON but invalid for the column type.
Handle server-side errors after saving

Users can easily enter JSON data into cells within JSON Object and JSON Array columns.

Demonstrate proficiency with the required skills.
Present some preliminary research into 3rd party JSON editors.
Share some of your initial ideas about how best to integrate the JSON editor into the existing Mathesar UI.

These are some features we may consider adding in the future, but which are out of scope for this project

More complex per-column validation of the JSON schema, beyond it being an object or array
More ways to filter on JSON columns