Features

Write standard HTML code that instantly converts into native Bricks elements like Sections, Containers, and Headings. Any structural change made in the visual builder updates your code in real-time, keeping both views perfectly synchronized.

Manage scripts efficiently by writing code that is automatically saved into standard Bricks Code elements. This architecture ensures your JavaScript executes reliably on the frontend and remains fully accessible even if the plugin is eventually deactivated.

Paste a full HTML, CSS, and JavaScript snippet in one action and convert it directly into native Bricks elements. Quick Import auto-splits code into the right editors, maps styles to the correct elements, and inserts content based on your current selection. Ideal for migrating designs from other tools or reusing components.

Write CSS faster with an editor built specifically for Bricks. From a single, unified panel, you can target element IDs, element classes, or global classes with ease. The editor includes powerful productivity shortcuts such as a Root Selector that lets you type r + Tab to instantly insert %root%, variable autocomplete where typing --var + Tab expands to var(--var), and smart property suggestions that allow you to type back, select background, and have the editor automatically insert the colon and semicolon so you can immediately add your value.

Type keywords to see relevant suggestions as you write. Type hover, focus, before, or after for pseudo-selector snippets. Type media or container for query snippets. Type from for relative color syntax — oklch(from var(--foo) L C H / 1) or hsl(from var(--foo) H S L / 1) — to derive colors from variables. All snippets output valid, Bricks-compatible CSS.

Variable autocomplete scans every stylesheet in the builder — not just Bricks Settings. Variables from Automatic CSS, Core Framework, Advanced Themer, and any :root output appear in suggestions. No configuration required. Works with any framework that outputs CSS custom properties.

Use container queries without memorizing syntax. Type container, has, or parent for a snippet that makes the parent a container. Type container + Tab for a dynamic @container query based on the selected element's live width. The editor recognizes container-type, container-name, and container in autocomplete. An optional element dimension overlay shows width and height on the canvas for quick reference.

Type media + Tab in the CSS editor to insert a media query using the current preview width. If your preview is at 900px, you get @media (width <= 900px) { } instantly. No manual breakpoint lookup.

Work without interruption using a reactivity engine that eliminates manual save or sync buttons. The system processes changes as you type, ensuring the visual canvas and code editor remain in lockstep without slowing down the browser. Toggle Auto-sync on or off in Settings when you prefer manual control.

Resize the HTML, CSS, and JavaScript panels using visible drag gutters between them. Drag a gutter to redistribute space. When you hide an editor, the remaining panels fill the width with no gaps. Your panel sizes are remembered between sessions.

Common actions are available via keyboard at all times. Use Ctrl+S / Cmd+S to save changes directly through Bricks without triggering the browser save dialog. Open the selector modal with Ctrl+Shift+Enter / Cmd+Shift+Enter. Toggle CSS comments with Ctrl+/ / Cmd+/. Use r + Tab to insert %root%, media + Tab to insert a media query at the current preview width, container + Tab to insert a container query at the element's width, and --variable + Tab to expand to var(--variable).

See meaningful names in the structure panel instead of generic "Div." Elements display their ID, first class, or a readable tag name — "table," "Heading 1," "Link," "nav" — so you can identify elements at a glance. Elements created via the HTML editor or Quick Import without an ID or class show tag-based labels automatically.

Add classes, IDs, and data attributes from a single input field. Type .my-class another-class #my-id data-theme="light" and the modal intelligently parses each selector type. Choose Element Class or Global Class placement for classes; IDs and data attributes apply directly to the element. Open instantly with Ctrl+Shift+Enter on Windows or Cmd+Shift+Enter on Mac from the structure panel or canvas.

Generate clean, scalable class structures instantly. Hover over any element in the structure panel to launch the generator, which creates BEM-compliant classes for entire element trees in seconds. Choose to create Global or Element-level classes, exclude specific elements or entire branches, and edit names inline before applying.

Right-click any class or element for precision control. Rename classes safely without breaking links, copy full CSS rules to move styles between elements, or instantly copy the selector string to use elsewhere. Copy the CSS of all child elements in a single click to migrate styles rapidly.

Resize the Bricks builder iframe horizontally using drag handles on the left and right sides. The current preview width displays in real-time. Handles automatically disable on tablet and mobile breakpoints to avoid conflicts with Bricks' responsive behavior. Works correctly even when the canvas is zoomed out to fit a large preview.

Integrate seamlessly with utility frameworks like ACSS or Core Framework. Type class names directly into the HTML editor, and Bricks will immediately recognize and render the associated styles. CSS variable autocomplete scans all active stylesheets — including Automatic CSS, Core Framework, Advanced Themer, and any framework that outputs :root variables, so you never need framework-specific setup.

All your changes live in Bricks' native data structure. No custom tables. No orphaned data. It's clean, lightweight, and ensures your data is never lost if the plugin is deactivated.