# @code-not-art/sketch
> Quick start framework for HTML Canvas sketches
Latest version **2.0.0-beta.3** (published 2025-06-29) · GPL-3.0-or-later license · 0 weekly downloads
## Install
```sh
npm install @code-not-art/sketch
pnpm add @code-not-art/sketch
yarn add @code-not-art/sketch
bun add @code-not-art/sketch
```
## Health
**Score 30/100 (F)** — status: maintenance-mode.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: stale; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.0.0-beta.3 |
| Published | 2025-06-29 |
| First published | 2021-09-24 |
| Weekly downloads | 0 |
| License | GPL-3.0-or-later |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 12 |
| Unpacked size | 209.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Jon Eubank |
| Maintainers | joneubank |
| Keywords | canvas, generative, art, TypeScript, React, ReactJS, makecodenotart, codenotart, codeart |
## Links
- npm: https://www.npmjs.com/package/@code-not-art/sketch
- Repository: https://github.com/code-not-art/sketch
- Homepage: https://github.com/code-not-art/sketch#readme
- Issues: https://github.com/code-not-art/sketch/issues
- npm.io page: https://npm.io/package/@code-not-art/sketch
## Dependencies (12)
- [jsurl](https://npm.io/package/jsurl.md) ^0.1.5
- [react](https://npm.io/package/react.md) ^19.0.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [primeflex](https://npm.io/package/primeflex.md) ^3.3.1
- [react-dom](https://npm.io/package/react-dom.md) ^19.0.0
- [primeicons](https://npm.io/package/primeicons.md) ^7.0.0
- [primereact](https://npm.io/package/primereact.md) ^10.8.5
- [query-string](https://npm.io/package/query-string.md) ^7.1.3
- [react-feather](https://npm.io/package/react-feather.md) ^2.0.10
- [styled-components](https://npm.io/package/styled-components.md) ^6.1.13
- [@code-not-art/core](https://npm.io/package/@code-not-art/core.md) 2.0.0-beta.3
- [nice-color-palettes](https://npm.io/package/nice-color-palettes.md) ^3.0.0
## Alternatives
- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads
## Recent versions
- 2.0.0-beta.3 (latest) — 2025-06-29
- 2.0.0-beta.2 — 2025-05-19
- 2.0.0-beta.1 — 2024-12-17
- 1.0.1 — 2024-01-05
- 1.0.0 — 2024-01-05
- 0.11.0 — 2023-08-31
- 0.10.0 — 2023-06-05
- 0.9.5 — 2023-06-04
- 0.9.3 — 2023-02-24
- 0.9.2 — 2023-02-21
- 0.9.1 — 2023-02-20
- 0.8.2 — 2023-02-20
- 0.9.0 — 2022-09-18
- 0.8.1 — 2022-09-18
- 0.8.0 — 2022-09-13
- … 19 more at https://npm.io/package/@code-not-art/sketch/versions
## README
[](https://github.com/code-not-art/sketch/blob/main/LICENSE) [](https://www.npmjs.com/package/@code-not-art/sketch) [](https://www.typescriptlang.org/)
# Sketch Framework
Framework used to create generative art using pseudo-random and parametric algorithms. This library provides an interface for a `Sketch` object that defines a parameterized algorithm for generative artwork, and React components to run those `Sketch` algorithms and render them on an HTML canvas.
The primary use of this is to be used in an interactive development environment, where a coder can make changes to a `Sketch` and their browser will immediately render their updated algorithm.
In addition to this original purpose, the React components can be embedded into any website as a means to provide control over an HTML canvas, or to display a sketch in a (non-development) context.
## Sketch Web Interface Controls
The sketch controller provides keyboard shortcuts for controlling the development environment.
These are disabled by default to prevent hijacking keyboard commands outside of the sketch developer use case.
| **Key** | **Action** |
| :-----: | :-----------------------------------------------------------------------------------: |
| `s` | **Save** the current image |
| `u` | Shareable image **URL** - Create a shareable URL and copy that link to your clipboard |
| `m` | Show/Hide Parameter **Menu** |
| | |
| `space` | Draw **new image** with random image and color seeds. |
| `↑` | Move to **next color** seed, or generate a new one if at end of list. Draw new image. |
| `↓` | Move to **previous color** seed. Draw new image. |
| `→` | Move to **next image** seed, or generate a new one if at end of list. Draw new image. |
| `←` | Move to **previous image** seed. Draw new image. |
| `c` | Generate new **color** seed. Draw new image. |
| `i` | Generate new **image** seed. Draw new image. |
## The Sketch Interface and Lifecycle
The `SketchController` expects a prop of the [`Sketch`](src/sketch/Sketch.ts) type. This interface allows you to provide configuration details for your sketch (`config`), and interactable parameters that you can update in browser (`params`). There are several methods for available for you to implement that will interact with the canvas and the seeded random generators provided by the framework. The only one of these that are absolutely required to provide is the `draw(props)` method, all others have sensible (mostly empty) defaults.
| **Property** | **Type** | **Required** | **Description** | **Default** |
| :----------------------: | :-------------------------------------------------------------------------------------------------------: | :----------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------: |
| `config` | JSON matching type [`ConfigInput`](src/sketch/Config.ts) | No | Configure image and project properties such as canvas size. | Image size: 1080x1080
Color and Palette seeds: Random Seeds based on current date and time
FrameRate: 60 |
| `controls` | An array of `Param` objects. | **Yes** | Defines the parameters that control the sketch. These are used to create the control panel for the sketch. | No interactive parameters |
| `init(props)` | Function providing [`SketchProps`](src/sketch/SketchProps.ts) | **Yes** | Runs when sketch is first passed to the [`Canvas`](https://github.com/code-not-art/core/blob/main/src/canvas/index.ts) and is responsible for initializing the Sketch data model. This function is a good place to put expensive up front work to be done once and not repeated when new images are generated. | No operations performed. |
| `reset(props)` | Function providing [`SketchProps`](src/sketch/SketchProps.ts) | No | Runs when user requests a new image to be drawn. Use this to reset any data as needed between draws. | Clears the canvas back to empty (all transparent). |
| `draw(props)` | Function providing [`SketchProps`](src/sketch/SketchProps.ts) | No | The main drawing actions of the sketch. This will be run once whenever a user requests a new image to be generated. | - |
| `loop(props, frameData)` | Function providing [`SketchProps`](src/sketch/SketchProps.ts) and [`FrameData`](src/sketch/FrameData.ts). | No | Will be called every frame of the animation loop controlled by the page. The framerate will attempt to match the value specified in `config`. The loop will stop once this function returns `true` (indicating the animation has finished). | No operations performed. |
### SketchProps
The [`SketchProps`](src/sketch/SketchProps.ts) are provided provided to every function in the Sketch definition. They provide access to the `Canvas`, and to the seeded `Random` generators. The full list of properties available and links to their code or documentation is:
| **Property** | **Type** | **Description** |
| :----------: | :-----------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| canvas | [`@code-not-art/core.Canvas`](https://github.com/code-not-art/core/blob/main/src/canvas/index.ts) | Provides access to the canvas and 2D context directly, plus all the drawing tools provided by the [`code-not-art core library`](https://github.com/code-not-art/core). |
| rng | [`@code-not-art/core.Random`](https://github.com/code-not-art/core/blob/main/src/random/index.ts) | Random number generator provided the **image** seed |
| palette | [`Palette`](src/sketch/Palette/index.ts) | Random Color Palette with 5 randomly selected colors. Changing the color seed will update the colors in the palette without affecting the random seed of the `rng` `Random` generator provided in the `SketchProps` |
| params | `StringMap` | The values for the parameters provided in the sketch definition. If these are updated in the UI then this params object will have the updated values. |
### Example Sketch Code
This repository provides an application to run demonstration sketchs found at [/apps/demos](../../apps/demos/). These are a great place to start to look at implementing an example sketch.
The following is a bare minimum sketch. It does nothing but can be passed to a `SketchController` and will result in no changes to the canvas:
```ts
const bareMinimumSketch = createSketch({
init: () => ({}),
controls: {},
});
```
A sketch that will modify the canvas requires a `draw()` or `loop()` function. As a minimum example, the following sketch will completely fill canvas with a single color, using the first color from the provided palette:
```ts
const simpleSketch = createSketch({
controls: {},
init: () => ({}),
draw: ({ canvas, palette }) => {
canvas.fill(palette.colors[0]);
},
});
```
---
_Source: https://npm.io/package/@code-not-art/sketch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._