Build a live editor for your design system

Using a design system is a work for UI engineers, not for OS specialists or SRE teams.
Tools should exist to create interfaces without having to install anything.
Web editors should be helpful : they should provide suggestions as you type, and report mistakes, problems or errors.
You should be able to test your work immediately, like in a read-eval-print-loop (REPL),
you should not need to get started by waiting to download libraries for 10 minutes.

Such web editors already exist, they are quite easy to find : https://vscode.dev, or https://github.dev offer live code edition in the browser, no need to setup anything on your computer.

But it would be even smarter if you could integrate an editor with your own environment.
Users would get the editor and the implementations provided in the same page, and would not need any prerequisite before starting to write their user interface.

I have tried to combine react-live and monaco-editor (from vscode) together to get an editor that can compile and render your javascript/typescript application, inside a next.js application
You can find the source code at :
https://gist.github.com/libetl/46a1c4913439473aa072b283414b75a6
You will need to create a typings file for your project to get the intelliSense system working.
This is what you will get :

Hovering an element will display some contextual information
You will also be noticed in case of compilation errors, with real compilation errors coming from the typescript compiler, run from your browser :
Come on, let’s give it a try in your company : use the gist and unleash some interactions between your design system team and your other teams.
Investing time in tools will ease many workstreams in your company.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.