p5.js

Kool Brushez is a p5.js drawing app with six independent brushes: Score draws flowing musical-staff ribbons, Schematic creates drafting diagrams, Balloon reveals airbrushed shapes, Subway generates branching transit lines, Crowd draws animated people, and Gunpla grows model-kit sprues. All brushes use one shared canvas, so users can switch between them without reloading or losing existing marks; each brush has its own JavaScript drawing algorithm, settings, preview, and registry entry. The app provides brush-specific controls, auto-fill and variation modes, undo and redo, erasing across brushes, aspect-ratio fitting, keyboard shortcuts, touch and pen input, and PNG export. It is built with Vite, plain JavaScript and CSS, and is released under the MIT License.

Canvas UI is an open-source, framework-agnostic library of creative UI components that render canvas and WebGL effects over live, interactive HTML. Its components use the experimental HTML-in-canvas API to read and redraw the DOM as a texture while preserving selectable text and clickable links; where that API is unavailable, they fall back to WebGL overlays. The library includes fluid simulations, shader effects, 3D scenes, distortion, particles, glass, fire, retro, and glitch effects, including Liquid, Ripple, Blaze, Glass, VHS, Shatter, and Decrypt Reveal. Each component is implemented as a plain TypeScript and WebGL engine with thin wrappers for React, Solid, Preact, Vue, Svelte, and vanilla JavaScript. Components are copied into an application through a shadcn-compatible registry rather than installed as a conventional dependency, and provide typed props with default configuration. The registry is MCP-ready for AI-assisted component discovery and installation. HTML-in-canvas effects require Chrome with the relevant flag or an origin-trial token; other environments use the WebGL-overlay fallback, while the library’s 3D effect components work without that flag. The project includes the component source, documentation site, demos, and registry builder, and is distributed under the MIT license with the Commons Clause, which restricts selling the library itself.

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.

Pascal Editor is an open-source, web-based 3D building editor for creating and sharing architectural projects. It supports architectural elements and objects such as walls, slabs, roofs, zones, doors, windows, and furniture, along with plugins and publishable viewers. The editor is built with React Three Fiber and WebGPU. Its Turborepo monorepo separates scene schemas and state, 3D rendering, editing tools, built-in node definitions, viewer and capture runtimes, shared UI, a standalone Next.js app, and an MCP server that exposes scene tools, resources, prompts, and local storage to MCP-compatible AI hosts. The project can run locally through the @pascal-app/cli package, which starts a persistent editor and authenticated MCP service, stores projects in a local database, and manages the standalone runtime. Reusable editor, viewer, node, core, and capture packages are also distributed through npm.

ThreeUI is a free, open-source, login-free catalog and React component library for interactive Three.js, WebGL, shader, and UI components. Its Community edition provides browsing, search, themes, responsive layouts, live renderers, controls, variant pickers, source-code tabs, and complete Community component source code, while excluding Pro and Beta components and authentication, checkout, and Pro implementation source. The public library can be installed from npm as @designcodeio/threeui and imported as React components with shared styles through the package root or component subpaths, or run locally with Vite from the repository. Components that render full HTML documents require runtime assets to be copied into the host application's public directory. Application code and Community component code are MIT licensed; bundled fonts use the SIL Open Font License 1.1 and bundled Three.js runtime files use the MIT license.