The WordPress builder that says yes to code.
Aviator is a front-end development environment for WordPress. No blocks, no bloated UIs, just the freedom to build exactly what you want in one centralized HTML/CSS/JS dashboard.
Imagine a CodePen for Wordpress, with a Tailwind-esque utility syntax to make composing professional layouts a breeze.
Done with the Block Editor? You’re in good company.
If you’re a front end WordPress designer/developer who thinks in HTML, CSS, and JS, you’re probably sick of having to root through poorly-designed, ‘democratized’ interfaces to build and style your layouts (but you don’t want to architect an entire custom theme in PHP just to escape settings-forms hell).
Some of us just want to code things out. We want to leverage code that other professionals (or LLMs) have written for us, and we want to work closer to the metal, with the fundamental languages of the web, and with as few abstractions as possible.
Say hey to Aviator.
Back to basics
What you see is what you get.
No more cobbling together dozens of sovereign, limited-scope blocks, and no more funky no-code grouping abstractions to manage (like rows, columns or containers).
With Aviator, you just stack HTML snippets on top of each other (just like in an HTML document). Need to sprinkle some CSS in? No need to Customize, your global CSS is right there.
Expressive utility class syntax
Like Tailwind, but easier to pick up.
Utility classes don’t just save you the headache of naming every element that you create; they drastically increase the portability of your code. But frameworks like Tailwind CSS require a build process, making them non-starters in a standard WordPress environment.
So I rolled my own CSS framework that writes utility-class rules for you as you type them in HTML. No build process required, and the entirety of CSS is at your disposal. It’s like magic.
Components library
Build layouts instantly.
Leverage Aviator’s professional design system (type, color, spacing) to throw layouts together in seconds.
Cobblers children have no shoes? Need a responsive personal website? It’s already done, just select a layout, edit it down, and launch.
Section-specific custom fields
Make your HTML editable with fields.
If you’re collaborating with non-coders, you can use Aviator’s node-specific Fields system to hydrate text, imagery, and code into your HTML.
Extract any text, image, or code snippet from your markup into a field.