Style Dictionary Play

What it does

- Experiment with style-dictionary in your browser - Live preview window - Mobile - Desktop view - Share URL to share project - Open source - No signup / No login 👉 https://www.style-dictionary-play.dev

Amazon

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 . 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. 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. For a full explanation, check out…from style-dictionary-play.dev

• 
  A directory of single-page sites and useful apps2012 · thetoolbox.cc · ▲164

  Explore a curated collection of the best free time-saving online tools, widgets & web utilities for developers, designers, and creators.

• 
  Player.style2024 · player.style · ▲321

  Video & audio player themes for every web player & framework

• 
  The Pattern Library2014 · thepatternlibrary.com · ▲307

  Free to use patterns by awesome designers

• 
  FrontendSource2020 · frontendsource.com · ▲124

  Curated dev & designer resources updated weekly

• 
  Design Base2021 · designbase.vercel.app · ▲81

  Curated design resources for developers

• 
  Style Dictionary2021 · amzn.github.io · ▲2

  style dictionary, tokens generator

• 
  /dev/null▲482

  a social network for devs

  Dev tools · 2d ago · dev-null.sh

• 
  Whiteboard (YC W26) – an open-source IDE for thoughtful software design▲423

  open-source IDE for thoughtful software design. Contribute to devdotfast/whiteboard development by creating an account on GitHub.

  Dev tools · 27d ago · github.com

• 
  Reladraw – A diagram language where you decide where to place things▲411

  Contribute to reladraw/reladraw development by creating an account on GitHub.

  Dev tools · 25d ago · github.com

• 
  OpenBot▲362

  Grok Bot alternative: free, local, open-source, multiplayer

  Dev tools · 22d ago · openbot.run

• 
  Talanoa▲343

  Hi HN, I’m a fullstack developer, and honestly, I’ve lost count of how many side projects I’ve worked on over the years. But one idea kept coming back to me: a different kind of email client. It first came to me in 2014: “What if we could handle emails more like conversations?” Every year, I’d revisit this concept in my “Build Notes.” Ten years later, no one had built exactly what I had in mind — so I finally decided to do it myself. That’s how Talanoa was born. I wanted something focused on people, not timelines. I was tired of marking messages as unread just to remember to reply later, or…

  Dev tools · 20d ago · talanoa.email

• 
  CoreSpeed▲332

  One MCP for everything your agents need: apps, memory, tools

  Dev tools · 28d ago · corespeed.io

• 
  Magic Sidebar by BlackMagic.so▲1,084

  Powerful enhanced experience for Twitter

  Life & fun · 2021 · blackmagic.so

• 
  I made a modern web UI for Wikipedia▲979

  A beautiful, clean, modern web UI for Wikipedia. Enhance your Wikipedia experience with a redesigned look, new features and customization.

  Life & fun · 2021 · modernwiki.app

• 
  thirdweb▲897

  Build web3 apps and games, easily

  Dev tools · 2021 · thirdweb.com

• 
  Emoji to Scale▲713

  Your favorite emojis. To scale (more or less).

  Life & fun · 2021 · javier.xyz

• 
  Alfread▲641

  Actually read articles saved for later

  Work · 2021

• 
  BitsForDigits▲624

  A partial buyout marketplace free for bootstrapped founders

  Commerce · 2021 · flippa.com