Skip to main content

Installation

Add Klint to a React or vanilla JavaScript project in seconds.

Requirements​

  • Node.js 18 or newer for development and server-side tooling
  • React 18 or 19 when using the React entry point

React is an optional peer dependency. It is not required when importing @shopify/klint/native.

Install via npm​

npm install @shopify/klint

Install with another package manager​

pnpm add @shopify/klint
# or
yarn add @shopify/klint

TypeScript Support​

Klint is written in TypeScript and includes type definitions out of the box. See TypeScript Setup for detailed type usage.

Verify it works​

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

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

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

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

If you see a red circle on a black background, you're ready to go!

Next Steps​