Tokokino

Tokokino is a client-heavy screenshot and video composer built with Next.js. It focuses on fast, in-browser editing — backgrounds, overlays, device frames, 3D shapes, text and annotation layers, templates, and a per-canvas animation timeline — exporting stills (PNG/JPEG/WebP) or animations (WebM/MP4/GIF) entirely on-device, with share flows backed by Cloudflare services.

Stack

• Next.js 16.2.12, React 19.2.x, TypeScript 5.9.x
• Zustand for editor state
• Tailwind CSS v4 + shadcn/ui
• Mediabunny + WebCodecs for local video encoding and audio muxing
• Bundled AV1 WebAssembly decoder fallback for Safari/WebKit video export (runs entirely client-side when native AV1 decode is unavailable)
• OpenNext Cloudflare for build/deploy runtime
• Cloudflare D1 (TOKOKINO_DB) for app/auth metadata
• Cloudflare R2 for share/draft/media storage

Local setup

Requirements

• Node.js 20+
• pnpm 9+

Install

git clone https://github.com/shivabhattacharjee/tokokino.git
cd tokokino
pnpm install

Environment

Copy the example env file and fill in the values you need:

cp .env.example .env.local

Run

pnpm dev

Docker

Build and run the production image:

docker build -t tokokino .
docker run --env-file .env.local -p 3000:3000 tokokino

Run the dev target:

docker build --target dev -t tokokino-dev .
docker run --env-file .env.local -p 3000:3000 -v "$PWD:/app" tokokino-dev

The production image runs pnpm build:next during build and starts with pnpm start.

Database (D1)

wrangler.jsonc configures the D1 binding as TOKOKINO_DB.

Apply migrations:

pnpm exec wrangler d1 migrations apply tokokino-db --local
pnpm exec wrangler d1 migrations apply tokokino-db --remote

Scripts

• pnpm dev - Next.js dev with Turbopack
• pnpm typecheck - TypeScript check (tsc --noEmit)
• pnpm test - Vitest suites in tests/
• pnpm lint - ESLint
• pnpm lint:fix - ESLint autofix
• pnpm lint:strict - ESLint with --max-warnings=0
• pnpm build - OpenNext Cloudflare build
• pnpm build:next - Next.js production build
• pnpm format - oxfmt on all TypeScript files
• pnpm format:check - oxfmt check for TypeScript files
• pnpm preview - OpenNext Cloudflare preview
• pnpm deploy - OpenNext Cloudflare deploy
• pnpm cf-typegen - regenerate cloudflare-env.d.ts from Wrangler bindings
• pnpm build:thumbs - build overlay thumbs
• pnpm build:backgrounds - build background thumbs/manifest
• pnpm build:shapes - build 3D shape thumbs/manifest

Assets

Install local overlay/device assets:

bash scripts/install-assets-local.sh

Paths used:

• public/assets/overlays/thumbs
• public/assets/device-mockups
• public/assets/device-mockups/thumbnails

Contributing

See CONTRIBUTING.md.

License

AGPL-3.0. See LICENSE.