CSS to JSON

Convert CSS selectors and properties into structured JSON

Data Architect

JSON Representation

Turn a stylesheet into structured data

Sometimes CSS needs to live inside JavaScript or a config file: a theme object for a component library, design tokens, a set of inline style presets for an email template or a fixture for tests. This converter reads your rules and outputs a JSON object in which every selector becomes a key and its declarations become name and value pairs.

Converting your CSS

Paste your rules into the CSS Source box. There is also a Load Example button that inserts a starter snippet.
Click Convert to JSON Object.
The JSON Representation card shows the result, indented with four spaces.
Use Copy JSON to place it on the clipboard or Download to save a file named styles.json.

Editing the source hides the previous result. If the text cannot be interpreted, an alert asks you to check your CSS syntax.

What the output looks like

Given a rule such as .card with padding and border-radius declarations, you get a key named .card whose value is an object holding padding and border-radius entries, all as strings. Property names stay in the same hyphenated form as the CSS, so border-radius remains border-radius rather than borderRadius. Values are trimmed of surrounding spaces but otherwise unchanged, including units and colours.

Where it is helpful

Feeding style definitions into a JavaScript or React component as an object.
Extracting design tokens from an existing stylesheet.
Storing theme presets in a database or JSON config.
Comparing two sets of rules programmatically by diffing their JSON.

Know these limits first

The converter is intentionally basic. It splits your text at each closing brace and each semicolon, so it is best suited to flat rules made of plain selectors and simple declarations. Several situations are not handled well:

Nested at-rules such as @media or @keyframes are skipped, because they contain braces inside braces.
A declaration whose value includes a colon, for example a url() with http:// in it, is dropped, since the tool expects exactly one colon per line.
Repeating the same selector overwrites the earlier entry instead of merging, and repeating a property inside one rule keeps the last value.
Comments are not stripped, so remove them from your source first.

Convert one media query at a time by pasting its inner rules separately, and camel-case the property names afterwards if your framework wants them. Always scan the output to confirm that nothing was silently omitted. The conversion is done in your browser with JavaScript.

Related Tools

Frequently Asked Questions

How are selectors and properties represented?

Each selector becomes a top-level key and its declarations become an object of property names and string values. Property names keep their CSS hyphenated form, such as background-color, not camelCase.

Why is my @media block missing from the JSON?

The converter only handles flat rules. Blocks with braces inside braces, like @media and @keyframes, are skipped. Paste the rules from inside the media query on their own to convert them.

Why are some declarations missing?

A declaration is only kept if it has a single colon. Values containing an extra colon, such as a url() that starts with https://, are dropped. Check the output for anything absent.

What happens when a selector appears twice?

The later occurrence replaces the earlier one under the same key instead of merging. If you want both sets of declarations, combine them into one rule in your source before converting.

Can I download the JSON?

Yes. After conversion, click Download to save styles.json, or Copy JSON to place the text on your clipboard. Both use the four-space indented version that is shown on screen in the result card.