JSON to CSS Variables
Instantly convert JSON objects into CSS custom properties (:root variables) — right inside VS Code.
✨ Features
- Live conversion — CSS output updates as you type, no buttons to click
- Sidebar & full editor — use the compact sidebar view or pop out into a full editor panel
- Nested JSON support — deeply nested objects are flattened into
--section-key variables
- Custom prefix — add a namespace prefix to all variables (e.g.
--app-color-primary)
- Separator choice — pick
- or _ as the separator between key segments
:root wrapping — toggle wrapping output in a :root { } block- Auto comments — group variables with CSS comments based on top-level JSON keys
- One-click copy — copy the generated CSS to your clipboard instantly
- Syntax highlighting — CSS output is color-coded to match your VS Code theme
- Sample data — click ✨ Sample to load a design-token example and see it in action
🚀 Getting Started
- Open the sidebar — click the JSON to CSS icon in the Activity Bar (left side)
- Paste your JSON into the input area
- See the CSS output update live in the panel below
- Copy the result with the 📄 Copy CSS button
Open as Full Editor
For more screen space, click the expand icon in the sidebar title bar, or run the command:
JSON to CSS Variables: Open in Full Editor
📖 Usage Example
{
"color": {
"primary": "#0066ff",
"primary-hover": "#0052cc",
"background": "#ffffff",
"text": "#212529"
},
"font": {
"family-sans": "'Inter', system-ui, sans-serif",
"size-base": "1rem",
"size-lg": "1.25rem"
},
"spacing": {
"sm": "8px",
"md": "16px",
"lg": "24px"
}
}
Output (CSS)
:root {
/* color */
--color-primary: #0066ff;
--color-primary-hover: #0052cc;
--color-background: #ffffff;
--color-text: [#212529](https://github.com/mortenhoffmanndoff/json-to-css/issues/212529);
/* font */
--font-family-sans: 'Inter', system-ui, sans-serif;
--font-size-base: 1rem;
--font-size-lg: 1.25rem;
/* spacing */
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
}
⚙️ Options
| Option |
Description |
Default |
| Prefix |
Prepend a namespace to all variable names (e.g. app) |
(empty) |
| Separator |
Character between key segments: - or _ |
- |
| :root |
Wrap output in a :root { } block |
✅ On |
| Comments |
Add CSS comments to group variables by top-level key |
✅ On |
🎯 Commands
| Command |
Description |
JSON to CSS Variables: Open Converter |
Open the converter sidebar |
JSON to CSS Variables: Open in Full Editor |
Open in a full editor panel |
Access via Ctrl+Shift+P / Cmd+Shift+P → type "JSON to CSS".
💡 Use Cases
- Design tokens → Convert your design system's JSON tokens into CSS variables
- Theme generation → Turn theme config files into ready-to-use CSS
- API responses → Quickly extract styling values from JSON config endpoints
- Tailwind/CSS migration → Convert JS-based theme configs to native CSS custom properties
📋 Requirements
📄 License
MIT © Morten Hoffmann
