Projects sharing features with Canvas Sketch

preact-cli is a command line tool for scaffolding, developing, and building applications using the Preact library. It provides a Webpack-based build pipeline to coordinate code transformation, asset optimization, and production compilation. The toolkit includes a static site prerenderer to convert application routes into static HTML files and a PWA development toolkit for generating service workers and offline asset caching. It also functions as a frontend development server featuring hot module replacement and a proxy for real-time application iteration. The project covers a broad range of

Pts is a TypeScript creative coding library and data visualization framework designed for building generative art and interactive visuals. It functions as a multi-target graphics engine that outputs visual commands to HTML5 Canvas and SVG through a single unified interface. The toolkit serves as a linear algebra visualization tool, providing mathematical primitives for spatial transforms and geometric calculations. This allows for the creation of algorithmic patterns and the simulation of geometric behaviors. The framework covers a broad capability surface including the design of interactive

This project is a live-editing development environment and React component boilerplate. It serves as a project starter and template designed to enable the updating of React components in the browser without refreshing the page. The environment focuses on React hot reloading to provide a frontend development workflow where code changes are reflected instantly in the user interface. This supports live UI prototyping by allowing modifications to styles and component logic without losing the current application state. The setup incorporates a development server, module replacement, and transpila

p5.js is a JavaScript creative coding library and generative art framework. It serves as a web-based graphics engine and a high-level HTML5 Canvas wrapper designed to produce algorithmic imagery and responsive audio-visual experiences. The project provides a simplified sketching API for rendering 2D and 3D graphics directly in a web browser. It enables the creation of interactive animations, generative art, and digital experiences that respond to user input. The library covers a range of applications including interactive data visualization, browser-based multimedia art, and educational prog

nwb is a zero-configuration build toolchain, module bundler, and development server for JavaScript and JSX applications and libraries. It functions as a build system that automatically derives compiler and bundler settings from a project's installed dependencies to remove manual setup. The tool is distinguished by its ability to act as a library compiler, generating multiple distribution formats such as ESM and CJS from a single source for package manager compatibility. It also includes a dedicated headless browser test runner that executes unit tests with integrated watch mode and code cover

Mometa is an AST-based visual code editor and low-code metaprogramming tool. It provides a visual interface for modifying source code through abstract syntax tree manipulation, allowing for the insertion and deletion of code blocks via drag-and-drop actions. The project distinguishes itself through a visual source mapping system that links rendered DOM elements back to their original source code positions. It utilizes a real-time synchronization system and hot module replacement workflow to update application components in the browser without requiring a full page reload. The platform covers

This project provides a pre-configured frontend template for building single-page applications with integrated routing, unidirectional state management, and component-scoped style isolation. It includes command-line tooling to automatically generate boilerplate components, containers, routes, and associated test files to accelerate feature development. The development environment incorporates static type enforcement, automated code formatting and linting, and hot module replacement to maintain code quality and preserve application state during updates. Additional capabilities include dynamic

Brunch is a frontend build tool and JavaScript asset bundler designed to automate the transformation of source code into production-ready assets. It functions as an incremental build system that monitors the filesystem for changes to rebuild only modified components, and it serves as a project scaffolding engine for initializing application structures via predefined skeletons and code boilerplates. The tool utilizes a plugin-based transformation pipeline to compile and optimize JavaScript and CSS files for browser delivery. It distinguishes itself through the use of multi-core build paralleli

Egg-react-ssr is a web framework combining React with a server-side rendering architecture, built on top of the Egg.js backend application framework. It provides a development skeleton supporting both JavaScript and TypeScript for building server-rendered React applications, featuring shared routing and universal execution modes. The framework implements unified route configurations that combine client and server endpoints into a single shared definition, eliminating duplicate path declarations across the stack. It supports server-side HTML hydration, declarative JSX component layouts, and as

Webpacker is a frontend build tooling system and JavaScript module manager that integrates Webpack into Ruby on Rails applications. It serves as a bridge between the backend web framework and the frontend build process to compile JavaScript and CSS into browser-ready bundles. The system provides a dedicated development asset server for real-time code reloading and automatic browser refreshing. For production, it includes a precompilation pipeline that minifies scripts and stylesheets and applies network asset compression to optimize delivery. The project covers comprehensive asset management

vue-loader is a Webpack loader that compiles single-file Vue components into executable JavaScript modules for the browser. It functions as a compiler that splits templates, styles, and scripts from a single file into a bundled module, converting templates into optimized JavaScript render functions for both client and server environments. The project provides a system for routing style blocks through specialized CSS loaders to enable scoped and isolated component styling. It also includes a development utility for hot module replacement, which updates components in the browser in real-time wi

Voby is a signal-based framework for building reactive user interfaces. It utilizes fine-grained observables to track data dependencies and trigger direct updates to the document object model, bypassing the need for a virtual DOM reconciliation process. By wrapping state in proxies, the framework automatically intercepts mutations to ensure consistent data flow across the application. The framework distinguishes itself through a focus on performance and lifecycle precision. It employs reactive update batching to group state changes into single execution cycles, minimizing redundant operations

electron-vite is a build system and multi-process bundle orchestrator that uses Vite to compile and bundle the main, preload, and renderer processes for Electron applications. It functions as a desktop application scaffolder, providing templates to integrate various frontend frameworks into a standardized project structure. The project distinguishes itself through integrated source code protection, utilizing a V8 bytecode obfuscator to compile JavaScript into bytecode and obfuscate strings to prevent reverse engineering. It also manages complex desktop architectures by isolating bundles and s

aleph.js is a full-stack web framework for the Deno runtime. It integrates server-side logic and client-side interactivity within a single environment to build complete web applications. The framework functions as a server-side rendering system and a static site generator, producing pre-rendered HTML to improve search engine visibility and initial load speeds. It utilizes a file-based router that automatically maps the project directory structure to application URLs for both pages and API endpoints. The project includes capabilities for markdown-based content management, transforming markdow

This project is a pre-configured foundation for web applications, providing a structured codebase and build tools for starting new frontend projects. It serves as a boilerplate that integrates React for the user interface, Redux for state management, and React-Router for navigation. The architecture is distinguished by its use of nested route definitions to handle hierarchical navigation and a system for dynamic reducer injection, which allows state management logic to be added to the store at runtime as specific modules load. The toolkit covers a broad range of frontend capabilities, includ

This project is a pre-configured project foundation for building scalable web applications. It serves as a React application boilerplate and component scaffold designed to provide a scalable architecture and a foundation for long-term growth. The setup is characterized by an offline-first web framework that maintains application availability without an active network connection. It includes an internationalized UI foundation with integrated translation tooling and a modular CSS-in-JS setup for scoped, component-level styling. The boilerplate covers broader capability areas including automate

electron-vue is a pre-configured project boilerplate and scaffolding system for building desktop applications using Electron and Vue.js. It provides a standardized project structure and an integrated build pipeline to accelerate the development of desktop software. The project enables a hybrid deployment model, allowing developers to generate both standalone desktop executables for multiple operating systems and browser-compatible web versions from a single codebase. It distinguishes its development workflow with hot reloading and hot module replacement to update the user interface in real-ti

Eloquent-JavaScript is a comprehensive JavaScript programming textbook and interactive coding tutorial designed for web development education. It serves as both a language reference and a practical guide, combining theoretical lessons with an environment where learners can execute and modify code examples. The project focuses on the fundamental principles of the JavaScript language, including lexical scoping, prototype-based inheritance, and asynchronous patterns. It provides detailed instruction on object-oriented programming, functional programming, and the use of the browser DOM to create

Tinymist is a comprehensive suite of tools for Typst document authoring, serving as a language server, document compiler, and project manager. It provides a standardized language service via the Language Server Protocol to enable editor features such as autocompletion, navigation, and semantic highlighting. The project distinguishes itself by integrating a TCP-based live preview server for real-time visual rendering and an advanced static analysis tool that utilizes abstract syntax trees and bidirectional type checking. It also includes a project management system capable of handling multi-fi

This project is a generative art engine designed to create large collections of unique images by layering assets with assigned rarity weights and blending modes. It functions as an art generator that produces unique image sets and corresponding JSON metadata files for use in blockchain-based digital collections. The engine features a trait rarity manager that controls the frequency of specific visual attributes through filename-based weighting. It also includes a pixel art converter that transforms generated image collections into pixelated versions using configurable downsampling ratios. Th

This project is a geospatial data rendering engine and OpenStreetMap road network visualizer. It functions as a vector map visualization tool that imports geocoded area data and converts road layouts into visual layers for digital or physical output. The system enables the creation of generative map art and stylized images intended for physical production via pen-plotters or laser cutters. It allows for the manipulation of line widths and colors of city streets to produce custom visual representations of urban environments. The engine provides capabilities for urban road visualization, geogr

This project is a mathematical visualization library and a collection of algorithmic art. It serves as a data visualization guide and an interactive visualizer, providing a set of implementations for rendering complex geometric shapes and mathematical concepts through code. The collection focuses on generating aesthetic patterns and precise graphic elements, including fractals, Bezier curves, and Lissajous patterns. It uses recursive functions and iterative algorithms to produce complex geometric structures and algorithmic art. The library covers a range of capabilities including interactive

css-doodle is a web component for creative coding that renders live CSS-generated patterns and animations directly in the browser. It creates generative art and visual patterns by applying CSS rules to a grid of cells, using the browser's native layout engine for positioning and styling. The component encapsulates its pattern canvas and styling within a custom element's shadow DOM, isolating it from page styles and enabling reusable instances. The tool distinguishes itself by driving pattern configuration through CSS custom properties, allowing dynamic style changes and real-time updates with

This project is a curated collection of galleries and component libraries that demonstrate pure CSS visual effects, 3D transforms, animation patterns, and layout solutions. It serves as a visual catalog of interactive UI elements and graphics built exclusively with HTML and CSS. The collection distinguishes itself by implementing complex interactivity, such as state management and animation triggers, using only CSS pseudo-classes and keyframes without any JavaScript. It also features a system for generative art and algorithmic patterns, as well as spatial 3D constructions using perspective an

Fuse-Box is a JavaScript bundler, module loader, and development web server. It packages JavaScript source files into optimized bundles for execution in both browser and server environments. The project manages the front-end development workflow by combining asset bundling with a local server to preview application changes in real time. It includes a programmatic API for loading and executing JavaScript modules in the browser. The system handles JavaScript asset bundling and module loading through dependency-graph analysis and dynamic entry-point resolution. It employs an incremental build p

React Refresh Webpack Plugin is a development tool that enables live reloading of React components while preserving their local state during development. It integrates with build processes to instantly update component code without losing user state or session data, while also offering options to clear and reinitialize component state when unstable interfaces need clean recovery. The plugin manages updates and state preservation in the browser by intercepting the bundling lifecycle, applying abstract syntax tree transformations to inject metadata and preamble hooks, and communicating with mod

Trianglify is an algorithmic background generator and vector art toolkit used to produce pseudo-random geometric patterns and polygonal meshes. It functions as a rendering engine that converts geometric data into either scalable vector graphics or rasterized canvas elements. The system utilizes deterministic pattern generation via seed values to ensure consistent geometric output. It supports customizable color gradients, coordinate grid jittering, and custom geometry definitions to control the placement and shape of the generated meshes. The project covers algorithmic art generation and gen