---
type: explanation
id: ai7k4m2n
title: AI Theme Builder
metaTitle: AI Theme Builder - JavaScript Data Grid | Handsontable
description: An AI-assisted tool that turns a written description into a complete Handsontable theme, generating the CSS variables that drive the grid's appearance.
permalink: /ai-theme-builder
react:
  id: ai9p3x5q
  metaTitle: AI Theme Builder - React Data Grid | Handsontable
angular:
  id: aiq2v8w1
  metaTitle: AI Theme Builder - Angular Data Grid | Handsontable
vue:
  id: aih6t3z4
  metaTitle: AI Theme Builder - Vue Data Grid | Handsontable
searchCategory: Guides
category: AI Tools
menuTag: new
---
The <a href="https://handsontable.com/theme-builder" target="_blank" rel="noopener noreferrer">Theme Builder</a> is a free web tool for building Handsontable themes visually, instead of writing code. You can manually adjust over 200 design tokens with UI controls and see the table update in real-time. Then you can export the theme and use it in your own app!

To go deeper on the underlying theme system, see the [Themes](@/guides/styling/themes/themes.md) and [Theme customization](@/guides/styling/theme-customization/theme-customization.md) guides.

## AI Theme Generation
Click the AI tab on the right to generate themes from a prompt. Describe the look you want -- for example, "minimal light theme with rounded headers" or "dark theme with high-contrast borders" -- and the builder generates the theme configuration file.

You can ask for follow up changes, or switch over to the manual editor to make any final adjustments before exporting.

## Multi-Framework Support
The Theme Builder generates working configurations for vanilla JavaScript, React, and Angular. So it's easy to use the generated theme in your own framework.

Click the **Generate code** button, then choose your framework, and copy the theme.

## Test in StackBlitz
Try out your theme in a live web application by clicking the **Open in StackBlitz** button. This opens a new tab in StackBlitz where you can test and edit the theme in the web instead of downloading the files to run locally.

<a href="https://handsontable.com/theme-builder" target="_blank" rel="noopener noreferrer">Open the Theme Builder</a>
