Sample applications
The demos take one feature at a time. These are small but whole applications, which is where the parts have to work together — and where the difference between "the library supports it" and "you can ship it" shows up.
Each one runs the library from source on its own page, with the complete source underneath. None of them is more than a few hundred lines, because the toolbar is usually the longest part.
SketchpadFreehand drawing that exports to PNG and SVG, and hands the result to the share sheet.Graph paperSegments from lattice point to lattice point. Drag a vertex and everything meeting it follows — in one undo.Pixel editorA 32×32 board where one cell is one shape — so undo, erase and export were already written.TangramSeven pieces, one silhouette, and a tool that makes the illegal moves unreachable.AmidakujiLadder lottery. A ball rolls down the rungs — the ladder is a drawing, the ball is not.Photo collageDrop photographs; they land as tilted prints. Save the lot, pictures included, as one file.
What to look at
| The thing worth reading the source for | |
|---|---|
| Sketchpad | A stroke is an ordinary path shape, so almost nothing in the application is about drawing. |
| Graph paper | Moving one vertex rewrites every segment touching it, and stays one entry in the history. |
| Pixel editor | A whole drag is one undo, without deferring a single write. |
| Tangram | The pieces snap home inside the same commit that moved them. |
| Amidakuji | Sixty frames a second of animation, and not one of them touches the document. |
| Photo collage | Pictures are saved beside the shapes, never written over them. |
All six are plain TypeScript modules — no framework, no build step of their own. The same code would run inside React, Vue or nothing at all.