Etch WP
Build WordPress Websites Visually With None of the Downsides of Traditional Page Builders
Etch is a next-era visual development environment that gives you the power to build scalable, maintainable, accessible WordPress sites visually, with no tradeoffs.
Features Built for You, Not Aunt Carol.
Etch is the first visual development environment designed for people who know what they’re doing (or want to learn). Aunt Carol can stick with the other page builders.
Full data liberation & simple client editing.
Etch automatically authors everything you build to core/native Gutenberg blocks in the WordPress block editor and enables two-way sync so edits made in the block editor automatically sync back to Etch. This fully liberates your data from Etch while providing a native WordPress editing experience for clients.
Gutenberg Engine
Global structure and styling control.
Create components with a single click. Edit your components inline on the canvas (no magic areas). Create and map “props” in seconds. Create variants with conditional logic. Components save as synced patterns and render on the front-end with zero extra DOM elements. Amazing.
Component Engine
Loops on loops on loops.
Loop posts, taxonomies, users, raw JSON data, and REST API data. Nest loops. Pull loop data from any loop into another loop. Use conditional logic in loops. Save loop configurations. This is what loops look like in Era 4!
Loop Engine
Grab anything from the database dynamically.
Etch is engineered for building modern, dynamic websites. Whether you’re looping or templating, you’re able to pull data dynamically from the WordPress database, the block editor, and custom fields.
Dynamic Data Engine
Show or hide anything based on conditions.
Use Condition Elements and logic strings to control the rendering of any element or its children or to control attribute values and even inline styles. Full support for compound {if} conditions, {else} conditions, comparisons, nested conditions, and math checks in nearly any combination.
True Conditional Logic Engine
Write, tweak, or paste the code.
Finally, full HTML code access! See it, touch it, and fully manipulate it. Nothing is off-limits! Write it by hand, copy and paste it from any external source, or magically manifest it with Emmett. Don’t want to see it–you can hide it. You’re in full control.
HTML Code Editor
Styling that lives with your elements!
Etch stores element styling with the element itself and only outputs styling for elements that exist on the page. This is the best way to keep styling organized on a site and only output critical CSS. Etch also uses a “selector-free” styling system that makes styling unbreakable when classes are renamed.
Element-Based CSS
Javascript that lives with your elements!
Etch uses element-based JS –– Javascript that lives with the thing it controls. This retains the portability and shareability of any pattern or component that requires JS and makes it easy to find and edit your JS.
Element-Based JS
Selectors that write and attach themselves.
Once you build the structure, “Auto-BEM” can automatically attach BEM-style selectors to every element with a single click for maximum scalability and maintainability in your styling and unprecedented efficiency in your workflow.
Auto-BEM
Manage Content Properly With CPTs
Custom Post Types and Custom Fields are mandatory for proper content management in the modern era. Thankfully, Etch lets you create them on-the-fly, without leaving the page you’re currently building, and instantly loop them or template them.
CPTs & Custom Fields
Use any valid CSS selector, not just classes.
Etch is the only visual development environment that allows you to simultaneously add classes, attributes, and attribute values in a single action. You can then proceed to choose which things have styles applied to them (including attributes) with element-level CSS. Wait until you see how insanely powerful this is.
Attribute System
A brand new approach to visual styling!
Our innovative CSS Quick Actions panel gives you all the benefits of traditional CSS styling panels with none of the downsides. Etch will write your CSS for you, but you still have access to it and everything stays organized in one place (no style panel inception). It’s an amazing new CSS authoring experience that completely replaces the need for traditional styling panels.
Quick Actions for CSS Styling
Fully tokenized media and container queries
Never guess breakpoint or container query values ever again. Freely use multiple queries across different selectors in the same component without fear of breakage or disconnection. Etch allows you to define and manage custom media and container queries and use them across pages, templates, patterns, and components.
@custom-media
No junk code, no divception, no nonsense.
Finally — clean, semantic code! No unnecessary wrappers, attributes, auto-generated IDs, or auto-generated classes. This is quite possibly the cleanest and leanest code output of any visual development environment in existence.
Clean Code Output
Work exactly how you prefer to work.
Nearly every panel can be moved into a different drop zone. Sidebars support multiple panels and multiple sizes, and your layout preferences are stored for maximum consistency. In a matter of seconds you can achieve the exact configuration you’ve always wanted!