Integrations
Per-stack guides — what works, what doesn't, and how to work around the gaps.
The ditherkit toolkit isn't only for Next.js. This section is an honest status report for every stack we've thought about: where we ship first-class support, where there's a workaround, and where there's a gap we haven't filled yet.
Honest gaps are a feature. If a stack has a gap, we document it openly and point you at the best workaround we know about.
Status matrix
| Stack | Status | Approach |
|---|---|---|
| Next.js (App Router) | ✅ Supported | @ditherkit/next for SSR + ISR, @ditherkit/react for interactive bits |
| Next.js (Pages Router) | ✅ Supported | Same packages, slightly different wiring |
| React SPA (Vite, etc.) | ✅ Supported | @ditherkit/react works directly |
| Remix / React Router 7 | ⚠️ Workaround | @ditherkit/core + sharp inside a loader |
| Astro | ⚠️ Workaround | @ditherkit/react in client islands, or @ditherkit/core at build time |
| Svelte / Vue / Solid | 🛠 Use core | No framework component yet — @ditherkit/core directly |
| Node CLI / build scripts | ✅ Supported | @ditherkit/core + sharp for I/O |
How to read the statuses
- ✅ Supported — there's a first-class package and an example app. Install, configure, ship. This is the "opinionated" path and is what gets the most testing.
- ⚠️ Workaround — the toolkit works but you'll assemble pieces
yourself using
@ditherkit/coredirectly or by writing a thin framework-specific wrapper. Example code provided. - 🛠 Use core — no framework wrapper exists, but
@ditherkit/corehas no framework dependencies and works anywhere. You'll write ~20 lines of glue to wire it into your stack.
Which stack should I pick?
This toolkit doesn't push you toward any particular stack. Use whatever you're already using — dithering is a small enough feature that it shouldn't dictate your architecture.
If you're starting fresh and want the smoothest experience, Next.js
App Router has the most polish: <DitheredImageSSR /> for cached
server rendering, <DitheredImage /> for interactivity, everything
wired up with one-line route handlers. But "smoothest" isn't the same
as "best for you" — pick the stack that fits the rest of your
project.
What's not here
Some stacks are deliberately skipped:
- Create React App — CRA is deprecated. If you're on it, you
should migrate to Vite.
@ditherkit/reactwill work with some webpack config changes, but we're not maintaining docs for it. - AngularJS — the original Angular 1.x. Not happening.
- jQuery — same.
If you're on an unusual stack that isn't listed, start with
@ditherkit/core directly. The algorithms are pure functions that
take a pixel buffer; wiring them into any JavaScript environment
is usually a 20-line adapter.