ASCII Studio

Upload an image, turn it into ASCII art, recolor it, hand-animate it with stop-motion frames, and export it. Everything runs locally in your browser — no server, no upload, nothing leaves your machine.

Run it

Just open index.html in a browser:

open index.html

(or double-click the file)

What it does

1 · Source — Drag an image onto the dropzone (or the canvas), or click to browse. JPG / PNG / GIF / WebP.

2 · Shape

• Width — how many characters wide (detail vs. size)
• Contrast / Brightness — tune the tonal mapping
• Invert — swap dark and light
• Character ramp — pick the set of characters used, from coarse blocks to a 70-glyph detailed ramp

3 · Color — the easy recoloring part

• Original — keep the image's colors
• Single ink — one color for everything
• Brightness gradient — map dark→light pixels across two colors you pick
• Quantize to palette — snap every character to the nearest color in a palette you build (click a swatch to recolor it, + color to add, × to remove)
• Plus a background color and a saturation slider

Editing individual cells — click a character on the canvas to select it, or click-drag a rectangle to select many. Then:

• type any key to set the character of every selected cell (Backspace/Delete clears them)
• or use the floating Char / Color controls; Reset color drops back to the auto color
• Esc or Deselect to clear the selection (Note: changing width/contrast/ramp re-derives the ASCII and clears hand edits — do per-cell tweaks last, then Save.)

4 · Stop-motion — animate by hand, frame by frame:

• Edit the grid (select cells and type, set colors), then ＋ Add frame to capture that state.
• Edit again and add another frame. Build up as many frames as you like.
• Each frame shows as a numbered thumbnail. Click a thumbnail to load it back for more editing; edits you make are auto-saved into that frame when you switch away (no need to click Replace). ⟳ Replace still overwrites the selected frame explicitly; × deletes it.
• Set FPS and hit ▶ Play to cycle the frames like stop-motion (▶ toggles to ⏹ Stop, which returns you to the frame you were editing).
• Transition — how each frame enters: None (hard cut), Fade (the whole frame fades in), or Dissolve (each character fades in on a staggered delay). Transition speed scales with FPS so it never outlasts the frame.
• Frames are cleared if you change Width/Contrast/Brightness/Ramp (those rebuild the grid), so set the base look first, then capture frames.

5 · Export

• Copy text — plain ASCII to clipboard
• .txt — download as a text file
• .png — a still image of the current frame, with colors
• .html — a self-contained file with the current frame and its colors

6 · Save & compare — Save this creation snapshots the image, every setting, and your hand edits. Saved versions appear as tiles below the canvas; click between them to compare, rename them inline, or delete with the ✕. They persist in your browser (localStorage).

Files

• index.html — markup
• style.css — styling
• app.js — image sampling, color modes, cell editing, stop-motion, export

License

ASCII Studio is released under the MIT License.