@shopify/klint NPM

Klint

A modern creative coding library for React applications that provides an intuitive interface to HTML Canvas 2D rendering. Klint simplifies the process of creating interactive graphics, animations, and visualizations.

Features

React integration with hooks and components
Intuitive drawing API inspired by Processing and P5.js
Responsive canvas that automatically resizes
Support for animations, static renderings, and interactive content
Built-in utilities for managing state, input, and resources

Example

import { Klint, useKlint, type KlintContext } from "klint";

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

  const draw = (K: KlintContext) => {
    K.background("#222");
    K.fillColor("red");
    
    // Draw a pulsing circle at the center of the canvas
    const size = 50 + Math.sin(K.frame * 0.05) * 25;
    K.circle(K.width/2, K.height/2, size);
  };
  
  return <Klint context={context} draw={draw} />;
}

Release Process

This package uses GitHub Actions for automated releases. Here's how to create a new release:

Development and tests

Important: The Klint library isn't public yet, so you'll need to link it manually if you want to edit it.

Clone the repository

git clone https://github.com/Shopify/klint.git
cd klint

Go to the lib folder and link it locally
```
cd lib
npm link
```
In your working directory, link to the local Klint
```
cd your-project
npm link klint
```
Run the dev server:
```
npm run dev
```

When finished, unlink both in your project and the local repo

# In your project
npm unlink klint

# In the Klint lib folder
npm unlink

If you change anything in the library, you will need to rebuild
```
# In the Klint lib folder
npm build
npm link
```
I use Vitest for testing
```
npm test
```
Push your commit