The Editor

The visual editor for professionals

Agent-first, never agent-only. Everything your agent builds lands in a real editor — real CSS, real classes, real structure — so you can take over any time.

Flexbox & Grid

Native controls for both, not a proprietary column system.

Sizing & spacing

Width, height, margin and padding in any unit or variable.

Structure panel

The layer tree matches the DOM exactly — no wrapper divs.

Typography

Families, weights, fluid sizes, line height and letter spacing.

Backgrounds & borders

Gradients, images, overlays, radii and outlines.

Effects

Shadows, filters, blend modes and transforms.

Custom breakpoints

Your own device widths, with any property changeable at each.

Semantic elements

Choose the real HTML tag — header, main, article, nav.

Code blocks

HTML, CSS, JavaScript and PHP where the visual tools stop.

Or just ask AI

Describe the change and your agent edits the real elements and properties — the same ones you'd adjust by hand in the canvas.

Your agent MCP

You

> make the hero stack on mobile and tighten the heading spacing

Claude

✓ .hero set to flex-direction: column below 768px

✓ Heading margin reduced to space-3

✓ Image moved above the copy on mobile

✓ Desktop and tablet unchanged

Design systems

A design system that keeps the whole site consistent

Define your styles and building blocks once, then reuse them everywhere. Variables, components and selectors work together, so one change reaches every page it should — and nothing drifts as the site grows.

Variables Global tokens for color, type and spacing.

Components Build it once, reuse it everywhere.

Selectors Real CSS classes, states and custom selectors.

Import & export

Export your tokens as JSON and import them into every new site you build.

Overrides

One class, twelve cards, each with its own background image or accent color.

Real CSS

Tokens compile to CSS custom properties, usable in devtools and your own stylesheets.

Properties

Let each instance set its own text, image, link or even query loop.

Optional parts

Toggle child elements per instance, so one card covers with and without a button.

Edit in place

Double-click a Component on the page to edit it. Changes reach every instance.

Class-first

Style classes, not one-off elements. Edit a class once and every element updates.

States

Style hover, focus, active and every other state visually.

Custom selectors

Target descendants, siblings and complex selectors from the panel, no CSS to write.

Interactions & animations

Sites that respond, and move beautifully

Clicks, hovers and scroll drive real behavior; entrance effects, scroll sequences and staggered timing make it feel alive. All built visually, with full control over timing and easing — and no JavaScript to write.

Interaction Hover

Hover to lift

Cards rise and cast a shadow as the pointer arrives — try it.

Menu +

Interaction Click

Click to toggle

Open, close and toggle any element. No JavaScript to write.

Interaction Hover

Hover to swap

Cross-fade between two states — media, colors or content.

Press K

Search pages…

Interaction Keyboard

Keyboard shortcuts

Bind any key to an action: open a search, a menu or a modal. Press K to try it.

Animation Scroll into view

Entrance effects

Fade, slide and scale elements in as they enter the viewport.

Animation Scroll

Scroll sequences

Move, rotate, scale and recolor as the visitor scrolls.

Animation Stagger

Staggered timing

Sequence a group so each item follows the last, on any easing.

Animation Parallax

Parallax layers

Layers that move at different speeds for real depth as the page scrolls.

Or just ask AI

Describe the motion you want and your agent builds it as a real, editable interaction — open the panel afterwards and retime anything.

Your agent MCP

You

> reveal the gallery images with a staggered slide-up as they scroll into view

Claude

✓ Scroll-into-view trigger added to .gallery__item

✓ translateY(24px) → 0 with a fade, 420ms ease-out

✓ 80ms stagger across the nine items

✓ Honors reduced-motion preferences

Dynamic data

Build websites with a real backend

Most visual builders stop at the page. Oxygen goes further: you shape how the content itself is stored and managed, then design how it appears — and the two stay connected.

Fields Bind any element to ACF, Meta Box or ACPT fields — no bridge plugin, no shortcodes.

Conditions Show, hide and vary elements based on the content, the visitor or the context.

Loops Design one item and render every post, term, user or repeater row from it.

Any element, any value

Headings, body copy, images, links, buttons, colors and backgrounds can all read straight from a field — so one template renders every product, listing or profile correctly.

Every field type

Text, images, galleries, repeaters, relationships, flexible content and options pages appear in the picker under their real names, from ACF, Meta Box or ACPT.

Fallbacks & formatting

Set a default for when a field is empty, and format dates, numbers and currency right at the binding — no helper functions or template code required.

Content conditions

Show or hide by post type, taxonomy term, field value, author, publish date or parent page — hide the Sold badge until the field says sold, or feature only this month's posts.

Visitor conditions

Respond to who's looking: logged in or out, user role, referrer, URL parameter, device and browser. Show members their price and everyone else the sign-up prompt.

Your own conditions

Register a custom condition in PHP and it appears in the same picker as the built-ins, so the rest of your team can use it without touching code.

Query anything

Loop over posts, custom post types, taxonomy terms, users or your own WP_Query — filter, sort and limit it visually, then style a single item and let the loop render the rest.

Repeater rows

Course modules, spec tables, itineraries and team members loop straight from a repeater field, nested rows included, so editors add content without touching the design.

Pagination & empty states

Numbered pages or load-more, plus a dedicated design for when nothing matches — so an empty filter shows a helpful message instead of a blank space.

Or just ask AI

Describe the content you need to manage and your agent sets up the post type, the fields, the loop and the template as real WordPress structure.

Your agent MCP

You

> add a property listings section with price, beds, gallery and a neighborhood filter

Claude

✓ Property post type registered with 14 ACF fields

✓ Listing card built as a component

✓ Query loop bound, 12 per page, newest first

✓ Single-property template targeted to the post type

Word of mouth

“The one-to-one CSS properties panel, clean HTML structure, and class-first workflow make it feel like coding — without the hassle. If you care about building the right way, Oxygen is the best choice.”

Ovidiu Maghetiu Founder, WPCodeBox

1 / 3 ← →

“Oxygen is simply the best tool hands down to develop WordPress websites with pixel perfect responsiveness. The ability to control every aspect of how a site displays on any device is unmatched.”

Thayne Rigby V-Squared Creative

2 / 3 ← →

“Oxygen is by far the easiest builder I've used from a developer standpoint. With Oxygen I can slap a custom script in and make it do exactly what I need.”

Michael Upton Kilo Delta Web Solutions

3 / 3 ← →

Questions

Questions about the editor

Do I need to know CSS? +

No, but it helps. Every control maps to a real CSS property, so knowing CSS makes you faster — and using Oxygen teaches you CSS rather than a proprietary abstraction.

Can I edit what my agent built? +

Completely. Agent-built pages are native Oxygen elements with real classes and variables. Open the canvas and change anything, or keep prompting — there is no export step.

Which AI agents work with Oxygen? +

Any agent that supports MCP, including Claude, Codex, Gemini, Cursor and more. Your agent edits the same elements, classes and variables you use in the canvas.

Is the HTML clean? +

Yes. The structure panel matches the DOM exactly, with no wrapper divs, and you choose the real HTML tag for each element — header, main, article, nav.

Does Oxygen support Flexbox and CSS Grid? +

Both, natively, with visual controls. There is no proprietary column system to work around.

Can I add my own code? +

Yes. CSS, JavaScript and PHP sit alongside the visual tools, including a PHP code block element.

Which custom field plugins does it work with? +

ACF, Meta Box and ACPT, natively. You don't need a bridge plugin or shortcodes. Every field type appears in the picker under its real name, including repeaters, relationships and options pages.

Get Oxygen

Build it your way with Oxygen.

$199.50 once — unlimited sites, no renewal

Not per year, not per site, not per seat. 60 day money back guarantee.

Get Oxygen Try it free first