SpriteCutter — Image Slicing Tool

Split sprite sheets, sticker packs, and grid images into individual files. Everything runs in the browser via the Canvas API — no upload, no server, no account.

Available in English (/) and Simplified Chinese (/zh/).

Features

• Visual slicing — grid overlay on the source image, updated live as you change rows and columns.
• Edge trimming — crop a fixed number of pixels from every cell to drop dividing lines or padding. A red dashed guide shows what will be kept.
• Batch export — download every slice as one ZIP, or grab an individual slice on hover.
• Format control — PNG (lossless, keeps transparency) or JPG (quality 0.9, transparent areas filled white).
• Local processing — images never leave the device.
• Two locales with their own URLs — each is prerendered to static HTML with its own lang, title, description, canonical and hreflang tags.

Tech stack

• React 19 + TypeScript
• Vite 6 — client build plus an SSR pass used for prerendering
• Tailwind CSS 3 — compiled at build time
• Lucide React for icons
• jszip and file-saver for the ZIP export

Getting started

Requires Node.js 20 or newer (the build uses node --env-file-if-exists).

npm install
npm run dev

Open http://localhost:3000. The dev server serves English at / and Chinese at /zh/.

Building

SITE_URL is required: it is the origin used to generate canonical, hreflang and sitemap URLs. The build fails rather than emit tags pointing at the wrong host.

cp .env.example .env      # then edit SITE_URL
npm run build

or inline:

SITE_URL=https://example.com npm run build

npm run build runs three steps:

1. vite build — client bundle into dist/, leaving <!--app-html--> and the <!--seo-start--> / <!--seo-end--> markers in dist/index.html.
2. vite build --config vite.config.ssr.ts — renders entry-server.tsx and the locale data into dist-ssr/ (a build artifact, removed afterwards).
3. node scripts/prerender.mjs — renders the landing view for each locale, swaps in the per-locale head, and writes dist/index.html, dist/zh/index.html, sitemap.xml and robots.txt.

Other scripts:

npm run typecheck    # tsc --noEmit
npm run preview      # serve dist/ locally
npm run build:client # client bundle only, no prerender

Deploying

wrangler.toml publishes ./dist as Cloudflare static assets:

npx wrangler deploy

Not yet verified end to end on Cloudflare. In particular, confirm that /zh/ resolves to dist/zh/index.html under your assets configuration.

Adding a locale

1. Add the language code to Language in types.ts.
2. Create i18n/<code>.ts implementing Translations (the compiler will list anything missing).
3. Register it in i18n/index.ts — LANGUAGES and TEXTS.

localePath() keeps DEFAULT_LANGUAGE at the root and gives every other locale its own directory. Routing, prerendering, hreflang and the sitemap all derive from that list, so no other file needs touching.

Project structure

├── components/
│   ├── Button.tsx           # Shared button
│   ├── HelpModal.tsx        # Steps dialog (Esc to close, focus-trapped)
│   ├── ImageUploader.tsx    # Drag-and-drop / keyboard-accessible file input
│   ├── LandingSections.tsx  # Features, how-to, use cases, privacy, FAQ
│   └── PresetInput.tsx      # Numeric input with quick-select presets
├── i18n/
│   ├── en.ts                # English copy
│   ├── zh.ts                # Simplified Chinese copy
│   └── index.ts             # Locale list, path helpers
├── scripts/
│   └── prerender.mjs        # Per-locale HTML, sitemap.xml, robots.txt
├── utils/
│   └── imageProcessing.ts   # Canvas slicing, blob lifecycle, ZIP export
├── App.tsx                  # Application shell and editor
├── entry-server.tsx         # SSR entry used by the prerender step
├── index.tsx                # Client entry (hydrates the prerendered shell)
├── index.html               # Template with SEO and app markers
├── styles.css               # Tailwind layers and global styles
├── types.ts                 # Shared interfaces
├── tailwind.config.js
├── vite.config.ts           # Client build
└── vite.config.ssr.ts       # SSR build for prerendering

Notes

• Slice files are named slice_<row>_<col> counting from zero, inside a slices/ folder in the ZIP.
• Cells are computed with Math.floor, so sheets whose dimensions do not divide evenly lose the remainder at the right and bottom edges.
• Animated GIFs are read as a single frame.