All Features

AI Providers

Plug in OpenAI, Anthropic, and Google with your own API keys, then pick which provider handles which job. Switch models freely, keep usage on your own account, and never get locked into a single vendor for content, code, or images.

Text Generation (AI Completion)

Write headlines, body copy, and placeholder content directly inside any Bricks text field with a tiny pattern syntax — 'ai:p:3 "About us"' returns three paragraphs. Stop tab-hopping to ChatGPT just to fill a hero section.

Image Generation

Generate on-brand images right inside Bricks image controls and ship them straight to the WordPress media library — no downloads, no re-uploads, no stock-photo hunting. Supports DALL·E and Google Imagen so style matches budget.

Code Generation

Generate clean Bricks-ready HTML, BEM-styled CSS, WordPress PHP, and modern JavaScript on demand. Each language ships with opinionated system prompts so output matches WordPress standards and your BEM conventions — paste-ready, not boilerplate you have to fix first.

AI Debug

Built-in tooling for testing AI integrations: visual outlines around AI-enabled inputs, dummy-content fillers for layout testing, and console logging of every prompt and response. Cuts hours off diagnosing bad outputs during agency-scale rollouts.

Font Pairing

Heading + body font picker tied to your active Bricks theme style. Lists every Google Font and any installed Bricks Custom Font, with live preview. Optional AI provider gives prompt-driven suggestions, with variety controls that steer it away from "Roboto + Open Sans" every time.

Bottom CSS Panel

A real CodeMirror 6 editor docked under the preview, replacing Bricks' tiny custom-CSS box. Real-time linting, scoped to the selected element, breakpoint-aware — write production CSS without ever leaving the builder or losing your context.

Detachable Panel

Pop the CSS Panel into its own browser window for dual-monitor flow. Full feature parity — typeaheads, shortcuts, BEM detection — plus live two-way sync with the builder via BroadcastChannel. Code on one screen, design on the other.

Selector Pills

Visual pills above the editor for each ID and class on the active element. Click to switch styling targets, double-click to rename, drag to reorder, right-click for lock/duplicate/delete. The class-juggling you hate, made one-click.

Breakpoint Support

The CSS Panel writes to the active Bricks breakpoint automatically — desktop CSS to '_cssCustom', tablet to '_cssCustom:tablet_portrait', etc. Switch breakpoints in Bricks and the panel reloads. Or flip Single CSS mode and write everything to desktop.

Code Formatting

One-button auto-format via js-beautify — handles nested selectors, '@media' blocks, and preserves your fold state. Paste messy CSS, hit format, ship clean. No extra tab to prettier.io, no manual indentation fixes.

Multi Cursor Editing

Hold Alt and click to drop multiple cursors, or select an identifier and Ctrl+D to add the next match. Rename a variable across 12 declarations in three keystrokes — same multi-cursor power as your favourite IDE, inside Bricks.

Variablize

Right-click any property:value pair to convert it into a properly-scoped CSS variable. Auto-generates a Settings block at the top using the override-aware 3-tier pattern, replaces the literal with 'var()'. Refactor to design tokens in seconds, not hours.

CSS Variable Expansion

When your input matches a shortcut exactly, ghost text shows what TAB will produce — 'bgc' shows '→ background-color' inline. Visual confirmation before you commit the keystroke, zero surprises.

Gradient Generator

Visual builder for linear, radial, and conic gradients with an interactive stop editor and live preview right in the CSS panel. Insert ready-to-use CSS — no Photoshop guesswork, no third-party generator tabs to manage.

Pattern Generator

Browse and customize SVG background patterns inside the CSS Panel — geometric, dots, lines, waves. Tune scale and color, insert as a single 'background-image' rule. Polished textures without an asset pipeline or extra HTTP requests.

State Variants

Place the cursor on any variable declaration, trigger State Variants, and instantly get hover/focus/active/selected/disabled copies (e.g., '--_button-bg--hover'). Build full interaction states without copy-paste-rename loops.

Auto Semicolon

Press Enter or move to the next line and the editor adds the missing semicolon for you — handles multi-line values, never doubles up. The keystroke you keep forgetting that breaks the rule, fully automated.

Paste Override Vars

Ctrl+Alt+V collapses the BEM 3-tier '--_var: var(--var, fallback)' pattern to its consumer-side override form — exactly what the receiving Settings block expects. Native Ctrl+V still pastes verbatim, so round-tripping between Settings blocks stays clean.

Variable Cycling

Cursor on '--brxw-space-l', press Arrow Up — get '--brxw-space-xl'. Works for size scales, font weights, color shade families ('primary-l-3' ↔ 'primary-d-3'), and any framework-agnostic step pattern. Try-on different design tokens at typing speed.

Grid/Flex Layout Helpers

When 'display: grid' or 'display: flex' is detected, inline helper icons appear next to the rule. Click for a popover with align-items, justify-content, gap, and template controls. Visual layout tweaking without leaving the code editor.

Clean Comments

Strip comment cruft from CSS in one click — Bricks' auto-injected commentary, your own debug notes, anything that bloats the saved styles. Keep production rules tight and your Custom CSS field readable.

Editor Tint Colors

Subtle background tint changes to flag what you're editing — orange when an element ID is selected (overrides), green when editing a class. Glance at the panel and instantly know your styling scope. Customizable per light/dark mode.

Root Selector Shortcuts

Type 'r' then TAB for '%root%', or 'R' for '%root%{ }' with the cursor parked inside the braces. Stop typing the active class name forty times per page — the placeholder swaps to the real selector at save time.

Property Shortcuts

Fifty-plus TAB-completed abbreviations: 'bg', 'bgc', 'bdr', 'jc', 'ai', 'pos', plus logical-property shorthands ('pis', 'mbe') and '!i' for '!important'. Halves the keystrokes for CSS you already write a hundred times a day.

Pseudo Element Shortcuts

'::b' becomes '::before', ':h' becomes ':hover', ':fw' for ':focus-within', ':has()' and ':nth-child()' ready with cursor inside the parens. The states you write thirty times a day, two keystrokes each.

CSS Variable Picker

Type '--' and get every Bricks Global Variable, theme-style token, and custom property in your project, fuzzy-filtered as you type. No more digging through Settings to remember what the spacing scale variable is called.

Property Typeahead

Smart autocomplete of every CSS property with descriptions. Catches typos, surfaces properties you didn't know existed, and matches patterns mid-word — type 'flex' and pick from the entire flex family in one popup.

Value Typeahead

Context-aware values for the property you're on — 'display:' only suggests 'flex', 'grid', 'block'; 'cursor:' only suggests cursor keywords. Stop guessing valid values and stop typing them out in full.

Shortcut Hints

Live dropdown lists every matching CSS shortcut as you type, with its expansion. Discover the abbreviations you don't know yet without leaving the editor — and catch the ones you do know but typed slightly wrong.

Ghost Hints (Inline Hints)

When your input matches a shortcut exactly, ghost text shows what TAB will produce — 'bgc' shows '→ background-color' inline. Visual confirmation before you commit the keystroke, zero surprises.

Custom Typeahead Patterns

Add your own regex-based snippets. Write a pattern like `g-a-fit-(\d+)` that expands to a full grid-auto-fit block with the captured number injected. Build a personal CSS library that travels with your settings export.

BEM Element Typeahead

Type 'r_' while editing a BEM root class and a popup lists every child element class on the live structure, ready to insert as '%root%__element'. Pull existing BEM elements from the DOM into your CSS, no typing required.

Auto BEM

Generate Block + Element classes from your Structure Panel labels with a double opt-in safety net so accidental clicks don't rewrite your codebase. Configurable normalization patterns let you exclude framework prefixes like 'brxw-' from the auto-rename.

BEM Rename

Rename a Structure Panel label and the corresponding BEM class is offered for global rename — with shared-class conflict detection, so you can either rename everywhere it's used, or copy-and-rename for this structure only.

Auto Select Class

Click an element in the Structure Panel and Bricks auto-switches to the matching BEM class. Keeps the class panel in sync with the structure tree — no more hunting for the right class to edit before every change.

BEM Audit Modal

Tree view of every element and its BEM class assignments, with inline label editing, real-time match indicators, color-coded Block/Element distinctions, and bulk-rename across the page. Sanity-check an entire template in one screen.

Element Shortcuts

Quick-insert grid popover on every Structure Panel item — drop a heading, button, or container into a layout in one click. Customize icon size, column count, and which elements appear in your shortcut sets.

Multiple Shortcut Sets

Ship two seed sets (Default + Advanced) and add your own — different sets for landing pages, blog posts, headers, whatever your project needs. Switch the active set instantly from the toolbar without a roundtrip to settings.

Select Inserted

Newly inserted elements are auto-selected so you can immediately edit them. Cuts the click-then-find-and-click-again loop that costs a second on every single insert — and you insert hundreds of elements a day.

Name Before Insert

Asks for a custom label/class name *before* the element drops into the structure — every new element starts with semantic naming instead of `Heading-31`. Pairs perfectly with Auto BEM for instant clean class output.

HTML Tag Selector

Shows the current HTML tag next to each Structure Panel item — click to change instantly. Configurable font size, color, and abbreviated vs. full tag display so it fits any panel density and color scheme.

Attribute Bar

Single-line CSS-selector editor for the active element: `#id.class.class role="button"`. Autocomplete classes from your global library and HTML attributes from the spec, filtered by element tag. Edit five attributes at the speed of one.

Expand/Collapse All

Collapse every layout element in the Structure Panel with one click, then expand only the branch you need. Navigate deeply nested templates without scrolling through two hundred visible nodes.

Group Actions

Bundles Auto BEM, Element Shortcuts, Change Tag, and Hide/Show into a single dropdown per Structure Panel item — one icon instead of four. Reduces visual noise on long structures without hiding any power features.

Class Preview Hover

Hover any class in the Bricks class selector and the styles apply temporarily in the live preview. Compare classes visually before committing — no more "let's just click it and see what happens".

Style Structure Panel

Make the Structure Panel match your brand. Size presets (small, default, large) and full color control across background, text, icons, hover, and active states for both light and dark mode. Read the structure tree without eye strain.

Isolation Mode

Alt+Click any element icon in the Structure Panel and everything else dims in both the structure tree and the preview iframe. Focus on a single component without visual distractions — pair-program with yourself.

Overflow Detection

Highlights elements causing horizontal scroll with a visible outline and label so you know exactly which child is breaking the viewport. Squash the "where is the extra 4px coming from" mystery in seconds, not minutes.

Layout Guides

Configurable column overlay on the preview — set count, gap, gutter, container mode, color. Drop a 12-column grid behind any page to verify alignment without measuring pixels by hand or screenshotting into Figma.

Heading Order

Reads Bricks' Vue state to validate heading hierarchy and flags H2→H4 jumps with green/red overlay tags in the preview. Catch accessibility regressions before SiteImprove does and before they hit the audit report.

Missing Alt

Identifies images without alt text and tags them in the preview. Reads Vue state directly — the moment you add alt text in the builder panel, the warning disappears. No manual rerun, no false positives.

Empty Links

Flags anchor elements with missing or `#` placeholder hrefs. Same live-update pattern as Missing Alt — fix the link in the builder, the overlay vanishes. Never ship a hero CTA pointing nowhere again.

Preview Resize

Draggable handles on the left and right edges of the preview iframe — drag to any width to test responsive breakpoints without flipping device presets. See the awkward 1024px layout you forgot existed.

Breakpoint Sync

When you switch breakpoints in Bricks, the CSS Panel reloads the right '_cssCustom:breakpoint' key and saves new keystrokes back to it. Edit responsive CSS exactly where it ends up, with zero context-switching.

Layout Width Labels

Shows the current pixel width of the preview iframe in the Bricks toolbar - and optionally auto-shows during drag-resize. Quick reference for "is this what 768 actually looks like?" without opening DevTools.

Auto Layout Widths on Resize

Width labels can stay hidden during normal use, but auto-flash on every preview resize so you see the live pixel value while you drag. Best of both worlds - clean toolbar, instant feedback when you need it.

Convert UI to CSS

Turn Bricks visual-panel styles (the right-side controls) into clean Custom CSS using modern logical-property shorthand. Move from utility-first chaos to maintainable rules without rewriting a single declaration by hand.

Disable Breakpoints

Hide Bricks breakpoint controls from the toolbar entirely so the team stops accidentally writing tablet-only CSS. Controls reappear automatically on any element that already has breakpoint styles, so legacy work stays editable.

Animation Overrides

Replace Bricks' built-in animation @keyframes with a CSS-variable-driven system: 55+ directional keyframes (fade/slide/zoom/flip/rotate), tier variables for distance/rotation/duration, stagger utility classes, and compound combos like fade-in-up-rotate.

Bricks Modifications (parent)

Single opt-in switch that gates all experimental Bricks UI tweaks. Currently houses Animation Overrides and the Disable Breakpoints toggle — keeps risky changes behind one master flag so you can A/B them per project.

Keyboard Shortcuts

Central registry of every shortcut in the plugin — see them, edit them, manage reserved combos, detect conflicts across features. One screen for "what does Ctrl+Shift+E do here?" — never guess again.

Shortcut Editor

Rebind any plugin shortcut, exclude combos that clash with the browser or Bricks defaults, and get conflict warnings before you save. Tune the keyboard to your hands instead of memorising someone else's choices.

Admin & UI Colors

Customize the Bricks admin interface palette - primary, secondary, neutral, success, warning, danger, info - separately for light and dark mode. Make the builder match your agency's brand, not Bricks' purple.

Recalculate A11y Colors

Generate WCAG-contrast text colors for every swatch in your palette, with override controls for the soft black/white extremes. Stops harsh black on body copy and vibrating white on saturated backgrounds before they ship.

Bricks Wireframe Tools

Migrate Bricks Wireframe template variables to the Bricks 2.2+ Scales system. Imports the default color palette, generates A11y-compliant text colors, applies button theme styles, and copies typography/shadow/color reference templates straight to your clipboard.

Export Settings

Export plugin settings as JSON, full bundle or per-feature. Keep a known-good config in your repo, rebuild a sandbox in seconds, or hand new teammates a starter pack so day one matches day one hundred.

Import Settings

Import an exported JSON file to replicate a config across sites. New WordPress install with the same shortcuts, BEM rules, AI providers, and brand colors in thirty seconds. Stop reconfiguring per project.

Permissions

Features that touch Bricks data are gated by Bricks' own `Builder_Permissions` system — admins get everything, other roles only what they're authorized for. The UI shows disabled features with the missing permission name spelled out.