Skip to main content

Title Introducing Aviator

Overview

Aviator is an HTML-focused development environment for WordPress.

Installed as a theme, Aviator prioritizes leverage, portability, and speed-to-build over traditional page-building concepts like "democratization" or "no-code."

These aims aren't unique to Aviator. Environments like Pinegrow, Bricks, and Etch have recognized the shortcomings of no-code workflows. Aviator joins the party with its own unique take, built around a few guiding principles.

Guiding Principles

Leverage

The value of a development environment isn't just what it helps you build with your own skill set. It's what it helps you leverage.

Most builders start you with a blank canvas. Drag, drop, configure, publish. This works well enough, but you're still tasked with doing everything yourself.

You're doing your best work with that toolset, and you're rarely encouraged to leverage work from professional designers.

Here's the problem: you see a well-designed section on the web that you'd love in your project. But you can't just copy it in. That project doesn't share your syntax, your design system, your builder's proprietary format. The code doesn't translate.

There are few places where professional, drop-in layout components actually exist. Tailwind Plus (formerly Tailwind UI) is one example of this ideal in practice. Production-ready components you can copy directly into your project.

Aviator draws inspiration from that workflow.

The big idea: stop reinventing the wheel. We should have a library of conventional, responsive building blocks that drop in with minimal friction.

Aviator is built to accept that code. Paste in a section from Tailwind Plus. Drop in a component Claude wrote for you. Grab a hero from your last project. If it's valid HTML, it works.

Portability

Portability isn't just about moving your own work between pages and projects. It's about inheriting work from designers who've already solved the problems you haven't thought of yet.

Take a list of social media icons. You might not think to add screen-reader-friendly labels to each SVG. But if you're starting from a well-built snippet that already includes those accessibility improvements, you don't have to remember. You just edit it down to fit your needs.

This applies across every design surface: spacing, responsiveness, contrast, semantic markup. When you start from professional-grade HTML, best practices come built in.

You're editing down, not building up.

Aviator makes this easy at every level. Export a single component, a full section, or an entire page layout. Import it somewhere else. Your work compounds instead of resetting with each project.

Video or diagram: Exporting a section from one project, importing to another (20 sec)

Reduced Abstraction

Every development environment has abstractions. The question is how many things are hidden behind a UI that you have to hunt for.

In most builders, editing means clicking through panels to find where a setting lives. "Where do I change the padding? Is it in the block settings? The style tab? The responsive panel?" You're searching instead of working.

Aviator lays everything out in one view. The HTML is your interface. Content, structure, styles: all visible, all editable in one place.

The puzzle analogy

Think of it like assembling a jigsaw puzzle. You could keep the pieces in the box and pull them out one at a time, hunting for corners and edges. Or you could dump all the pieces onto the table.

Dumping the pieces looks like a mess from a distance. But it gives you the information you need to start solving the problem. You can see everything at once.

Aviator dumps the pieces on the table. It might look like more at first glance, but everything you need is visible.

This isn't about "clean code" (somewhat overrated) or eliminating all abstractions (impossible). It's about keeping fewer things hidden.

Speed

Two things make Aviator fast: live feedback and no context-switching.

The preview updates as you type. No saving, no refreshing, no waiting to see if your change worked. The feedback loop stays tight.

And everything lives in one place. You're not jumping between HTML files, CSS files, and a preview window. Edit and preview, same screen, same moment.

The speed shows up in small moments. Cmd-hover to inspect an element, see its utilities, tweak them right there. No panel to open, no menu to navigate.

Every style is presented the same way. Adjusting a utility class won't break something else on another layout because there's no shared stylesheet to accidentally affect.

GIF: Cmd-hover inspect, tweak utility, instant preview (5 sec loop)

Two Ways to Use Aviator

At its core, Aviator is an IDE. Write whatever HTML, CSS, and JavaScript you want. But it also offers a complete system: Aviator CSS, a design system, and a component library.

Use one, the other, or both.

The Base: Your HTML, Your Way

Aviator is a capable development environment. Write raw HTML and CSS. Use Tailwind. Bring your own design system.

Aviator provides the workspace (live preview, split-pane editing, global CSS/JS editors) and stays out of your way.

If you're a CodePen-savvy developer with your own workflow, this is all you need. The docs in Getting Started and Building cover these core workflows.

The Aviator System: A Complete Paradigm

Aviator also offers its own approach, a paradigm shift on par with adopting Tailwind:

  • Aviator CSS: A utility syntax where the class IS the CSS. padding:2rem instead of p-8.
  • Design System: Pre-defined tokens for typography, spacing, and color.
  • Component Library: 50+ sections built with Aviator CSS against the design system.

This system is encouraged but not required. If the syntax feels overwhelming, skip it. You can always come back later.

See The Aviator System to explore this approach.

Who Aviator Is For

Aviator is for developers who know HTML and CSS, and want to use that knowledge directly.

If you're comfortable with code and frustrated by visual builders that hide everything behind panels and clicks, Aviator gives you the directness you're missing. Write markup, see it render, ship it.

If you're building sites (marketing pages, portfolios, blogs, documentation) rather than apps (complex state management, heavy interactivity), Aviator fits that workflow well.

If you value control, portability, and speed, Aviator is built for you.

Getting Started

On this page