🎨 Klint

Klint is a modern 2D canvas library for React, inspired by p5.js and Processing. It makes creative coding in React intuitive and powerful, perfect for generative art, data visualization, interactive graphics, and creative web experiences.

✨ Features

- 🎯 React-first: Built specifically for React with hooks and component patterns
- 🎨 Creative coding: p5.js-like API with modern JavaScript/TypeScript
- 🚀 Performance: Direct canvas access with minimal overhead
- 🛠️ Developer friendly: Full TypeScript support and great tooling
- 🔧 Extensible: Plugin system and easy customization

🚀 Quick Start

$3

``bash
npm install @shopify/klint
`

$3

`jsx
import { useKlint, Klint } from '@shopify/klint';

function MySketch() {
const { context } = useKlint();

const draw = (K) => {
K.background('#000');
K.fillColor('#ff6b6b');
K.circle(K.width/2, K.height/2, 50);
};

return ;
}
`

🎮 Try the Editor

Want to experiment with Klint interactively? Create a live editor environment:

`bash
npx @shopify/klint klint-create-editor my-klint-project
cd my-klint-project
npm install
npm run dev
`

This creates a Monaco-based editor with live preview - perfect for learning and prototyping!

📚 Documentation

- Getting Started Guide - Learn the basics
- API Reference - Complete function reference
- Examples - See Klint in action
- Lifecycle - Understand how Klint works with React

🌟 Examples

$3


`jsx
function AnimatedCircle() {
const { context } = useKlint();

const draw = (K) => {
K.background('rgba(0, 0, 0, 0.1)');
K.fillColor('#4ecdc4');
const x = K.width/2 + Math.cos(K.frame 0.02) 100;
const y = K.height/2 + Math.sin(K.frame 0.02) 100;
K.circle(x, y, 20);
};

return ;
}
`

$3

`jsx
function InteractiveDrawing() {
const { context, KlintMouse } = useKlint();
const { mouse } = KlintMouse();

const draw = (K) => {
if (mouse.pressed) {
K.fillColor('red');
K.circle(mouse.x, mouse.y, 10);
}
};

return ;
}
`

🛠️ Development

For contributors who want to work on Klint itself:

`bash
git clone https://github.com/Shopify/klint.git
cd klint
npm install
npm run build
`
See CONTRIBUTING.md for development guidelines.

📄 License

MIT

---

Ready to create? Start with npx @shopify/klint klint-create-editor my-project` 🎨