# Parsers

## Utility parsers

Utility parsers help you **mutate** your token tree before generating final outputs.

{% hint style="info" %}
Utility parsers do **not have the `output` option** since they mutate the internal state without producing any actual output.
{% endhint %}

<table data-full-width="true"><thead><tr><th width="264">Parser</th><th width="586.3333333333334">Description</th><th>Usage example</th></tr></thead><tbody><tr><td><a href="parsers/change-case">change-case</a></td><td>This parser helps you change the case of names or modes over a SDTF graph.</td><td><a href="change-case#basic-usage">Example</a></td></tr><tr><td><a href="parsers/convert-color">convert-color</a></td><td>This parser helps you convert the color formats of color compatible tokens over a SDTF graph.</td><td><a href="convert-color#basic-usage">Example</a></td></tr><tr><td><a href="parsers/convert-dimension">convert-dimension</a></td><td>This parser helps you convert units of dimension tokens (spacing, sizing, breakpoint, blur...) and composite tokens sub values (font-size, letter-spacing, border-width...).</td><td><a href="convert-dimension#basic-usage">Example</a></td></tr><tr><td><a href="parsers/select-modes">make-line-height-relative</a></td><td>This parser helps you transform your text style lineheight values relative to their font size.</td><td><a href="select-modes#basic-usage">Example</a></td></tr><tr><td><a href="parsers/filter">filter</a></td><td>This parser helps you filter a SDTF graph.</td><td><a href="filter#basic-usage-select-all-tokens-from-a-group-in-a-collection">Example</a></td></tr><tr><td><a href="parsers/register-view">register-view</a></td><td>This parser helps you register a SDTF view that can be later used by generation parser to allow for partial outputs of the token tree with no destructive mutations.</td><td><a href="register-view#basic-usage-select-all-tokens-from-a-group-in-a-collection">Example</a></td></tr><tr><td><a href="parsers/select-modes-1">select-modes</a></td><td>This parser helps you select design tokens from specific mode(s).</td><td><a href="select-modes-1#basic-usage-select-all-tokens-from-a-mode-named-light">Example</a></td></tr><tr><td><a href="parsers/select-modes-1-1">prefix-by</a></td><td>This parser helps you prefix the name of your collections, groups and tokens from your SDTF token tree.</td><td><a href="select-modes-1-1#basic-usage-prefix-color-tokens">Example</a></td></tr><tr><td><a href="parsers/select-modes-2">suffix-by</a></td><td>This parser helps you suffix the name of your collections, groups and tokens from your SDTF token tree.</td><td><a href="select-modes-2#basic-usage-suffix-color-tokens">Example</a></td></tr><tr><td><a href="parsers/select-modes-3">replace-string</a></td><td>This parser helps you replace a part or the whole name of your collections, groups and tokens from your SDTF token tree.</td><td><a href="select-modes-3#basic-usage-rename-design-token-by-keeping-only-characters-present-after-the-last-slash-character">Example</a></td></tr></tbody></table>

## Generation parsers

Generation parsers help you **generate** your token tree into any technology / purposed oriented outputs.

{% hint style="info" %}
Many generation parsers can be placed in the same [parser rule](https://docs.specifyapp.com/concepts/parsers-engine#parser-rules), as long as they all need the same transformed - or not - token tree and they all use the `file` or `directory` output setting.
{% endhint %}

<table data-full-width="true"><thead><tr><th width="264">Parser</th><th width="586.3333333333334">Description</th><th>Usage example</th></tr></thead><tbody><tr><td><a href="parsers/to-css-custom-properties">to-css-custom-properties</a></td><td>This parser helps you transform design tokens in CSS Custom Properties.</td><td><a href="to-css-custom-properties#basic-usage">Example</a></td></tr><tr><td><a href="parsers/to-css-text-style">to-css-text-style</a></td><td>This parser helps you generate text styles as CSS classes.</td><td><a href="to-css-text-style#basic-usage">Example</a></td></tr><tr><td><a href="parsers/to-css-text-style-1">to-css-font-import</a></td><td>This parser helps you create CSS <code>@font-face</code> rules to import your font files.</td><td><a href="to-css-text-style-1#basic-usage">Example</a></td></tr><tr><td><a href="parsers/to-flutter">to-flutter</a></td><td>This parser helps you generate a Flutter theme from all your design tokens coming from Specify.</td><td><a href="to-flutter#basic-usage">Example</a></td></tr><tr><td><a href="parsers/to-javascript">to-javascript</a></td><td>This parser helps you pull design tokens as JavaScript objects for all token types and their respective getter functions.</td><td><a href="to-javascript#basic-usage">Example</a></td></tr><tr><td><a href="parsers/to-json">to-json</a></td><td>This parser helps you pull design tokens in JSON with token values in JSON or CSS.</td><td><a href="to-json#basic-usage-json-token-values">Example</a></td></tr><tr><td><a href="parsers/to-json-list">to-json-list</a></td><td>This parser helps you pull design tokens in JSON within an iterable array structure.</td><td><a href="to-json-list#basic-usage-json-token-values">Example</a></td></tr><tr><td><a href="parsers/to-kotlin">to-kotlin</a></td><td>This parser helps you generate design tokens for Kotlin.</td><td><a href="to-kotlin#basic-usage">Example</a></td></tr><tr><td><a href="parsers/to-react-native">to-react-native</a></td><td>This parser helps you pull design tokens as a theme compatible with React Native and their respective helper functions.</td><td><a href="to-react-native#basic-usage">Example</a></td></tr><tr><td><a href="parsers/to-scss-mixin-text-style">to-scss-mixin-text-style</a></td><td>This parser helps you generate text styles as SCSS mixins.</td><td><a href="to-scss-mixin-text-style#basic-usage">Example</a></td></tr><tr><td><a href="parsers/to-scss-mixin-text-style-1">to-scss-map</a></td><td>This parser helps you generate <code>.scss</code> files for each token type containing SCSS map and function / mixin to access the values of the tokens.</td><td><a href="to-css-text-style-1#basic-usage">Example</a></td></tr><tr><td><a href="parsers/to-sdtf">to-sdtf</a></td><td>This parser helps you get your design tokens as a SDTF graph in JSON.</td><td><a href="to-sdtf#basic-usage">Example</a></td></tr><tr><td><a href="parsers/to-style-dictionary">to-style-dictionary</a></td><td>This parser helps you generate <a href="https://amzn.github.io/style-dictionary/#/">Style Dictionary</a> raw token files for all your design tokens coming from Specify.</td><td><a href="to-style-dictionary#basic-usage">Example</a></td></tr><tr><td><a href="parsers/to-swift">to-swift</a></td><td>This parser helps you generate design tokens as Swift classes.</td><td><a href="to-swift#basic-usage">Example</a></td></tr><tr><td><a href="parsers/to-tailwind">to-tailwind</a></td><td>This parser helps you generate a Tailwind theme from all your design tokens coming from Specify.</td><td><a href="to-tailwind#basic-usage">Example</a></td></tr><tr><td><a href="parsers/to-typescript">to-typescript</a></td><td>This parser helps you pull design tokens as TypeScript objects for all token types and their respective getter functions.</td><td><a href="to-typescript#basic-usage">Example</a></td></tr><tr><td><a href="parsers/svgo">svgo</a></td><td>This parser help you optimize and transform your SVG strings with <a href="https://github.com/svg/svgo">svgo</a>.</td><td><a href="svgo#basic-usage">Example</a></td></tr><tr><td><a href="parsers/svg-to-jsx">svg-to-jsx</a></td><td>This parser helps you generate JSX or TSX components from your vector assets.</td><td><a href="svg-to-jsx#basic-usage">Example</a></td></tr><tr><td><a href="parsers/svg-to-tsx">svg-to-tsx</a></td><td>This parser helps you generate TSX components from your vector assets.</td><td><a href="svg-to-tsx#basic-usage">Example</a></td></tr><tr><td><a href="parsers/to-svg-file">to-svg-file</a></td><td>This parser helps you generate SVG files from your vector assets.</td><td><a href="to-svg-file#basic-usage-single-mode">Example</a></td></tr><tr><td><a href="parsers/to-bitmap-file">to-bitmap-file</a></td><td>This parser helps you generate PNG and JPG files from your bitmap assets.</td><td><a href="to-bitmap-file#basic-usage-single-mode">Example</a></td></tr><tr><td><a href="parsers/to-file">to-file</a></td><td>This parser helps you generate files from any asset token: Bitmap, Font and Vector.</td><td><a href="to-file#basic-usage">Example</a></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.specifyapp.com/reference/parsers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
