> For the complete documentation index, see [llms.txt](https://docs.specifyapp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.specifyapp.com/reference/parsers.md).

# 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="/pages/e5uwdxyZlD0XnMxcVee3">change-case</a></td><td>This parser helps you change the case of names or modes over a SDTF graph.</td><td><a href="/pages/e5uwdxyZlD0XnMxcVee3#basic-usage">Example</a></td></tr><tr><td><a href="/pages/IVkVaCy2A4f0lx2PUy4y">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="/pages/IVkVaCy2A4f0lx2PUy4y#basic-usage">Example</a></td></tr><tr><td><a href="/pages/jDoWVOzWa5vPE4Jk9xye">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="/pages/jDoWVOzWa5vPE4Jk9xye#basic-usage">Example</a></td></tr><tr><td><a href="/pages/0ZVI6OfHznZ17xkhRua2">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="/pages/0ZVI6OfHznZ17xkhRua2#basic-usage">Example</a></td></tr><tr><td><a href="/pages/oqdCIpt4DdE4H4rvtVO6">filter</a></td><td>This parser helps you filter a SDTF graph.</td><td><a href="/pages/oqdCIpt4DdE4H4rvtVO6#basic-usage-select-all-tokens-from-a-group-in-a-collection">Example</a></td></tr><tr><td><a href="/pages/GWF7j9eAtQIM3068EYRl">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="/pages/GWF7j9eAtQIM3068EYRl#basic-usage-select-all-tokens-from-a-group-in-a-collection">Example</a></td></tr><tr><td><a href="/pages/QW4LJy8o0fvrJffcQpRm">select-modes</a></td><td>This parser helps you select design tokens from specific mode(s).</td><td><a href="/pages/QW4LJy8o0fvrJffcQpRm#basic-usage-select-all-tokens-from-a-mode-named-light">Example</a></td></tr><tr><td><a href="/pages/YQPpCUoQB0C2POr8xSe9">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="/pages/YQPpCUoQB0C2POr8xSe9#basic-usage-prefix-color-tokens">Example</a></td></tr><tr><td><a href="/pages/yQQE8IAoYx1mfSwTjz6E">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="/pages/yQQE8IAoYx1mfSwTjz6E#basic-usage-suffix-color-tokens">Example</a></td></tr><tr><td><a href="/pages/JSlUqFIV9riR5nepWoLp">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="/pages/JSlUqFIV9riR5nepWoLp#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](/concepts/parsers-engine.md#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="/pages/n4yvurscwVNuXhoOj4XM">to-css-custom-properties</a></td><td>This parser helps you transform design tokens in CSS Custom Properties.</td><td><a href="/pages/n4yvurscwVNuXhoOj4XM#basic-usage">Example</a></td></tr><tr><td><a href="/pages/S0q7989YcLHsAt5yOhtA">to-css-text-style</a></td><td>This parser helps you generate text styles as CSS classes.</td><td><a href="/pages/S0q7989YcLHsAt5yOhtA#basic-usage">Example</a></td></tr><tr><td><a href="/pages/gUOCpEySgClbkPkMwWxz">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="/pages/gUOCpEySgClbkPkMwWxz#basic-usage">Example</a></td></tr><tr><td><a href="/pages/TAn2J3BfFqc8Le2SQFAX">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="/pages/TAn2J3BfFqc8Le2SQFAX#basic-usage">Example</a></td></tr><tr><td><a href="/pages/3lmR8Y6YbnbG6HSN38Vv">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="/pages/3lmR8Y6YbnbG6HSN38Vv#basic-usage">Example</a></td></tr><tr><td><a href="/pages/yjw0FZQWQ65FgAkoE46w">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="/pages/yjw0FZQWQ65FgAkoE46w#basic-usage-json-token-values">Example</a></td></tr><tr><td><a href="/pages/CmmYeSoJNqFRYMHU5gcI">to-json-list</a></td><td>This parser helps you pull design tokens in JSON within an iterable array structure.</td><td><a href="/pages/CmmYeSoJNqFRYMHU5gcI#basic-usage-json-token-values">Example</a></td></tr><tr><td><a href="/pages/1FL0fICycWMjoCab2QrS">to-kotlin</a></td><td>This parser helps you generate design tokens for Kotlin.</td><td><a href="/pages/1FL0fICycWMjoCab2QrS#basic-usage">Example</a></td></tr><tr><td><a href="/pages/UhVAOdCuFwjkIhvqrfBl">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="/pages/UhVAOdCuFwjkIhvqrfBl#basic-usage">Example</a></td></tr><tr><td><a href="/pages/ihFVlLW2KrWsGso01jZI">to-scss-mixin-text-style</a></td><td>This parser helps you generate text styles as SCSS mixins.</td><td><a href="/pages/ihFVlLW2KrWsGso01jZI#basic-usage">Example</a></td></tr><tr><td><a href="/pages/Yvti89mkdm8r2GarS378">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="/pages/gUOCpEySgClbkPkMwWxz#basic-usage">Example</a></td></tr><tr><td><a href="/pages/wPZbDOxCIubSYJULjdAw">to-sdtf</a></td><td>This parser helps you get your design tokens as a SDTF graph in JSON.</td><td><a href="/pages/wPZbDOxCIubSYJULjdAw#basic-usage">Example</a></td></tr><tr><td><a href="/pages/dEJsBhLw7B3C1A7gfbkz">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="/pages/dEJsBhLw7B3C1A7gfbkz#basic-usage">Example</a></td></tr><tr><td><a href="/pages/6EfAFIstxSmaKyobNohA">to-swift</a></td><td>This parser helps you generate design tokens as Swift classes.</td><td><a href="/pages/6EfAFIstxSmaKyobNohA#basic-usage">Example</a></td></tr><tr><td><a href="/pages/Fx8MtL3f0Vij7cSFnVEx">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="/pages/Fx8MtL3f0Vij7cSFnVEx#basic-usage">Example</a></td></tr><tr><td><a href="/pages/IsknWBnzRZUW4knGXgyT">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="/pages/IsknWBnzRZUW4knGXgyT#basic-usage">Example</a></td></tr><tr><td><a href="/pages/BvgAnWm5Zq1mYmQL8Vj0">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="/pages/BvgAnWm5Zq1mYmQL8Vj0#basic-usage">Example</a></td></tr><tr><td><a href="/pages/JPUmAPOT0ztk8FVj97xJ">svg-to-jsx</a></td><td>This parser helps you generate JSX or TSX components from your vector assets.</td><td><a href="/pages/JPUmAPOT0ztk8FVj97xJ#basic-usage">Example</a></td></tr><tr><td><a href="/pages/K9fHqJ9gTfOMExdyceYv">svg-to-tsx</a></td><td>This parser helps you generate TSX components from your vector assets.</td><td><a href="/pages/K9fHqJ9gTfOMExdyceYv#basic-usage">Example</a></td></tr><tr><td><a href="/pages/Q1zljCanTRO51rZ5WWOH">to-svg-file</a></td><td>This parser helps you generate SVG files from your vector assets.</td><td><a href="/pages/Q1zljCanTRO51rZ5WWOH#basic-usage-single-mode">Example</a></td></tr><tr><td><a href="/pages/w6zH9nauTDmvgEe20ZA8">to-bitmap-file</a></td><td>This parser helps you generate PNG and JPG files from your bitmap assets.</td><td><a href="/pages/w6zH9nauTDmvgEe20ZA8#basic-usage-single-mode">Example</a></td></tr><tr><td><a href="/pages/e5jbXEz9nX5a8WAKcXzG">to-file</a></td><td>This parser helps you generate files from any asset token: Bitmap, Font and Vector.</td><td><a href="/pages/e5jbXEz9nX5a8WAKcXzG#basic-usage">Example</a></td></tr></tbody></table>
