Get Bricks

HTML & CSS to Bricks

March 18, 2026

Building a layout in Bricks based on a web layout library or AI-generated layouts usually means building it from scratch, element by element. This feature changes that workflow. You can now paste HTML or CSS directly into the builder to create native elements and styles instantly.

Configuration

You can control how Bricks handles pasted code in the settings.

Path: Bricks > Settings > Builder > HTML & CSS to Bricks

  • Enabled (confirm on paste): A dialog appears asking for permission to convert the code on paste.
  • Enabled (no confirm on paste): Bricks converts the code automatically on paste.
  • Disabled

How it Works

When you paste HTML or CSS, the builder identifies the content type and initiates a conversion process.

HTML Conversion

Bricks parses the HTML and maps standard tags to native elements.

  • <section> becomes a Section element.
  • <div> becomes a Div.
  • <h1>–<h6> become Headings.
  • <img> becomes an Image.

Global classes & variables

The converter identifies classes in your code and creates corresponding Bricks global classes & global variables.

  • Mapped Styles: Properties like margin; padding; and typography are applied directly to the Bricks UI controls.
  • Custom CSS: Properties that do not have a dedicated UI control are added to the element’s Custom CSS area.
  • Variables: Any variables defined in :root are converted into Bricks Global Variables.

Security

Bricks will not execute JavaScript or load external stylesheets automatically upon pasting until reviewed.

Any detected scripts or external links are placed inside a Code element. You must manually review, sign, and save these elements before they’re executed.

Notes

  • Refinement: The conversion provides a structural foundation. Because your site has existing theme styles and theme/plugin CSS, the output may require further manual adjustments to match the source perfectly.
  • Permissions: You must have the user permission to “Create global classes” for the converter to generate styles correctly.
  • CSS-Only Paste: If you paste only CSS, Bricks will generate the global classes and variables.