p5.wrapper

A lightweight declarative wrapper for p5.js that lets you build interactive sketches using Web Components or frameworks like Zikojs, React, VanJS...

All implementations are built on top of ZikoJS, which acts as a bridge between the Instance mode of p5.js and the declarative structure of modern UI frameworks. This makes it easy to use p5 in a component-based way while keeping full control of the drawing logic.

API

Canvases

• P5Canvas2D(...shapes)
• P5Canvas3D(...shapes)

Shapes

• P5Circle({x, y, r})
• P5Rect({x, y, w, h})
• P5Ellipse({x, y, r1, r2})

🧩 Usage Note : In ZikoJS, VanJS, and other environments that follow a hyperscript approach, both P5Canvas2D / P5Canvas3D and shape components support chainable methods for declarative configuration. These methods allow you to set properties like size, style, and behavior directly through a fluent API:

P5Canvas2D(
    P5Circle({ x: 0, y: 0, r: 50 }).fill("red")
   )
   .view(-100, -100, 100, 100)
   .style({ border: "1px solid blue" });

In React, Svelte, Vue, and other modern frameworks that use JSX or template-based approaches, canvas configuration is done through props, offering the same capabilities as chainable methods used in hyperscript-based environments.

<P5Canvas2D style={{border:"1px solid blue"}} view={[-100, -100, 100, 100]}>
    <P5Circle x={0} y={0} r={50} fill='red'/>
<P5Canvas2D/>

Implementations

Library	Implementation	Status
Zikojs	p5.wrapper/ziko	In Progress ..
Vanjs	p5.wrapper/van	In Progress ..
React	p5.wrapper/react	In Progress ..
Svelte		To Do
Vue		To Do
Solid		To Do
Preact		To Do
Astro		To Do

⭐️ Show your support

If you appreciate the library, kindly demonstrate your support by giving it a star!

License

This project is licensed under the terms of MIT License