React Embedded AnalyticsTheme Builder

The Theme Builder is a visual tool for building AG Studio themes. Start from a preset, adjust colours, spacing and typography across the Studio UI, grid widgets and chart widgets, and preview the result live. Export the finished theme as code to use in your application.

Using the Theme Builder Copy Link

The builder has a parameter sidebar on the left and a live preview on the right:

• Presets - the theme cards above the preview each apply a complete theme in one click. Every preset has a light and a dark variant, and the active variant follows the site's dark-mode toggle.
• Parameters - the sidebar groups common parameters into sections such as General, Header, Widgets, Grid and Charts. Adjust a colour, length or font and the preview updates immediately.
• All Parameters - the search box under the sidebar exposes every theme parameter Studio supports, beyond the curated sections.

Exporting a Theme Copy Link

To export the theme you've built:

1. Click the Import / Export button at the bottom of the sidebar.
2. The Export tab shows JavaScript that recreates your theme as a studioTheme derivation.
3. Click the copy button to copy it to your clipboard.

The exported code applies your changes on top of the default studioTheme using withParams:

studioTheme.withParams({
    accentColor: '#2196F3',
    backgroundColor: '#F4F7FA',
    fontFamily: 'Inter, sans-serif',
    spacing: 6,
})

To use it, pass the theme to the theme property when configuring Studio. See Theming for the full theming API.

Importing a Theme Copy Link

The Import tab loads existing theme code back into the builder so you can keep editing it. Paste in code exported from the builder and click Apply.