← All work
03 · 2026

Stitch Gallery

A lightweight embroidery viewer that turns folders of design files into a visual gallery of stitch previews.

  • HTML
  • JavaScript
  • File System Access API
View on GitHub
Stitch Gallery preview

The problem

Embroidery files contain detailed stitch designs, but browsing a folder on a computer usually means looking at generic file icons. When a library contains hundreds of designs, finding the right one becomes a tedious process.

I wanted to make those files easy to browse visually.

The approach

  • True stitch previews. Designs are rendered to reflect how the machine will sew them, including thread colors where that information is available
  • Familiar folder navigation. Browse an existing folder structure, search across folders, and see useful file details
  • Designed for real libraries. The viewer accounts for large collections and files stored in cloud-synced folders
  • Original files stay untouched. Designs are viewed locally, and favorites and recoloring preferences stay in the browser
  • Useful design details. Inspect stitch count, colors, dimensions, thread length, and estimated sewing time

The result

A public, single-file tool for browsing, previewing, recoloring, and inspecting embroidery designs. It includes stitch playback, favorites, sorting, and keyboard navigation.

Screenshots

Captured 2026-11-11 with twelve synthetic sample designs, so no personal files appear.

A design preview showing the real needle path, thread colors, a sewing replay slider and a palette for recoloring
A design preview showing the real needle path, thread colors, a sewing replay slider and a palette for recoloring

Stack

Plain HTML, CSS and JavaScript in one file, using the File System Access API in Chrome and Edge.

Evidence

A self-contained public tool of more than 1,200 lines, so anyone can try it on their own embroidery files.

Source: oliver-chase/embroidery-stitch-gallery (public).