Free tool

Oxygen → Bricks Converter

Moving from Oxygen to Bricks? Paste your Oxygen structure and convert it to Bricks — free.

Switching builders shouldn't mean rebuilding every page. This free converter turns your Oxygen Classic (4.x) export into a native Bricks template — structure, headings, images, links, your CSS classes (rebuilt as Bricks global classes) and per-element styles, plus your tablet and mobile breakpoint overrides mapped to Bricks' own responsive settings. Paste your Oxygen JSON, convert, download the template and import it in Bricks (Templates → Import) — no plugin required.

🔒 Conversion runs in your browser. To improve conversion quality we keep an anonymized structural copy of the input — all text is scrambled and URLs removed before anything leaves your browser. Details.

Oxygen 4.9 JSON Input

No Oxygen JSON yet? In the Oxygen builder, right-click an element → Export, then paste the JSON here.

The output is a Bricks template JSON. In Bricks go to Templates → Import, upload (or paste as) the downloaded file, then insert the template on any page.

Heads-up: media isn't sideloaded — external image URLs keep pointing at the source site until you re-upload them into your Media Library.

Optional: your site's CSS

Oxygen pages often size fonts and set colours with var(--…) values whose definitions live in your site stylesheet, not in the page export — on a fresh Bricks install those are undefined, so headings can collapse to tiny defaults. Paste your stylesheet(s) here (or fetch them below) and we'll add the referenced custom properties as a :root block on the first section. Anything still undefined is listed in the notes.

Bricks Template JSON

From the makers of ready→made

Designing in Figma?

ready→made converts Figma designs straight into clean code for Oxygen, Gutenberg and HTML — a real layout engine, not AI guesswork.

See ready→made →
FAQ

Good to know.

Is this really free?

Yes — the Oxygen→Bricks converter is free to use.

What gets converted?

Structure and nesting (sections, divs, columns), headings with their tags, text, images with src and alt, link URLs, buttons, backgrounds, per-element spacing and typography, flex and grid layout, your CSS classes (rebuilt as Bricks global classes), custom CSS, and your tablet/mobile breakpoint overrides as Bricks responsive settings.

What can't be converted?

Anything without a Bricks equivalent — e.g. Oxygen's page-width breakpoint, dynamic PHP/code blocks, and global-palette color references that aren't defined inside your export. Nothing is dropped silently: every skip is listed in the conversion notes under the output.

Can I convert a Figma design to Bricks?

Start from clean HTML with ready→made, then bring it into Bricks.

More free tools

Other converters in the suite.

Ready?

Build a real site from your Figma file — in minutes.

menu