Skip to main content

Quick Start

Create your first Klint sketch in 2 minutes. Klint will take the size of its direct parent DOM element.

The Minimal Sketch​

Here's the simplest possible Klint sketch:

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

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

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

  return <Klint context={context} draw={draw} />;
}

Try it out — edit the code and click Run:

Loading playground...

Add Animation​

Make it move by using the K.frame property — it represents the number of frames elapsed since the sketch started.

Loading playground...

Add Interactivity​

Track mouse position with the mouse object — in your app you get it from the KlintMouse hook, and in the playground it's available automatically:

Loading playground...

Use Setup Function​

Initialize your sketch with the setup function — it runs once when the component mounts:

Loading playground...

Complete Example​

Here's everything together — setup for initialization, draw for animation, text rendering, and color:

Loading playground...

What's Next?​