This demo project showcases a type-safe templating system for React applications that is configurable via JSON.
The configuration is defined by JSON schemas, declared alongside the template React components.
Types are extracted directly from these schemas to ensure 100% type safety.
The configuration is editable inside the React app via a form and a JSON editor page.
The form is autogenerated from the JSON schema.
The JSON editor is Monaco, the VSC backend, and offers IntelliSense and validation backed by the JSON schema.
The project can be found here.
You can launch the project in StackBlitz to try out editing the code in an editor, and the config inside the webapp.
If you want to know more about the behind-the-scene, check my blog post here.
Some screenshots:
Configurable dashboard PoC displaying dynamic components.
Code snippet demonstrating the declaration of a component and its JSON-schema based configuration.
In-browser app configuration via JSON editor, featuring IntelliSense support provided by the JSON schema, and a Diff view for comparing configurations.
In-browser app configuration via forms, automatically generated from the JSON schema for easy configuration adjustments.
Top comments (0)