If you build websites with WordPress, you’ve probably felt the friction. Either choose the convenience of a visual builder (fast and easy, but rigid and limited), or go all-in on an IDE (powerful and flexible, but complex and time-consuming).

Etch isn’t just another compromise – it’s a completely new way to build. Created by Digital Gravy, the team behind Automatic.css and Frames, Etch blends the speed and ease of visual layout building with the raw flexibility of an IDE. It’s still in active development, but in less than a year, the team has exceeded all expectations.

Full Markup Access

Etch gives you access to the genetic code of your layout. It truly does.

If you’ve worked with visual page builders, you’ve probably noticed how your content is locked behind walled gardens and hidden wrappers. You’re trapped inside a black box, relying on workarounds or complex hacks to achieve the results you want. The actual code is sealed off, based on the assumption that you need to be protected from it.

Etch flips that completely. It gives you great strength and great responsibility. You get direct, immediate access to your site’s HTML, CSS, and JavaScript right inside the visual interface. You can edit markup directly, paste snippets from another project, or even drop in AI-generated code.

Clean code output, no divception

Most builders overload your DOM with unnecessary divs, auto-generated IDs, and mystery classes. The result? Slower sites, clunky markup, and painful maintenance.

Etch takes the opposite path. It outputs clean, semantic HTML and CSS, structured exactly how you’d write it by hand, and even better. Every element in your layout is readable, streamlined, and lightweight. Watching the DOM is finally a bliss.

Real components

Etch comes with a powerful component engine built for flexibility.

Instead of copying, pasting, and re-styling sections over and over, you build reusable, dynamic components. You can set custom props visually, apply conditional logic, and sync components site-wide as native WordPress patterns. As someone who is passionate about components, I must say that components in Etch are truly next-level.

Dynamic content and loops

Etch lets you pull and display dynamic content directly within your layout, in a crystal-clear visual way.

You can bind dynamic fields from your database, custom fields (from any plugin), or even external data sources like JSON or REST APIs. Need custom post types or fields? You can create and manage them inside the editor without the need to wander endlessly in wp-admin pages.

Etch’s built-in Loop Engine lets you loop through posts, CPTs, taxonomies, users, and more. It supports nested loops, visual conditional logic, and reusable loop configurations. You get full control over dynamic layouts – without writing a line of PHP.

A truly unified environment for your workflow

The basic premise of Etch is that it isn’t just a builder. It’s a unified development environment.

You can design, develop, and manage content without ever leaving the editor. From creating layout templates to defining CPTs and building dynamic logic – it all happens in one clean, modular interface, keeping your workflow momentum intact.

CSS-framework agnostic

Etch integrates natively with Automatic.css (ACSS), the powerful CSS framework developed by the same team. It gives you a serious design advantage with a full set of classes and variables for spacing, typography, color, and more, right out of the box.

But Etch doesn’t lock you in. It’s completely framework agnostic. Thanks to its flexible structure and full code access, you can bring your own system – whether that’s Tailwind, Core Framework, or any custom setup you prefer. Whatever you’re used to working with, Etch gets out of your way and lets you use it.

Native Gutenberg authoring

Etch fully and truly embraces WordPress core.

Everything you build is saved as native Gutenberg blocks or FSE templates. Even better, Etch supports two-way sync: make edits in Gutenberg and they automatically reflect back in Etch.

What you see in the Etch editor is what you see in Gutenberg – and vice versa.

This means zero vendor lock-in. Your content remains portable, editable, and safe. Clients can safely manage content inside Gutenberg without touching your layout.

Great for beginners

Whether you’re a visual designer (like me) stepping into development or an experienced dev seeking a faster workflow, Etch meets you where you are.

For beginners, the real power of Etch is that it teaches you as you go. I’ve learned more about HTML and CSS in a few weeks of using Etch daily than I did in the last year.

Is there a learning curve? Yes. Can you break things? Yup. With great power comes great responsibility. But that’s exactly how you grow – and the satisfaction that comes with knowing what you’re doing is unbeatable.

AI-ready

Etch gives you full access to HTML, CSS, and JavaScript – making it naturally compatible with AI-assisted workflows.

Ask your favorite AI tool (ChatGPT, Grok, Claude, etc.) to generate semantic code – HTML, CSS, JS, and soon even PHP – and paste it directly into Etch. You can then refine it visually or tweak it manually. It’s frictionless.

And this is just the beginning. The Etch team plans to launch its own LLM, directly integrated into the builder. When that happens, we’re looking at a new level of efficiency that could truly change the game.

Shall you invest in EtchWP?

If you’re a WordPress professional building client sites or a beginner looking to break into the industry, then EtchWP should be on your radar.

We’re still early. Dedicate a couple of hours each week to explore it and sharpen your skills. It’s not just a financial investment, but also an investment in your future capabilities and skillset.

Etch v1 is set to launch in September. Until then, there’s a limited-time LTD available for early adopters. It’s still in alpha, but it’s more than ready to get your hands dirty.

Use this affiliate link to support the content creation at Skinny and make sure you join the mailing list for updates and workflow tutorials built around Etch.

See you on the other side!

About me

I’m John, a UI designer based in Greece, where I live with my wife and daughter. My WordPress journey began in 2013 when I designed my first themes. Together with a developer partner, we released them on ThemeForest.

Since then, I’ve worked across the WordPress ecosystem – designing plugin UIs, themes, and client websites. I was an early Elementor adopter in 2017 and created some of the first templates for the platform. Over time, my focus shifted to Design Systems, template and pattern libraries, and design-to-development workflows.

In 2023, at WordCamp Athens, a friend introduced me to Bricks. That discovery led me to Automatic.CSS (ACSS) – and it completely changed my workflow. Since then, I’ve been sharpening my front-end skills, exploring CSS and HTML in depth, and focusing on semantic Figma workflows, bridging the gap between design and clean, ACSS-powered front-end builds.

You can learn more about me and my work at my personal website.

SkinnyWP

SkinnyWP is my hub for documenting and sharing my journey with Etch – a WordPress page builder that’s pushing me (and many others) to rethink how we work in our daily project operations.

For someone coming from a purely design background, diving deeper into how things work under the hood has been liberating. SkinnyWP is where I’ll share design-first resources and workflow ideas, including:

• Components, layouts & template kits
• Practical tutorials
• Figma-to-Etch workflow experiments

Who is Skinny for

SkinnyWP is for anyone who has skin in the Etch game – designers, developers, or anyone who wants to improve their workflow with Etch and ACSS.

This is a design-first space. If you’re looking for advanced CSS techniques or complex JS snippets, this isn’t the place. I keep things as simple as possible, with ACSS as the backbone and design as the primary driver.

If you care about building clean, thoughtful, design-focused sites with Etch – and want to see how Figma can fit into that workflow – you’ll feel right at home here.

What’s Next?

I’ll be sharing resources, templates, and workflow experiments soon. If you’re curious about Etch and want to follow along, subscribe to get updates as I publish new stuff.

Thanks for being here!