After nearly a year of development, plus a lot of testing and support from our great community, Oxygen 6.0.0 is now LIVE. This release wraps up the full Oxygen 6 launch cycle, bringing together the core foundation from the first Oxygen 6 release with everything added in Betas 2 through 5 and the Release Candidate.

Over a decade ago, we built Oxygen Classic on the best technology available at the time. But as the web evolved, our old Angular-based codebase became increasingly unsustainable, holding us back from delivering the innovation you deserve. Rather than continue patching an outdated foundation, we made the difficult choice to rebuild Oxygen from the ground up. The new codebase positions us to move quickly, adapt to future demands, and exceed the expectations of today’s most advanced developers, designers, and creators who demand clean output, direct control over semantic HTML and CSS, and a faster workflow inside WordPress.

Here is what’s new:

Clean HTML and CSS

Build with Clean HTML and CSS

Unlike other builders that abstract design from code, Oxygen lets you work visually while keeping full control over semantic HTML and CSS. The properties panel maps directly to CSS, so what you click is what you’d code.

Another reason why Oxygen’s output is so clean is its fundamentals-first approach. When you stack different components with their own markup and styling conventions, you lose consistency and control. By working with fundamental HTML elements and native CSS properties, you build sites that are easier to maintain, faster to load, and fully yours to customize. This approach also helps you develop real web design skills: understanding structure, layout, spacing, typography, and responsiveness, rather than just learning how to configure someone else’s components.

That said, sometimes you want a header builder or a mega menu without architecting it from scratch. For those situations, the Breakdance Elements and Breakdance WooCommerce add-ons bring over 100 pre-built elements like tabs, sliders, galleries, accordions, and more, directly into Oxygen. They’re lightweight and performance-focused, so you’re not trading speed for convenience.

Just keep in mind that since these elements come from Breakdance, styling them works a bit differently than native Oxygen elements. See the documentation on styling Breakdance Elements for details.

• Breakdance Forms for Oxygen 6: Add the intuitive Breakdance form builder to Oxygen for advanced forms.
• Breakdance WooCommerce Integration for Oxygen 6: Bring advanced WooCommerce tools from Breakdance into Oxygen for custom stores.
• Breakdance Elements for Oxygen 6: Unlock over 130 premium elements from Breakdance, now in Oxygen.

Class System

Work Faster with Classes

Oxygen is class-first. When you style a button, a heading, a section, or any of the Oxygen 6 core blocks, you’re working with a class that can be instantly reused anywhere on your site, so there’s no need to apply the same styling to a new element. Just add that same class, and you’re done. Want to change the typography across all your testimonial cards? Update the class that handles typography in your testimonial cards, and watch every instance update instantly.

For developers, this approach mirrors how you’d write CSS by hand, but with a visual interface that keeps you productive. For designers, it means your design system stays intact without extra effort.

Real CSS, no overrides

Every element is styled with reusable classes from the start. No ID-based specificity hacks, no abstractions. What you see in the properties panel is exactly what gets written to your stylesheet.

Copy & paste selectors

Right-click to copy classes from any element and paste them onto another. Instant style matching.

Organize with groups

Keep your selectors tidy by grouping them into collections. Name and manage them under the Selectors panel.

Drag-and-drop reordering

Reorder your classes by dragging them in the class list, making cascade management intuitive and visual.

Advanced selectors

Target pseudo-elements, child elements, and complex CSS selectors right from the panel.

Dynamic Data Integration

Connect Real WordPress Data

Build content-heavy sites like directories, blogs, and ecommerce stores with real data from the start. Oxygen supports post titles, custom fields from ACF or Meta Box, user data, taxonomy terms, and more.

You can loop through any post type, render ACF and Meta Box repeater fields as lists or cards, and control element visibility with conditions based on user roles, field values, or custom PHP logic. If the data exists in WordPress, you can display it and style it—visually.

ACF & Meta Box support

Built-in integrations for Advanced Custom Fields and Meta Box. Display custom fields without extra configuration.

Repeater fields

Loop through ACF or Meta Box repeater rows to output lists, cards, or sections with each iteration pulling from the correct data row.

Loop builder

Build archives, directories, or custom queries using Oxygen’s loop elements. Filter by post type, taxonomy, or custom WP_Query.

Conditional visibility

Show or hide elements based on user roles, field values, post data, or custom PHP conditions. Create personalized content without code.

Reusable Components

Save Time with Reusable Components

Build reusable components—headers, footers, buttons, sections—once, then update them across your entire site. Change a component in one place and every instance updates instantly. Edit components directly within pages without opening a new tab or reloading the builder.

Component properties

Define which parts of a component can be edited per instance—title, image, link—while the core design stays consistent.

Inline editing

Edit components directly on any page. Double-click to open, make changes, and they auto-save when you exit.

Works with Dynamic Data

Components can pull from posts, custom fields, or loops. They’re not just static blocks but fully dynamic building blocks.

Preview controls

Set preview sizes and backgrounds while editing components to see exactly how they’ll look in different contexts.

Interactions Engine

Add Interactions Without Code

Create click, hover, and scroll-based interactions without writing JavaScript. Build parallax effects, modals, and interactive content that responds to user actions.

Pick a trigger, choose a target (the element itself or any element via CSS selector), and define what happens. Show or hide elements, toggle classes, set attributes, scroll to a section, or even call a JavaScript function for advanced cases. Oxygen’s Interactions engine lets you build modals, content reveals, smooth scroll navigation, and dynamic UI behaviors visually.

• Click actions: trigger modals, animations, or content reveals with simple click-based interactions.
• Scroll effects: create engaging effects like parallax or reveals as users scroll.
• Hover effects: reveal hidden content or add motion with hover interactions.
• Scroll into view: animate elements as they come into view on the page.
• Page load triggers: animate or reveal elements automatically when the page loads.
• Time actions: set delays to create smooth, sequenced animations.
• Scroll to: smoothly navigate users to specific sections on your page.
• Dynamic attributes: modify attributes dynamically to add advanced flexibility.

Powerful Animations

Bring Designs to Life with Animations

Animate elements as they load with effects like fades, slides, and zooms. Add depth with parallax effects and motion tied to scroll progress. Design advanced sequences with delays and precise timing.

Entrance animations

Animate elements as they load with effects like fades, slides, and zooms.

Scroll animations

Add depth with parallax effects and scroll-based color animations for text and backgrounds.

Sequence

Design advanced animations with delays and precise timing.

Sticky

Keep elements in place or animate them dynamically as users scroll.

CSS Variables

Manage Design Systems with CSS Variables

Oxygen supports colors (including gradients), numbers, units, font families, and image URLs as variables. Keep designs consistent with global CSS variables for colors, typography, and spacing. Update your design system with a few clicks and watch changes apply everywhere.

Five variable types

Color, Number, Unit, Font Family, Image URL

Collections

Organize variables by purpose

Override capability

Override variables per-element without breaking global usage

Dynamic data integration

Variables can use dynamic data (e.g., featured image as background)

Element Studio

Build Custom Elements with Element Studio

Create fully custom builder elements with native-level integration. Define controls (text fields, image pickers, toggles, repeaters), write HTML and CSS output using Twig templating, and link output to control values. Works with JavaScript and integrates with the element ecosystem. You can open any existing Oxygen element to see how it was created, then duplicate and modify it. Build elements for your own projects, client sites, or package them as plugins and sell them as Oxygen Add-Ons.

Native-level elements

Build elements that work exactly like Oxygen’s built-in elements. Same controls, same panel integration, same workflow.

Visual control builder

Define content and design controls visually—text fields, image pickers, color controls, toggles, repeaters—without writing registration code.

HTML, CSS & Twig output

Write your element’s output using HTML, CSS, and the Twig templating engine. Link control values directly to your markup.

Build for distribution

Use your elements on personal projects, client sites, or package them as WordPress plugins to sell as Oxygen Add-Ons.

Design Library

Built-in Design Library

Every design element you create on any page is automatically available in the Design Library for reuse across the same site with no manual configuration required. You can also install complete Design Sets that include pages, templates, components, variables, and styles, or import just the parts you need.

Developers and designers can turn any Oxygen site into a shareable Design Set, distribute it across multiple projects, or sell it as a commercial layout pack.

Complete Design Sets

Install kits with pages, templates, components, variables, and styles. Everything to jumpstart a project.

Insert sections or pages

Import individual sections, full pages, or single elements from the Design Library into any project.

Build for clients

Create client-ready starter kits that include your design system, components, and layouts.

Sell your designs

Package your designs and sell them as commercial layout packs built specifically for Oxygen.

Dynamic Loop Elements

Build Archives and Directories with Loop Elements

Loop through WordPress posts and terms to build archives, directories, and dynamic content displays. The Term Loop Builder adds support for taxonomy terms, categories, and custom taxonomies with controls for term count and empty term inclusion. Both Post and Term Loop Builders integrate with Oxygen’s Dynamic Data system and work with ACF and Metabox custom fields.

Loop Elements support masonry layouts, giving you full control over dynamic, responsive grids. No third-party plugins required. Items flow naturally into a staggered structure, handling uneven content heights and irregular media to create tightly-packed, gap-free layouts.

Post Loop Builder

Display lists of posts, pages, products, or custom post types using reusable Components as templates.

Term Loop Builder

Loop through categories, tags, and custom taxonomies with controls for term count and empty term filtering.

Flexible Layouts

Choose from list, grid, slider, or masonry layouts. Each with full customization options.

Custom Queries

Use visual query builders or write custom PHP to fetch exactly the posts you need.

Built-in Pagination

Traditional page numbers, “load more” buttons, or infinite scroll. All included out of the box.

Built-in Filters

Add a Filter Bar for visual, animated filtering on the front end. No additional plugins required.

Code Editor

A Supercharged Code Editor

Work with a modern code editor across all applications—CSS, PHP Code element, Element Studio. Features include:

• Emmet support: type h10 in CSS and it expands to height: 10px; type ul>li*3 and get a complete list
• Variable and selector autocomplete: type -- to access CSS variables
• Twig variable support (via {{) and Twig tags (via %%) in Element Studio
• CodeMirror 6 with intelligent autocomplete, linting, error checking, automatic formatting, and bracket matching
• Built-in color picker for CSS variables

Performance

Faster Performance

Backend optimizations make Oxygen sites load faster:

• PHP rendering pipeline caches element metadata and skips unnecessary work
• CSS cache files are only written when they contain content and are minified before writing

Workflow Improvements

Workflow Improvements

Refinements across the builder make building faster and more intuitive:

• Improved CSS Grid controls: redesigned grid controls make complex layouts more intuitive and flexible, with visual and semantic structure control without manual CSS calculations
• Add elements by HTML tag: type an HTML tag (h1, section, article) in the Add panel and press Enter
• Improved spacing controls: “Apply All” and “Apply Opposite” actions let you sync margin and padding values quickly; double-click to clear values
• Default units: set a preferred unit (px, em, %, rem) once in Preferences and it becomes the default across all controls
• Design Sets import Variables and Selectors: components are properly assigned to dependent elements during import
• Style indicators with color coding: purple (current class), yellow (other class/breakpoint), red (overridden)
• See inherited values across breakpoints: controls display inherited values from previous breakpoints as placeholders
• Variable autocomplete while typing: CSS editor provides variable suggestions even during incomplete syntax
• Empty custom attributes allowed: output intentionally empty attributes like “disabled” or data attributes for semantic HTML
• Toggle panels from keyboard: Structure (CMD/CTRL + Shift + E), Variables (CMD/CTRL + Shift + V), Selectors (CMD/CTRL + Shift + G)
• Auto-fix broken permalinks button: flushes WordPress rewrite rules from within Oxygen

Bug Fixes and Stability Improvements

Stability and Polish: Fixes from Beta to Final Release

Fixes and improvements across the beta and RC period, including:

• Template Content Area element (replacement for “Inner Content” in Oxygen Classic)
• UI enhancements: improved contrast for better readability; variable values with distinct colors; larger custom unit input fields
• Breakdance Elements & Breakdance Forms: global styles no longer conflict with Oxygen elements
• Breakdance Elements: JavaScript errors resolved
• Design Library functionality restored
• Component preview sizing improvements
• Navigation and template handling corrections
• Element dependency synchronization fixed
• Image sizing and dynamic data support improved
• Post loop builder and pagination fixes
• Gallery and tooltip element improvements
• Menu active link detection moved to server-side for better performance
• API keys now available in Oxygen Settings
• Element identification on hover showing icon and name
• Drag-and-drop class reordering
• Unified menus and refined unit controls
• Breakdance Forms submissions now display in WordPress Admin
• CSS Control adds current selector by default
• Conditional control fields work across breakpoints
• Improved error identification showing problematic plugins/hooks
• Enhanced Variables performance and availability
• Variable Overrides work with Dynamic Data Images
• Components properly assigned when importing Design Sets
• Align controls display correctly for inline-grid elements
• Custom Fonts no longer cause 500 errors
• Parent element properly selected after exiting inline Component editing
• Hex code input retains cursor position when adding variable colors
• Keyboard Shortcut Modal opens correctly
• Custom names display consistently in structure panel
• Media Size and Focus Point inputs properly sized
• Shortcode element includes text input field
• WooCommerce: Password Hint displays correctly; Single Products dropdown arrow displays properly; Shop Page element preset errors resolved
• Class Editor automatically activates first available class; auto-creates classes with sensible naming
• Duplicating classes activates immediately and focuses rename field
• Faster Dynamic Data selection with keyboard search
• Base-breakpoint utility CSS outputs once instead of leaking into other breakpoints
• Short-circuited Twig rendering for templates without tokens
• Backdrop tracks scroll and resize smoothly during inline editing
• Content commits immediately upon Save, updating headers/menus instantly
• Ghost titlebar uses correct SVG display
• Template Content Areas draggable in Structure panel
• Lightbox settings bind to frontend dynamic meta fields
• Template Previews dropdown includes Pages
• Element Studio controls respect dark mode
• The Events Calendar frontend assets properly enqueued
• Partner Discounts menu in WordPress Admin
• Grid alignment icons for stretch, space-between, space-around
• Text Link component supports direct inline editing
• Opacity property accepts CSS variables
• Border Radius variable chip displays correctly
• Object Position outputs valid CSS to frontend
• Empty transition values no longer cause builder errors
• Custom and Google fonts load consistently on frontend
• Auto-class generation works when margin or padding is first modified property
• Inherited value indicators display for Gap and Grid alignment properties
• Oxygen Components preview correctly in Gutenberg editor
• Components with Accordions, Tabs, or Gallery lightbox work independently when placed multiple times on same page
• Stacking indicator improvements: drag-and-drop hints match actual layout in grids and wrapped sections
• Security fix: privilege escalation vulnerability patched for builder access permissions
• Breakdance Elements: internationalization, visual refinements, element visibility management

Thank You to Everyone Who Tested Oxygen 6

Oxygen 6 got better because the community tested hard, reported issues, and pushed for better workflows. Thank you for helping shape the final release.

What’s Next

Now that Oxygen 6.0 Final is out, we can build new features on top of a stable foundation.

If you want the full story and deeper dives into specific features, you can also reference the launch articles and the full Beta/RC release posts:

• Introducing Oxygen 6
• Oxygen 6.0 Beta 2
• Oxygen 6.0 Beta 3
• Oxygen 6.0 Beta 4
• Oxygen 6.0 Beta 5
• Oxygen 6.0 RC 1

Head over to the launch portal to know more about Oxygen 6, get answers to some common questions, learn about our philosophy, upcoming price changes and more.