Zed releases a new theme builder with live preview to customize your editor

The open-source code editor Zed has launched Theme Builder, an easy-to-use browser-based visual tool for creating and editing Zed themes. Unlike traditional manual editing of complex JSON files, Theme Builder presents a real-time preview of the Zed interface and organizes theme tokens by category in a sidebar, with changes reflected instantly in the preview.

Theme Builder includes an inspector that lets users right click elements in the preview to see which color tokens control them and jump straight to the relevant inputs. It also adds color linking, where tokens can reference each other, plus optional recommended links meant to help keep related UI elements consistent.

Zed’s theme system covers 16 UI color categories, 10 syntax token categories, and player colors for multiplayer participants. The preview uses Zed’s Tree sitter based highlighting pipeline via WebAssembly so syntax highlighting matches the editor, and it supports importing existing themes as JSON plus exporting overrides or extension files. Under the hood, it relies on CSS custom properties for updates, HTML based UI replicas, local storage persistence, and undo and redo via Zustand, with built in starter themes including One, Ayu, and Gruvbox.