BRX Prod is currently in Beta. While in beta we are offering 40% license discounts

Pricing

All Features

BRX Prod offers a powerful suite of tools designed to enhance productivity in Bricks Builder. Features include AI Completion, a streamlined Structure panel, improved builder functions, and advanced CSS management for Bricks Wireframes.

AI Features

Enhance your workflow with built-in AI tools for content, code, and image generation directly inside the builder.

Feature

Description

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.

CSS Panel

Powerful CSS tools designed to speed up styling, improve accuracy, and streamline your entire design workflow.

Feature

Description

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.

CSS Typeaheads

Write CSS faster with intelligent autocomplete and suggestions. Get real-time hints for properties and values, reduce errors, and streamline your styling workflow.

Feature

Description

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.

BEM Features

Work smarter with structured class naming, automated BEM workflows, and tools that keep your code consistent.

Feature

Description

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.

Structure Panel

Improve your layout workflow with faster element management, smarter controls, and enhanced structure navigation tools.

Feature

Description

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.

Debug

Identify and fix common layout, accessibility, and performance issues with built-in visual debugging tools.

Feature

Description

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.

Builder

Extend the core builder experience with additional controls, smarter UI improvements, and productivity-focused features.

Feature

Description

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

Speed up your workflow with customizable shortcuts, inline hints, and advanced editing capabilities.

Feature

Description

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.

Customization

Tailor your workflow to match your needs. Adjust settings, shortcuts, and tools to create a more efficient and personalized building experience.

Feature

Description

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.

Design Systems

Create and manage reusable styles for colors, typography, spacing, and components. Keep your projects consistent, scalable, and easier to maintain—all from one place.

Feature

Description

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.

Settings & Team

Manage configurations efficiently with export/import tools and control access with team-based permissions.

Feature

Description

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.

Ready to Speed Up Your Workflow?

Join freelancers and agencies who build faster with BRX Pro