etchKit is a free library of components, patterns, and tools that lives inside the Etch builder. You browse, search, and copy blocks directly from a panel in the editor. No admin pages, no settings, no setup.

Requirements #

Before installing, make sure your site meets these minimums:

• WordPress 6.4 or newer
• PHP 8.1 or newer
• Etch page builder installed and active

If your PHP version is below 8.1, the plugin will not activate. You can check your PHP version in Tools > Site Health > Info > Server inside WordPress.

Installation #

1. Download the etchkit folder and upload it to wp-content/plugins/ on your server. You can do this via FTP, your hosting file manager, or by uploading the .zip file directly in Plugins > Add New > Upload Plugin.
2. Go to Plugins in WordPress and activate etchKit.
3. Open any page or template in the Etch builder.

That’s it. There are no settings pages, no license keys, no configuration screens. The plugin is ready the moment you activate it.

Your first component #

Once inside the Etch builder, look at the settings bar. You will see the etchKit icon (a layers icon). Click it to open the library panel.

From here:

1. Browse the list or use the search bar at the top to find a component.
2. Click any card to open its detail view. You will see a wireframe preview and a description of what the component does.
3. Hit Copy JSON. The block data is now on your clipboard.
4. Go back to the Etch canvas, right-click where you want the block, and paste.

Done. The component is on your page, ready to customize.

You can also press Ctrl+Shift+E at any time inside the builder to toggle the panel open or closed without reaching for the icon.

What is in the library #

etchKit ships with three types of items:

Components are standalone UI elements you drop into any page. Things like modals, accordions, tabs, carousels, tooltips, and scroll animations. Each one is production-ready and accessible out of the box.

Patterns are full page sections. Hero blocks, pricing tables, feature grids, testimonial rows. Copy, paste, swap in your content, and you have a finished section.

Tools are interactive utilities that run inside the panel itself. A color swatch generator, a typography scale calculator. You use them right there in the editor without leaving the builder.

Next steps #

Using the Panel #

Learn how to get the most out of the etchKit panel inside the Etch builder.

• Browsing and Filtering — search, filter by type and category, sort your way
• Layout and Views — list vs grid, sidebar vs full-width
• Detail View — previews, viewport presets, Copy JSON
• Tool View — how tools open and work inside the panel
• Settings — export, import, and clear saved data
• Custom Items — add your own components and patterns to the library

Library Reference #

See everything etchKit ships with out of the box.

• Components — standalone UI elements like modals, tabs, carousels
• Patterns — full page sections ready to copy and customize
• Tools — interactive design utilities inside the panel

Developer Guide #

For anyone extending etchKit or contributing to the project.

• Plugin Structure — file tree and what each file does
• REST API — endpoint, auth, caching, error handling
• Asset Loading — when and how CSS/JS is enqueued
• Client-side State — localStorage keys and what they store
• Security — the plugin’s security model
• Adding Items — field reference, JSON structure, badge colours, tool registration