Documentation
Getting Started
P5 Svelte is a framework that combines the power of P5.js with the reactivity and component-based architecture of Svelte. It provides a seamless way to create interactive visualizations, games, and creative coding projects.
Quick Setup
Get started quickly with our preconfigured environment including P5.js, TypeScript, and DaisyUI.
Type Safety
Full TypeScript support with proper type definitions for P5.js and framework utilities.
Component-Based
Create reusable P5.js sketches as Svelte components with built-in lifecycle management.
Basic Usage
To create a new P5.js sketch, use the P5Canvas component:
import P5Canvas from "$lib/components/p5/P5Canvas.svelte";
import type { Sketch } from "$lib/core/types";
const sketch: Sketch = {
setup: (p5) => {
// Your setup code
},
draw: (p5) => {
// Your draw code
}
};
<P5Canvas {sketch} />Features
- Automatic canvas management and cleanup
- Reactive settings and state management
- Dark/light theme support
- Built-in FPS counter and performance monitoring
- Responsive canvas sizing
- TypeScript support
API Reference
P5Canvas Props
| Prop | Type | Description |
|---|---|---|
| sketch | Sketch | The P5.js sketch configuration object |
| config | P5Configuration | Optional configuration for the canvas |