Play with Style Dictionary

Once you save any file, the URL encodes your progress so it's easy to share!

Card Component example

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.

How it works

For a full explanation, check out the blog we wrote about it.

We use a browser patch of style-dictionary in combination with browserify and a shim for file-system (e.g. memfs or browserify-fs) to make the tool work in the browser.

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