When you need a new Etch component that’s similar to one you already have, your options are limited. You can detach the instance from the component, but that strips out your props and there’s no way to copy a prop setup. So in practice, you’re starting from scratch with your props, plus you will have to copy over all the css rules into new classes, etc…

The Etch Component Clone Utility fixes that. It forks the component, keeps your HTML structure and props intact, and renames all your CSS classes and JS references in one shot, with BEM auto-detection so you only have to update the block name and everything else follows. The result is a fully independent component that’s ready to build on, not clean up after.

Clone vs. Duplicate

I’m using the word “clone” here, but it’s worth clarifying what I mean by that, because clone and duplicate sound similar but behave very differently. Duplicating a component in Etch makes an identical copy that shares the same markup, styles, and scripts as the original. What this plugin does is closer to a fork, a fully independent copy with its own name, key, props, and renamed CSS and JS selectors. There’s no link back to the original, so the two components won’t collide and changes to one won’t affect the other.

How to Clone a Component

Once the plugin is active, a git fork icon button appears in the Etch component panel for every component.

Here’s the workflow:

1. Click the git fork icon in the component’s sidebar panel.
2. Enter a new component name, and optionally edit the auto-generated key.
3. If the component uses BEM-style CSS classes, the rename fields will be pre-populated with the detected selectors. If not, adjust each class as needed, or check Skip Selector Rename to clone without touching any selectors.
4. Use the JS Preview and CSS Preview links to see a diff-style view of exactly which lines will change before committing.
5. If the component contains nested components, a step-through wizard walks you through each one, letting you rename or skip independently.
6. Click Clone Component to generate the new JSON.
7. Click Copy JSON and paste it directly into Etch.
8. From there, you are free to make whatever changes you need without affecting the other component!

BEM-Aware Selector Renaming

When the Etch Component Clone Utility detects a BEM naming pattern in your component’s CSS, it automatically groups the block, elements, and modifiers together. You only need to update the block name and the elements and modifiers update to match. You can also rename individual selectors manually if you need more control.

A Note on Enhanced Pattern Manager

If you’re already running Enhanced Pattern Manager (EPM), you don’t need this plugin. Enhanced Pattern Manager ships with the same Clone Component feature built in. Only install the Etch Component Clone Utility if you want the Clone Component feature on its own, without Enhanced Pattern Manager.