skiiter

A tiny, dependency-free ASCII art maker. Think MS Paint, but every "pixel" is a character on a grid.

Running it

No build step — just open index.html in a browser, or serve the folder:

cd /Users/kb/Documents/GitHub/sciiter
python3 -m http.server 8000

Then visit http://localhost:8000.

Features

• 32×32 grid by default, resizable to any width/height (up to 300×300) via the Grid panel — resizing preserves existing art.

• Tools: select, pencil, eraser, flood fill, line, rectangle (hold Shift while dragging for a filled rectangle), eyedropper, and a text tool for typing strings directly onto the grid.

• Select / move / copy / cut / paste — drag out a rectangular selection, then drag inside it to move that content elsewhere on the grid (undoable as one step). Copy/Cut/Paste work via the toolbar buttons or Ctrl/Cmd+C/X/V; paste drops the clipboard at wherever you're hovering, and immediately re-selects it so you can drag it into place. Delete/Backspace clears a selection's contents; Escape deselects.

• Palette grouped by shape and value: Lines, Dots, Bends & Corners, Curves, Box Drawing, Arrows, Blocks, a dark→light Shading ramp, Uppercase, Lowercase, Numbers, and Symbols. Click any glyph to make it the active brush, or type a custom character into the brush box.

• Continuous line mode — a "Continuous line" toggle in the Brush panel turns pencil, line, and rectangle-outline strokes into auto box-drawing, with four corner styles:

  • sharp ┌┐└┘ / bendy ╭╮╰╯ / grid -|+ — each cell looks at which of its 4 neighbors are also line cells and picks the one junction character with exactly those connectors (─│┌┐└┘├┤┬┴┼, or the bendy/grid equivalents). Corners, T-junctions, and crossings resolve automatically and keep updating correctly as you extend or erase a stroke. A genuinely diagonal drag (not a Bresenham staircase) renders as / or \.
  • curved — goes further, actively smoothing the path rather than just picking a corner glyph. It works by splitting the whole stroke into maximal runs of one repeated direction, then resolving each junction between consecutive runs — not by looking at a fixed small window around each cell — so it holds up regardless of run length:
    • Where a genuinely diagonal run meets a straight run of 2+ cells, the boundary softens into a small mark leaning the right way — , or ' where a /-sloped diagonal meets a horizontal or vertical run, . or ` where a \-sloped one does — turning a drag through flat → diagonal → flat into ──, / ' │ instead of a plain staircase of slashes.
    • A near-45° freehand drag naturally throws in the odd lone single-cell cardinal step to correct for the angle not being exactly 1:1 (Bresenham jitter, not an intentional bend). That one cell — and only a run of exactly one — gets absorbed into the surrounding diagonal instead of getting punctuated, so a hand-drawn diagonal doesn't fragment into stray dots/commas or read as doubled.
    • Where the pencil takes a hard 90° turn with no diagonal drawn at all (a plain L), it reinterprets the turn itself as a diagonal and pulls the cell on each side of it into being that diagonal's shoulder — spreading the bend across 3 cells (shoulder, diagonal, shoulder) instead of collapsing it into one rounded-corner glyph, e.g. ────.\ then ` then │ for a right-then-down turn. This is a best-effort heuristic, not a universal "correct" answer, but it's what makes curved actually look distinct from bendy instead of just being bendy with extra steps.

  Filled rectangles (Shift+drag) and flood fill are unaffected — it's a stroke concept, not a solid-fill one.

• Ink color — a ROYGBIV swatch grid surfaced directly in the Brush panel, plus a native picker for an exact custom value. Every drawing tool (pencil, line, rectangle, fill, text) uses whatever's currently selected.

• Canvas background color — a single color for the whole canvas, not a paintable layer. Click the swatch, pick a ROYGBIV color (or "None" for the theme default) — it applies instantly, no drawing required.

• Light and dark themes — follows your OS preference by default; click the sun/moon button top-right to override and pin a theme (remembered across visits).

• Lucide-style icons throughout the toolbar.

• Undo/redo (Ctrl/Cmd+Z, Ctrl/Cmd+Shift+Z), zoom, and toggleable grid lines.

• Autosave to localStorage so a reload doesn't lose your work.

• Save/Open as a .json project file (portable, round-trips exactly, including the canvas background color). Save always writes skiiter-art.json — rename the downloaded file if you want something else. New/Save/Open never use native confirm()/prompt()/alert() dialogs (unreliable in embedded browser contexts) — destructive actions (New, Clear grid) go straight onto the undo stack instead, so Ctrl/Cmd+Z is the safety net.

• Export as plain .txt (for pasting into code/README/chat), as a .png snapshot (background + characters, matching the current theme), or straight to the clipboard.

Keyboard shortcuts

Key	Action
S	Select
P	Pencil
E	Eraser
F	Fill
L	Line
R	Rectangle (hold Shift = filled)
I	Eyedropper
T	Text
+ / -	Zoom in / out
Ctrl/Cmd+Z	Undo
Ctrl/Cmd+Shift+Z	Redo
Ctrl/Cmd+C / X / V	Copy / Cut / Paste selection
Delete / Backspace	Clear selection contents
Escape	Deselect
Ctrl/Cmd+S	Save as .json

Files

• index.html — layout/markup
• style.css — theme and layout
• app.js — all app logic (grid model, rendering, tools, save/export)