HTML to Bricks Builder: The Fastest Way to Rebuild a Section (2026)
Bricks has no HTML import. Here are the four ways to get an existing website section into Bricks Builder, what each does to your global classes, and which one to use.
Soraia
Founder, PocketUI
Bricks Builder cannot import raw HTML as editable elements. The four routes are rebuilding it by hand, dropping the markup into a Code element, converting a Figma file, or capturing the section from the live page and pasting it in as native Bricks elements. Only the last two keep the structure editable in the builder, and only the last one avoids needing a Figma file that does not exist yet.
Bricks Builder is a favourite among people who care about output: it produces lean markup, it gives you real classes, and it does not wrap everything in six layers of divs. That is exactly why importing an existing website into it is awkward. Bricks wants structure, and raw HTML from someone else's site arrives without the structure Bricks needs.
There is no HTML import. Here is what you actually have.
1. Rebuild it by hand
Read the original in DevTools, then build it again in Bricks: containers, blocks, headings, buttons, naming global classes as you go.
Best output, slowest route. You get exactly the class structure you chose. You also spend an hour or more per section copying values across, and small things go missing: the hover transition, the tablet padding, the exact letter spacing.
Worth it when the section is simple, or when you were going to redesign it anyway.
2. Drop it into a Code element
Paste the markup and its CSS into a Code element.
It renders. It is not Bricks. The structure panel shows one item. There are no global classes to reuse, the Style controls have nothing to act on, and the breakpoint controls do nothing because your pasted CSS is deciding the layout. Anyone editing it later is editing code, not using the builder.
Fine for something that ships today and is never touched again. A problem on a client site.
3. Convert a Figma file
Several tools take Figma frames into Bricks, and they work well when the design starts in Figma.
For an existing website the route becomes website, then Figma, then Bricks. Getting the page into Figma usually means an HTML-to-Figma plugin, and those produce absolutely positioned frames. Absolute positioning is the worst possible input for a flow-based builder, so you end up fixing two conversions.
4. Capture the section from the live page
Read the page directly, write Bricks' own structure, paste it in.
The source material here is better than a redrawn Figma file: a working website already has real CSS, real hover states and real media queries. Nothing has been interpreted by a designer's hand yet.
The thing to check: global classes
If you take one thing from this guide, take this. The difference between a conversion you keep and one you throw away is whether the styles landed as global classes or as one-off ID styles.
A conversion with one-off styles looks identical on the canvas. Then a client asks to change the button colour, and instead of editing one class you edit it on eleven elements. Multiply that across a site and the time you saved is gone.
So after any conversion, open the class manager. If you see a handful of sensible classes, good. If you see a long list of generated names used once each, you have a maintenance problem, not a head start.
Doing it with PocketUI
PocketUI is a Chrome extension that saves parts of live websites as real code: structure, authored CSS, hover and focus states, breakpoints. The same capture can go to Figma as editable layers, out as HTML, Tailwind, React or Vue, or into a page builder.
- Open the page with the section you want.
- Capture it. Drag over the section in the extension.
- Copy it for Bricks. The capture becomes native Bricks elements, with repeated styles turned into global classes.
- Paste it into Bricks Builder. It appears in the structure panel as elements you can select and restyle.
- Check the breakpoints before building on top of it.
- Replace the content with your own.
Honestly: the Bricks export is not live yet. Figma and the code exports work today; Bricks, Elementor, Webflow and Shopify are in development and go to early-access members first. If you need this today, route 1 is the one that produces something worth keeping. If route 4 is what you want, put your name down.
A word on copying
Layouts are things the industry learns from, and moving a client's existing site into Bricks is ordinary work. The text, the photographs, the logo and the brand colours belong to whoever made the original. Rebuild the structure, replace the content.
Which route
- Simple section, or redesigning anyway: build it by hand.
- Needed today, never edited: Code element, and accept the trade.
- Design already in Figma: a Figma to Bricks converter.
- Design exists as a live website, and you want global classes: capture it from the page.
Frequently asked questions
Not as editable elements. Bricks imports its own JSON templates, and it has a Code element that will render raw markup. The Code element works, but the structure panel sees one block, so you cannot restyle the heading or set a different padding on mobile from the builder.
A global class in Bricks is a named set of styles you can apply to many elements and change in one place, the same idea as a class in CSS. A conversion that gives every element its own one-off ID style will look right and be miserable to maintain. A good conversion turns repeated styles into a handful of global classes.
Yes, several tools convert Figma frames into Bricks structures. They are a good path when the design starts in Figma. For an existing website you would have to import the page into Figma first, and that import is the step that tends to produce absolutely positioned frames which convert badly into Bricks' flow layout.
Only if the tool reads them. Bricks holds hover styles per element and per-breakpoint values for its own breakpoints, so a conversion has to write them there. If the styles stay in a pasted stylesheet instead, the builder's own controls will not touch them.
Yes, that is built in: copy an element in one Bricks site and paste it into another, or save it as a template. The problem this guide solves is different, getting a section from a site that was never built in Bricks.
Keep reading
Figma to Elementor vs Website to Elementor: Skip the Figma Step
If the design you want already exists as a live website, going through Figma adds a lossy conversion for no reason. When the Figma route is right, when it is not, and what each one costs you.
Read ExportHow to Convert a Website to Elementor (HTML to Elementor, 2026)
Four ways to turn an existing website section into Elementor, from rebuilding it by hand to pasting real widgets. What each method keeps, what it breaks, and when to use it.
Read ExportHow to Import Any Website Section into Webflow (2026)
Webflow has no HTML import. Here are the four ways to get an existing website section onto the Designer canvas, what each one does to your classes and breakpoints, and which to use.
Read