squig

What squig is

Squig is a wireframing tool for people who think by drawing. The README positions it between two extremes: Figma pulls you into high fidelity, while a blank canvas tool like tldraw makes you hand draw every button from scratch. Squig sits in the middle with an infinite canvas where you drag in real UI components, but everything renders as a hand drawn sketch. The sketchy look is the central design choice. Because nothing looks finished, reviewers give feedback on the idea and the layout instead of arguing about corner radius or exact spacing, and the author can try a layout three ways in the time one polished version would take. The tool runs live at squig.sh. It is built in TypeScript and carries 64 stars with 12 forks. The canvas supports panning, zooming, multi select, marquee selection, smart guide snapping, one pixel nudge, and undo or redo, so the basic editing feel is close to dedicated design tools. The promise is speed of exploration: you stay loose on purpose until the structure is right, then move to a real design tool for polish. For early product thinking, that restraint is the feature, not a limitation, and it keeps a session focused on flow rather than decoration.

Components and the sketch look

The component library uses the shadcn/ui vocabulary, so the parts are familiar: buttons, inputs, selects, switches, tables, dialogs, tabs, navigation, and sidebars. Beyond single components there are blocks such as heroes, pricing sections, FAQ areas, AI chat panels, checkout flows, and kanban boards, plus whole screen templates to start from. Every item is a component with variants, so dropping a button lets the inspector flip it between icon left, icon right, size choices, and filled or outline styles, and it stays a component while you do that. You switch variants rather than edit shapes. When no variant fits, you can break the component apart and its pieces become editable primitives, a one way step done on purpose. Search is handled by a command palette that finds tools, actions, and every component or block in one sheet, and pasting from the clipboard drops a screenshot, a paragraph of copy, or layers copied from another squig tab at the pointer location. Pictures land as themselves inside a drawn frame so they remain readable as references. Components never render to the DOM; each is a definition whose render method returns drawing primitives that the canvas draws through rough.js, which produces the hand drawn style that gives the tool its name.

Where your files live

Squig keeps things local by design. Every document autosaves as you draw, and the file menu keeps a list of recent documents to reopen, while the new file action starts fresh instead of painting over the last one. The drawer holds the last forty documents, and once the browser runs out of room the oldest ones are dropped, so exporting a copy matters for files you want to keep. There are no accounts and no cloud, which means clearing site data clears the lot. The export a copy command writes a file out so important work survives that cleanup. The shortcut scheme follows Figma's, so hands that know one tool know the other: a question mark opens the full list in the app, and the palette covers select, rectangle, ellipse, draw, text, arrow, components and blocks panels, search, undo and redo, duplicate, copy cut paste, group and ungroup, depth ordering, flip, bold italic underline, save and export, nudges and resizes, pan and zoom, and fit or selection zoom levels. Running it locally is a pnpm install followed by pnpm dev, with no environment variables and no database. Before pushing, pnpm test type checks and runs the geometry, selection, and clipboard suites, and pnpm lint and pnpm build are the other checks worth running. The MIT license covers the code.

Editorial conclusion

Squig is released under the MIT license, is written in TypeScript, runs live at squig.sh, and is started locally with pnpm install and pnpm dev.