Docs

Skin Builder

The Skin Builder turns any image into a working terminal. Drop a picture in, tell it where the screen goes, and it loads live — no restart, no compiler, no code.

Open it with ⌘B, or Settings → Skins → Skin Builder.

The workflow

  1. Drop your image onto the Skin Builder window. Any PNG/JPEG works — a gadget, a character, a frame, a photo.
  2. Cut the background. Use Auto Cutout (Vision-based, one click) or the magic wand for manual control. Everything outside the device body should end up transparent — transparent pixels pass clicks through to whatever’s behind the window.
  3. Draw the viewport — click-drag over the area where the terminal should render. A green overlay shows the rect.
    • ⌘-drag a corner handle to pull that corner independently, producing a tilted/perspective quad — this is how skins with angled CRT screens work.
    • Per-corner radius sliders live in the Viewport Inspector for curved-glass looks.
  4. Draw buttons (optional) — up to 4 clickable rects/circles that map to the panel slots. If your artwork already paints buttons, leave their labels empty so Terminal Candy only tracks the clicks without drawing chrome.
  5. Mark reactive keys (optional) — regions that pulse when you press the matching key on your keyboard.
  6. Pick the palette — foreground, background, and cursor colors. Use the eyedropper to sample from your artwork.
  7. Set effect defaults — scanlines, glow, curvature. Pick what flatters the art; users can override in Settings.
  8. Name it and Install — the skin lands in your library and is live immediately.

Pen tools: click to drop a vertex, click-drag for a Bezier handle, Del removes the last point, Return commits, Esc cancels.

Live preview

The Skin Builder launches a real Terminal Candy window wearing your work-in-progress skin, so you can type into it before committing. Test at multiple zooms (⌘= / ⌘-) — the viewport scales per-axis by design, but it’s a good sanity check.

Publishing to the community

Share to Community… (next to Export) publishes a finished skin to the gallery:

Published skins get their own page at terminalcandy.com/skins/view?id=… — share the link anywhere.

Prefer to hand-write it?

Everything the Skin Builder produces is a plain folder with a PNG and a skin.json. The full schema is documented in the skin format reference.