Skip to main content

Installation

Add Klint to your React project in seconds.

Requirements​

  • React 16.8+ (requires hooks support)
  • Node.js 14+

Install via npm​

npm install @shopify/klint

Install via yarn​

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​