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.
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.
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.
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!
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.
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 conditions, conditions, comparisons, nested conditions, and math checks in nearly any combination.
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.
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.
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.
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.
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.
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.
Style elements with visual styling inputs or CSS … or both! Anything you do in the visual inputs is written to editable CSS and anything you write in CSS is sync’d with the inputs. You’ll never play the “where are my styles coming from” guessing game ever again.
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.
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!