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

1. Open the sidebar — click the JSON to CSS icon in the Activity Bar (left side)
2. Paste your JSON into the input area
3. See the CSS output update live in the panel below
4. 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

Input (JSON)

{
  "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

🎯 Commands

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

• VS Code 1.118.0 or newer

📄 License

MIT © Morten Hoffmann