Docs
ditherkit is a small toolkit of dithering packages for the web — pick the package that matches where you want the work to happen.
ditherkit is a small toolkit for adding dithering effects to images on the web. It ships as three packages so each one can stay narrow, portable, and free of dependencies it doesn't need.
| Package | Where it runs | Reach for it when |
|---|---|---|
@ditherkit/core | Anywhere JavaScript runs | You want pure algorithms — Svelte, Vue, Cloudflare Workers, build scripts, custom pipelines |
@ditherkit/react | Browser, in a Web Worker | You need interactive client-side dithering — sliders, live previews, uploads |
@ditherkit/next | Server, with Sharp + ISR | You're on Next.js and want cached, SEO-indexable, next/image-friendly output |
Start here
- New to ditherkit? → Quick start — install, one working example per package, in five minutes.
- Not sure which package you need? → Choose your package — a decision table.
- On a specific stack? → Integrations — per-stack guides for Next.js, Vite, Astro, Remix, Svelte/Vue, and Node.
The one footgun
@ditherkit/next does not re-export @ditherkit/react. If you want
both server-rendered images and interactive client-side dithering in
the same Next.js app, install both packages and import each
component from its own source:
import { DitheredImageSSR } from '@ditherkit/next' // server component
import { DitheredImage } from '@ditherkit/react' // client component(DitheredImageSSR reads its routeBase from the env bridge that
withDitherkit writes in your next.config — see
@ditherkit/next quick start.)
Keeping them separate means each package only ships what its users
actually need — @ditherkit/react users don't pay the cost of Sharp,
and @ditherkit/next-only users don't pay the cost of the Web Worker
client. See Choose your package for the full
rationale.
Reference
@ditherkit/core— algorithms, palettes, color & image utilities@ditherkit/react—<DitheredImage />component reference@ditherkit/next—<DitheredImageSSR />, route handlers, ISR caching- Troubleshooting — common errors and how to fix them
- Internals — for the curious: Web Worker architecture, Sharp pipeline, cache key generation
- Credits — projects, people, and papers that influenced ditherkit