Tools are different from components and patterns. Instead of copying JSON to paste into the canvas, tools open as interactive utilities right inside the etchKit panel.

How tools open #

Click a tool card in the library and it takes over the panel. The search bar, filters, and card list slide away, and the tool fills the entire space. You stay inside the etchKit panel the whole time.

To go back, click the back arrow in the tool header. You return to the library list with your filters and scroll position intact.

Layout behaviour #

In sidebar mode, the tool content and info panel scroll together as one block. The action buttons stay sticky at the bottom.

In full-width mode, the tool body fills the left pane and the info panel sits fixed on the right, matching the same split layout as the detail view.

Available tools #

etchKit currently ships with two built-in tools:

Color Swatches lets you pick a base color and a CSS variable name, then generates a full palette of semantic shades and transparency steps in the ACSS style. Useful when you need to create or extend a custom color scheme without leaving the builder.

Typography Scale calculates a modular type scale from a base size and ratio. You can preview live text at each step and copy the output as CSS custom properties or Tailwind config.

Good to know #

Tools are built-in only. You cannot create custom tools through the panel UI. If you want to add a new tool, that requires editing the plugin code directly. See the Developer Guide for details on registering tools.

Tool state (like the last color you picked in Color Swatches) is saved in localStorage and restored the next time you open the tool.