With Breakdance 3.0, your AI agent works directly with Breakdance. Tell it what you want to build and it can create the pages, templates, headers, footers, selectors, variables, responsive styles, and dynamic data that make up the site. You can have the agent build the entire site, work on it yourself in the builder, or do both.

Build Breakdance Sites By Talking To Your Agent

Breakdance 3.0 connects to your agent via MCP (Model Context Protocol). To set this up, go to Breakdance > Settings > Agents & MCP. From there, you can install the Agent Connector and connect your agent to the site. Once connected, an agent can inspect the site, create pages, build site structures, and use Breakdance features.

How it works

Agents write HTML and CSS, and Breakdance converts that into Breakdance elements and selectors, using Fundamental elements such as Containers, Text, Images, Text Links, and SVG Icons to build the page. CSS classes become global selectors, responsive styles are mapped to Breakdance breakpoints, and variables, fonts, and keyframes are preserved.

Build pages and site structures

Ask your agent to build a landing page, a few pages, or the whole site. It creates the pages in WordPress and builds them in Breakdance. It can set the homepage, create headers and footers, build content templates with the right conditions, and use Global Blocks for content that appears in more than one place.

Agents can also work with the design system already in place. They can read the site’s breakpoints, selectors, variables, and heading and body fonts, then reuse them as they build.

Build dynamic WordPress sites

Agents can use the dynamic data already available in WordPress and active integrations such as ACF and Meta Box. They can connect text, images, links, and other supported element properties to those fields, so the page pulls its content from WordPress instead of storing it directly in the layout.

For lists of content, the agent can build a Posts Loop and decide what appears based on post type, metadata, related content, ACF relationships, or Breakdance conditions such as specific posts, terms, and authors. It also builds the Global Block used to display each result and connects it to the loop.

Create and configure forms

Agents can build forms in Breakdance, configure their fields and layout, and set labels, success and error messages, and redirects. They can also configure the Breakdance Form Actions that run after submission: send an email, store the submission and uploaded files in WordPress, or pass mapped data to a webhook.

Fundamental Elements For AI Building

Breakdance 3.0 adds a Fundamentals category to the Add panel. It provides a set of elements for page structure, text, media, links, code, and embeds – designed to be used primarily by AI agents.

When necessary, agents will reach for a more complex element, for example, a Form Builder. Otherwise, agents will generally prefer to use the relevant Fundamentals when turning HTML into a Breakdance page. Common HTML structures are mapped to these elements, producing a Breakdance page that you can continue editing in the builder.

A New Selectors System

The Selectors panel gives you one place to create and organize selectors and edit their styles. The Selectors panel UI has been completely overhauled. When a selector is applied to the active element, its controls show whether a value comes from an earlier selector or breakpoint, or is overwritten by a later selector.

Selectors now output without an automatic .breakdance wrapper, so a class named card is emitted as .card, rather than .breakdance .card. This keeps its specificity and place in the cascade consistent with the CSS you write or an agent adds through MCP.

Selectors created before 3.0 continue to work in the Legacy Selectors panel. The optional Convert to New Format button migrates their names and responsive properties into the new Selectors system. Nothing is converted automatically.

Global CSS Variables For Units, Strings, & More

Breakdance 3.0 adds native support for CSS variables that you can use directly in compatible Design controls. A variable can hold a color, font family, size, spacing value, or another supported CSS value.

Unlike Global Settings, which define broader parts of the design system such as colors, fonts, and typography presets, variables work at the level of an individual property.

For example, define --section-spacing: 96px and select it in a Section’s Padding Top and Padding Bottom controls. Both controls reference the variable instead of storing their own copy of 96px, so changing it updates every element or selector that uses it. This works with every unit input, and most other controls in the Design tab.

This makes reusable values much more granular than Global Settings or presets. Variables can be applied across elements and selectors, organized into collections, and managed through MCP by agents working with the site’s design system.

Click, Hover, and Scroll Interactions

Interactions in Breakdance let you create click, hover, keyboard, and scroll-based behavior in the builder. A click can reveal a form, scroll to it, and focus the first field. An element entering the viewport can add a class that starts a transition or animation. Each interaction starts with a trigger and runs one or more actions, in order, on the current element or another element.

Choose a trigger

Triggers include clicks, mouse enter and leave, key up and key down, page load, page scroll, and an element scrolling into view.

Chain multiple actions

Actions can show or hide an element; add, remove, or toggle a class; set or remove an HTML attribute; set a CSS variable; scroll to an element; focus or blur an element; or call a JavaScript function. You can chain several actions together and have Breakdance run them in order from a single trigger.

Control where it runs

An action can target the current element, the element that fired the trigger, or another element using a CSS selector. A selector can be matched anywhere on the page, among children of the current element, against the closest matching parent, or among children of the trigger target. You can set an action to run only once or disable it at specific breakpoints.

Agents can create and update all of this through MCP, so interactions remain part of the Breakdance document instead of being handed off to a separate JavaScript snippet or plugin.

The Builder Is Faster

Breakdance 3.0 includes performance improvements throughout the builder, including page loading, element rendering, dynamic data, and checks for unsaved changes. Dynamic data now loads without holding up the rest of the canvas, and each element’s initial CSS is generated once when the page loads.

The Selectors system caches generated CSS and updates the canvas stylesheet only when its output changes. This improves performance when working with large selector libraries.

Changelog