> 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

Parsers API reference

## 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="/reference/parsers/change-case.md">change-case</a></td><td>This parser helps you change the case of names or modes over a SDTF graph.</td><td><a href="/reference/parsers/change-case.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/convert-color.md">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="/reference/parsers/convert-color.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/convert-dimension.md">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="/reference/parsers/convert-dimension.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/select-modes.md">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="/reference/parsers/select-modes.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/filter.md">filter</a></td><td>This parser helps you filter a SDTF graph.</td><td><a href="/reference/parsers/filter.md#basic-usage-select-all-tokens-from-a-group-in-a-collection">Example</a></td></tr><tr><td><a href="/reference/parsers/register-view.md">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="/reference/parsers/register-view.md#basic-usage-select-all-tokens-from-a-group-in-a-collection">Example</a></td></tr><tr><td><a href="/reference/parsers/select-modes-1.md">select-modes</a></td><td>This parser helps you select design tokens from specific mode(s).</td><td><a href="/reference/parsers/select-modes-1.md#basic-usage-select-all-tokens-from-a-mode-named-light">Example</a></td></tr><tr><td><a href="/reference/parsers/select-modes-1-1.md">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="/reference/parsers/select-modes-1-1.md#basic-usage-prefix-color-tokens">Example</a></td></tr><tr><td><a href="/reference/parsers/select-modes-2.md">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="/reference/parsers/select-modes-2.md#basic-usage-suffix-color-tokens">Example</a></td></tr><tr><td><a href="/reference/parsers/select-modes-3.md">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="/reference/parsers/select-modes-3.md#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="/reference/parsers/to-css-custom-properties.md">to-css-custom-properties</a></td><td>This parser helps you transform design tokens in CSS Custom Properties.</td><td><a href="/reference/parsers/to-css-custom-properties.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/to-css-text-style.md">to-css-text-style</a></td><td>This parser helps you generate text styles as CSS classes.</td><td><a href="/reference/parsers/to-css-text-style.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/to-css-text-style-1.md">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="/reference/parsers/to-css-text-style-1.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/to-flutter.md">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="/reference/parsers/to-flutter.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/to-javascript.md">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="/reference/parsers/to-javascript.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/to-json.md">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="/reference/parsers/to-json.md#basic-usage-json-token-values">Example</a></td></tr><tr><td><a href="/reference/parsers/to-json-list.md">to-json-list</a></td><td>This parser helps you pull design tokens in JSON within an iterable array structure.</td><td><a href="/reference/parsers/to-json-list.md#basic-usage-json-token-values">Example</a></td></tr><tr><td><a href="/reference/parsers/to-kotlin.md">to-kotlin</a></td><td>This parser helps you generate design tokens for Kotlin.</td><td><a href="/reference/parsers/to-kotlin.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/to-react-native.md">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="/reference/parsers/to-react-native.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/to-scss-mixin-text-style.md">to-scss-mixin-text-style</a></td><td>This parser helps you generate text styles as SCSS mixins.</td><td><a href="/reference/parsers/to-scss-mixin-text-style.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/to-scss-mixin-text-style-1.md">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="/reference/parsers/to-css-text-style-1.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/to-sdtf.md">to-sdtf</a></td><td>This parser helps you get your design tokens as a SDTF graph in JSON.</td><td><a href="/reference/parsers/to-sdtf.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/to-style-dictionary.md">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="/reference/parsers/to-style-dictionary.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/to-swift.md">to-swift</a></td><td>This parser helps you generate design tokens as Swift classes.</td><td><a href="/reference/parsers/to-swift.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/to-tailwind.md">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="/reference/parsers/to-tailwind.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/to-typescript.md">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="/reference/parsers/to-typescript.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/svgo.md">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="/reference/parsers/svgo.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/svg-to-jsx.md">svg-to-jsx</a></td><td>This parser helps you generate JSX or TSX components from your vector assets.</td><td><a href="/reference/parsers/svg-to-jsx.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/svg-to-tsx.md">svg-to-tsx</a></td><td>This parser helps you generate TSX components from your vector assets.</td><td><a href="/reference/parsers/svg-to-tsx.md#basic-usage">Example</a></td></tr><tr><td><a href="/reference/parsers/to-svg-file.md">to-svg-file</a></td><td>This parser helps you generate SVG files from your vector assets.</td><td><a href="/reference/parsers/to-svg-file.md#basic-usage-single-mode">Example</a></td></tr><tr><td><a href="/reference/parsers/to-bitmap-file.md">to-bitmap-file</a></td><td>This parser helps you generate PNG and JPG files from your bitmap assets.</td><td><a href="/reference/parsers/to-bitmap-file.md#basic-usage-single-mode">Example</a></td></tr><tr><td><a href="/reference/parsers/to-file.md">to-file</a></td><td>This parser helps you generate files from any asset token: Bitmap, Font and Vector.</td><td><a href="/reference/parsers/to-file.md#basic-usage">Example</a></td></tr></tbody></table>
