Visual Theme.json Builder
The heart of every modern Block Theme. Define your global styles, color palettes, and layout constraints without wrestling with syntax errors.
Layout
Color Palette
Features
Enables border, color, spacing, and typography controls in UI.
Hello World.
This is a live preview of how your theme.json settings affect the layout widths and color palette of your site.
Content Size Container
The container you are reading right now is set to 800px. Adjust the slider on the left to see this text reflow in real-time. This simulates the default "Group" block behavior.
Why use theme.json?
Introduced in WordPress 5.8, this file acts as the configuration engine for your theme. It replaces dozens of `add_theme_support()` calls in PHP with a single, declarative JSON file. It controls the Block Editor (Gutenberg) and the frontend site styles simultaneously.
Where to put this file?
Save the generated code as theme.json in the root directory of your theme.