The Astro Nannou Starter is a boilerplate that compiles Rust creative-coding sketches written with the Nannou framework into WebAssembly and serves them through an Astro site built with Vite. It pairs the Astro static-site generator with the rsw Vite plugin so Rust code is compiled to WASM and hot-reloaded alongside your frontend during development. The template is authored by JulianCataldo and published on GitHub for anyone to use as a starting point for browser-based generative art and interactive visuals.
What is the Astro Nannou Starter?
It is an open-source project template that combines the Astro framework, Vite bundling, the Rust programming language, and the nannou creative-coding library. Input is Rust source files written against the nannou API, and output is a working web page with the sketch running in the browser via WebAssembly produced by wasm-pack. The project lives on GitHub under the astro-nannou-starter repository and includes a live demo hosted at juliancataldo.github.io/astro-nannou-starter/.
Key Features
- Astro + Vite integration — The template uses Astro for page structure and Vite for bundling, with the rsw Vite plugin triggering Rust-to-WASM compiling during both development and production builds.
- Nannou creative framework — Lets you write generative art, audio-reactive visuals, and interactive installations in Rust using the nannou.cc crate, then run them in any modern browser.
- Hot-reload support — When you edit Rust code, rsw recompiles the WASM and the Vite dev server refreshes the page automatically, so sketch iterations appear without a manual restart.
- Multiple sketches — The boilerplate is set up to include more than one sketch in the same project, although a dynamic sketch switcher is listed as a future improvement.
- Simple command-line workflow — Setup requires
cargo install rsw,pnpm i, thenpnpm dev:rswfor development orpnpm build:rswfor a production build. - CI/CD ready — The repository includes
.github/workflows/release.ymlfor GitHub Actions deployment, and the workflow can be tested locally with Act, a GitHub workflow runner. - Minimal prerequisites — You only need the Rust toolchain, wasm-pack, and Node.js with pnpm to get started, making it accessible for Rust developers new to the web and web developers learning Rust.
Who is it for?
- Rust developers — Those who want to write creative code in Rust and share it on the web without developing a full frontend stack.
- Creative coders — People familiar with tools like Processing or openFrameworks who want to use Nannou's expressive API and deploy as a website.
- Web developers — Developers building an Astro or Vite site who need a tested pattern for embedding WebAssembly modules compiled from Rust.
What can you do with it?
- Generative artists: Publish an online portfolio of interactive Nannou sketches with hot-reload during development and a static production build for hosting anywhere.
- Educators: Use the template as a teaching environment for Rust and creative coding, with minimal build configuration and a live example to fork.
- Hobbyists: Prototype browser-based visuals by editing the Rust sketch files and seeing changes instantly through the Vite dev server.
How does it work?
The README documents a five-step setup: install the Rust language tools, install wasm-pack, run cargo install rsw, install Node dependencies with pnpm i, then launch the dev environment with pnpm dev:rsw. The rsw tool watches your Rust source, compiles it to WebAssembly, and injects the result into the Vite/Astro build pipeline, so the Nannou sketch appears as part of the page.
FAQ
Is the Astro Nannou Starter free?
Yes, the source code is publicly available on GitHub and there is no mention of any licensing fee or commercial restriction. You can clone, modify, and deploy it for personal or commercial projects.
What tools do I need to run it?
You need the Rust toolchain, wasm-pack, Node.js, and pnpm. Additionally, you must install the rsw command-line tool with cargo install rsw. The project does not use npm scripts directly, so pnpm is the recommended package manager.
Does it support hot-reload for Rust code?
Yes, rsw compiles Rust changes and the Vite dev server hot-reloads the page, so edits to your Nannou sketch appear automatically in the browser while running pnpm dev:rsw.
Can I use multiple sketches in one page?
The boilerplate supports multiple sketches in the project, but currently each one typically appears in its own page or iframe. A dynamic sketch switcher and multiple sketches per page without iframes are listed as future enhancements in the README.
How do I build for production?
Run pnpm build:rsw, which compiles the Rust code to WASM and generates a static site through Astro/Vite. A ready-made GitHub Actions workflow in .github/workflows/release.yml handles automated builds and releases, and can be tested locally with Act.
