Play with Style Dictionary

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

Made for our Design System platform: Backlight.dev. Read the integration docs.

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.

Features

Third party integration

You can load this app in an iframe with a project ID in the URL and then use postMessage to request all kinds of useful data from the style-dictionary-play instance, which the app will then send back with postMessage. Use '*' for origin.

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!