bricks_export_variables

UtilityBeginnerRead OnlyComplexity: 2/10

Export all variables as JSON or CSS format

Overview

Exports all global CSS variables from the Bricks site in either JSON or CSS format. The JSON format includes full metadata (IDs, names, values, categories) suitable for reimporting into another Bricks site. The CSS format generates a clean :root { --name: value; } stylesheet.

This is essential for design system portability — export your variables from a staging site and import them into production, or share design tokens across multiple Bricks projects.

Key Features

Dual Format Support

Export as JSON (with IDs, categories, full metadata for Bricks reimport) or CSS (plain :root custom properties for universal use).

Category Preservation

JSON export includes category IDs and names, ensuring the organizational structure is preserved during import.

Cross-Site Portability

The JSON output is directly compatible with bricks_import_variables for one-click design token transfer between sites.

When to Use

Backing up the design system before major changes
Migrating design tokens from one Bricks site to another
Generating a CSS file for use outside of Bricks (e.g., custom themes or external apps)
Documenting the current variable set for design handoff
Creating a snapshot before a design system refactor

Prerequisites

Bricks Builder must be active. At least one global variable should exist for meaningful output.

When NOT to Use

When you just need to read variables in the current site — use bricks_get_global_variables instead
When you want to import variables — use bricks_import_variables

Parameters

1 Total Parameters1 Optional

formatstringoptional

Export format. "json" returns full Bricks-compatible export with categories and IDs. "css" returns plain CSS custom properties in :root { } format.

Default: json Values: json, css

Code Examples

Export as JSON for Reimport

Export the full variable set with categories, ready to import into another Bricks site.

JSON

bricks_export_variables({ format: "json" })

Response

{"variables": [{"id": "v1", "name": "spacing-xs", "value": "4px", "category": "cat1"}, {"id": "v2", "name": "spacing-sm", "value": "8px", "category": "cat1"}], "categories": [{"id": "cat1", "name": "Spacing"}]}

Export as CSS

Generate a clean CSS stylesheet with all variables as custom properties.

JSON

bricks_export_variables({ format: "css" })

Response

":root {n  --spacing-xs: 4px;n  --spacing-sm: 8px;n  --spacing-md: 16px;n  --spacing-lg: 24px;n}"

Common Mistakes

Exporting in CSS format when planning to reimport into Bricks.

Use JSON format for Bricks-to-Bricks transfers. CSS format loses category assignments and variable IDs, making reimport less organized.

Wrong

// Export as CSS then try to reimport — categories are lost
const css = bricks_export_variables({ format: "css" })
bricks_import_variables({ css: css })

Correct

// Export as JSON preserves categories and structure
const data = bricks_export_variables({ format: "json" })
bricks_import_variables({ variables: data.variables, categories: data.categories })

Tips & Warnings

Use JSON for backups and migrations: The JSON format preserves category organization and is directly compatible with bricks_import_variables.

Use CSS for documentation: The CSS format is ideal for design handoff, embedding in external stylesheets, or documenting the design system for developers.

Export before refactoring: Always export your variables before making large-scale changes to the design system. This gives you a backup you can reimport if needed.

Return Values

Field	Type	Description
`data (json format)`	object	Object containing "variables" array (with id, name, value, category) and "categories" array (with id, name). Compatible with bricks_import_variables.
`data (css format)`	string	CSS string in the format :root { --spacing-xs: 4px; --spacing-sm: 8px; ... }

Related Tools

Technical Details

Tool ID

bricks_export_variables

API Endpoint

/bricks-mcp/v1/design-system/variables/export

HTTP Method

GET

Namespace

design-system

Source File

design-system/variables.ts

Version

1.0

Min Bricks Version

1.9

Requires Auth

Yes

Changelog

v1.0

Initial release

20250101