rapid prototyping for expressive JavaScript
Make a mess.
Keep the good parts.
A small protected space beside your project, where ideas can be rough, code can move quickly, and every good accident can become the next iteration.
Exploratory code needs room to breathe.
Polished project code asks for certainty. An experiment asks a better question: what happens if I try this? Sketch Kit lives alongside your project, giving a sketch its own JavaScript and SCSS files so you can test an idea without dragging the whole application into it.
// isolate the question
// follow the interesting result
Iteration is the feature.
Make one thing. Look at it. Copy the version that still has promise, change a single part, and compare. Keep the trail visible.
- 01Createstart a sketch
- 02Playsee what moves
- 03Copysave this state
- 04Changepush one idea
- 05Comparelook back
- 06Keepcarry it forward
A sketchbook that runs.
sketch-kit init creates a dedicated sketch-kit/ workspace alongside your application.
sketch-kit create motion generates a JavaScript sketch and its SCSS file. Select a sketch to render it in the browser.
Copying an existing sketch creates a numbered iteration. The earlier version stays there to compare against.
sketch-kit run starts a Vite dev server with hot updates. sketch-kit build produces a static build.
One idea, three passes.
Click through a tiny motion study. Each revision keeps the previous thought available while changing the shape of the next one.
Open a new page.
Install Sketch Kit, initialize a workspace in your project, then start sketching. The repository has the CLI source, usage notes and current roadmap.
$ npm install -g sketch-kit
$ sketch-kit init
$ sketch-kit create first-idea
$ sketch-kit run// Sketch Kit is an open-source project. Read the repository before you begin.