Skip to main content

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.

What makes Klint special?​

  • 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, no unnecessary re-renders
  • Developer friendly: Full TypeScript support and Monaco editor
  • Extensible: Plugin system and easy customization

Installation​

npm install @shopify/klint

Quick Example​

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

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

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

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Klint context={context} draw={draw} />
    </div>
  );
}

Klint fills its container — wrap it in a div with explicit dimensions.

Interactive Editor​

The fastest way to learn Klint is with the interactive editor:

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

Next Steps​