Introducing The Design Tokens $extensions Checker
If you work with design tokens, you might find yourself needing to add an $extensions object for some specific use case. Then, down the line, other tools that consume your design tokens data might add their own extensions too. Before you know it, you're scrolling through nested metadata trying to figure out what extensions you actually have, who's using them, and whether you can clean anything up.
That's what I built the Design Tokens $extensions Checker. A quick way to see exactly what extensions are hiding in your design tokens.
What it does
Paste your design tokens data into the text area and it will extract every $extensions object it can find.
You should get:
- A full list of all extensions so you can see every namespace, property, and piece of metadata at a glance.
- Clear visualisation with extensions grouped logically so you can spot patterns or duplicates.
- Easy cleanup options that let you delete extensions individually or in bulk once you understand what you have.
- A preview of your modified tokens showing the cleaned-up JSON ready to copy back into your workflow.
Why this matters
Here's the thing: $extensions is supposed to stay out of your way until you actually need it. But when you do need it — when you're auditing your token structure, migrating systems, or just trying to understand what metadata you're carrying around — it helps to see it all in one place.
Maybe there will be some PenPot data layered on top of Style Dictionary config information layered on top of team governance metadata. The JSON is valid and everything works, but visualizing it separately from the token values themselves makes it way easier to reason about.
How to use it
- Grab your design tokens JSON file and paste it into the text area.
- Hit the Parse button to extract all extensions and display them.
- Review what extensions you have, then delete ones you don't need individually or delete all of them at once.
- Copy your cleaned-up tokens back, ready to use in your workflow.
I created a sample tokens file so you can see what the output looks like without digging through your own files first.
When it's useful
This tool can be really useful if you're auditing what extensions you're actually using, migrating between different metadata systems, cleaning up bloated token files, or just curious what's hiding in your extensions.
Like Relicss, it runs entirely in your browser. Nothing gets sent anywhere. Your design tokens stay on your machine.
If you want to learn more about what $extensions can do and why they exist, check out Understanding $extensions in the W3C Design Tokens Spec.
