Quickdraw

Drawesome is a drawing toolbar and canvas component for React applications. It provides seven pen types—pencil, pen, brush, fineliner, highlighter, fountain pen, and another configurable pen tool—that vary stroke width according to movement speed or direction, plus an eraser that removes areas of strokes rather than deleting whole strokes. The React component supports configurable tools, colors, sizes, opacity, toolbar placement, appearance, controls, themes, tooltips, keyboard shortcuts, and initial or externally managed strokes. Drawings can be exported as SVG or PNG, downloaded directly, or accessed as stroke data through its ref methods. It is installed with npm, requires React 18 or later as a peer dependency, and has no runtime dependency beyond React.

tldraw is an open-source SDK for building infinite-canvas applications in React, including whiteboards, diagramming tools, and workflow-mapping interfaces. Its canvas engine supports custom shapes, tools, bindings, UI components, drawing, geometric shapes, rich text, arrows, snapping, media, image export, and runtime control through an Editor API. The repository also documents self-hosted real-time collaboration through @tldraw/sync, browser-based rendering, and canvas primitives for AI integrations. It can be installed as an npm package and includes starter kits for applications such as workflow builders, agent canvases, and AI chat interfaces. The starter kits are MIT-licensed.

Excalidraw is an open-source virtual whiteboard for creating hand-drawn-style diagrams, wireframes, and other canvas-based drawings. It provides tools for shapes, arrows, lines, freehand drawing, image insertion, labeled and bound arrows, zooming, panning, undo and redo, dark mode, shape libraries, localization, and export to PNG, SVG, clipboard, or its open JSON format. The editor is available as an npm package for integration into applications. The hosted Excalidraw.com app adds real-time collaboration, end-to-end encryption, browser autosave with local-first behavior, offline PWA support, and shareable read-only links. The videos describe using Excalidraw to visualize Mermaid-generated diagrams and to manually map multi-step AI workflows with jobs, arrows, parallel lanes, checks, and human approvals.

PenEcho is an open-source shared canvas for handwriting, equations, diagrams, and spatial context. It reads marks and their spatial relationships on a 20,000 × 20,000 canvas, then places hints, explanations, formulas, plots, diagrams, and other AI-generated drafts beside the original content. Drafts can be moved, resized, copied, accepted, or discarded before becoming part of the canvas ink; users can draw with a stylus or mouse, lasso confirmed ink to move, resize, recolor, or delete it, and send selected content to Typeset without triggering an AI request when editing ordinary ink. The application supports editable sandboxed HTML widgets, professional diagrams, animations, and live-data plugins, which can be refined in place through incremental unified-diff edits rather than full regeneration. It supports up to ten API or CLI connections, including Kimi, MiniMax, Codex, and Claude Code configurations, with a selectable active connection per client. Canvases can be organized into projects, shared across authorized devices, and exported as cropped PNG files. PenEcho provides a desktop app and an npm installation requiring Node.js 20.3 or newer. It can run offline with a user's own API or authenticated CLI setup; API credentials remain on the host device and are not sent to browser code. PenEcho Cloud is an optional companion service for private versioned projects, synchronized favorites, linked-device remote access through a relay, and public sharing of Canvases and Widgets as Echoes or Crafts. The project is supported through Moonshot AI's Kimi Open Source Friends program.

React is a JavaScript library for building web and native user interfaces. It uses declarative views that update the appropriate components when application data changes, and lets developers compose encapsulated, state-managing components into larger interfaces. React code can use JSX, an HTML-like syntax for defining interface elements, although JSX is optional. The library is designed for gradual adoption, can render on the server with Node, and supports mobile applications through React Native. Its core repository is developed openly on GitHub under the MIT license.