Once you save any file, the URL encodes your progress so it's easy to share!
Style Dictionary can output to lots of different formats, for example Web or iOS.
Below is a card component which is based on the tokens. Try changing the card tokens!
Note: if you're viewing this on small viewport below 740px, the frame below will be set to mobile.
For a full explanation, check out the blog we wrote about it.
We then use monaco-editor and some file-tree utilities to make the playground editor work with it.
The input files are encoded in the URL when you save files, making playground snippets easy to share with others!
Made for our Design System platform: Backlight.dev