You can add your own components and patterns to the etchKit library. Custom items live alongside the built-in ones and work with every panel feature: search, filters, sort, starred, and recent.
Creating a custom item #
Click the + button in the panel header. A form opens with the following fields:
Name (required) is the display name shown on the card and in the detail view. Pick something clear and descriptive.
Type sets whether this is a Component or a Pattern. This determines which type filter it appears under. You cannot create custom tools.
Category controls which category filter the item appears under and the colour of its badge. Use an existing category slug (like layout, media, navigation) to match the built-in badge colours, or use a new slug for a neutral-styled badge.
Version is optional. If set, it appears as a small badge in the detail view. Useful if you iterate on your custom items and want to track which version you are using.
Description is a short text shown on the card and in the detail view. Keep it to one or two sentences describing what the item does.
Tags are comma-separated keywords. The search input checks tags alongside the name and description, so adding relevant tags makes your item easier to find. For example, a custom contact form component might have tags like form, contact, email, cta.
Preview URL is an https:// URL that gets embedded as an iframe in the detail view when using full-width mode. Point this to a live demo of your component if you have one hosted somewhere.
Docs URL is a link for the Docs button in the detail view. Opens in a new tab when clicked.
Wireframe SVG accepts raw SVG markup. This renders as the wireframe preview on the card and in the sidebar detail view. If you leave it empty, etchKit uses a placeholder image.
Block JSON is the block data that gets copied to the clipboard when you hit Copy JSON. Paste your Etch block JSON here. If you leave this empty, the Copy JSON button is hidden and the Docs button becomes the primary action instead.
How custom items behave #
Custom items show up in the library mixed with built-in items. The only visual difference is a Custom badge in the detail view.
Everything else works the same. You can star them, they appear in recent history, they count towards “Most used” sort, and they respond to every filter and search query.
Custom items are stored in your browser’s localStorage, scoped to the current site. That means they persist across sessions but do not sync between browsers, devices, or WordPress installations. If you need to move them, use the export/import feature in Settings.
Editing a custom item #
Open the custom item’s detail view. You will see an Edit button in the action bar that is not present on built-in items. Click it to reopen the form with the current values pre-filled. Make your changes and save.
Deleting a custom item #
In the custom item’s detail view, click the Delete button. The button label changes to a confirmation prompt for 3 seconds. Click again within that window to confirm the deletion. If you do not click again, the button reverts to its normal state and nothing happens.
Deletion is permanent. The item is removed from localStorage immediately. If you think you might want it back, export your custom items first through Settings.
Limits #
Custom items are stored entirely in localStorage. There is no server-side storage, no database, no file created on disk. This keeps things simple but comes with a couple of practical limits:
- If you clear your browser data or use the “Clear saved data” option in Settings, your custom items are gone
- localStorage has a size limit (usually around 5MB per site). You are unlikely to hit this unless you paste very large SVG wireframes or massive block JSON strings into dozens of items
- Custom items do not sync. Each browser on each device has its own independent set
For anything you want to keep safe, export regularly through Settings.
