etch

Etch is a JavaScript library for building user interface components — the buttons, panels, and other visual elements that make up a web or desktop application. It was originally created by the Atom editor team to help developers build UI pieces for Atom packages and Electron desktop apps. The project is now archived, meaning it's no longer actively maintained.

The core idea is that you write plain JavaScript classes that describe what your UI should look like at any given moment. Etch handles the work of translating that description into actual on-screen elements and keeping them in sync when your data changes. It uses a "virtual DOM" approach — it builds a lightweight representation of your UI in memory, compares it to what's currently on screen, and applies only the necessary changes. This makes updates efficient without requiring you to manually manipulate individual page elements.

A developer would use Etch when they want fine-grained control over their components without the overhead of a large framework. For example, someone building a plugin for the Atom editor, or a custom panel in an Electron app, might choose it because it stays out of the way. Components are just regular JavaScript objects — you create them, update them, and destroy them explicitly by calling Etch's functions at the right moments. There's no hidden machinery or base class to inherit from, which the team valued for keeping things predictable.

One notable design choice is that Etch deliberately doesn't manage component state for you. Unlike frameworks such as React that bundle state management into the component lifecycle, Etch expects you to store and track your own data, then explicitly tell it when something has changed and the screen needs refreshing. This keeps the library small and the behavior transparent, but it also means more manual work for the developer.

Since the project was archived in December 2022, anyone considering it today should understand it won't receive updates or bug fixes.