Pixel-level image processing — format conversion, transparency/alpha channel, color transformations, geometry, filters/convolutions, morphology, quantization & palettes, image generation, text/watermarks, analysis & checks
Pipeline system (workspace) — load image → chain multiple tool steps → sequential application → download result; pipelines saved to localStorage, exportable as JSON
Web Worker execution — heavy operations run off the main thread with automatic fallback to direct calls
i18n — full Russian and English localization with search matching
Dark/Light themes — persisted to localStorage
Pure TypeScript core — lib/core/ operates on ImageData/Uint8ClampedArray with no DOM dependency
~30+ tools across categories: transparency, color, geometry, filters, morphology, palettes, generation, text, analysis

Tech Stack

SvelteKit (Svelte 5, runes mode) with static adapter — pure static export, no server
Vite + TypeScript (strict)
Vitest for unit tests
ESLint + Prettier
pnpm (required, ^11.20.0)
Lucide icons, IBM Plex fonts (self-hosted)

Getting Started

Prerequisites

pnpm v11.20+

Install & Run

pnpm install
pnpm dev

Build

pnpm build

Static output is written to web/build/.

Other Commands

Command	Description
`pnpm --dir web test`	Run unit tests (Vitest)
`pnpm --dir web check`	Type-check (svelte-check)
`pnpm --dir web lint`	Lint (ESLint)
`pnpm --dir web format`	Format code (Prettier)
`pnpm format:docs`	Format docs (Prettier)
`pnpm --dir web preview`	Preview production build

Project Structure

easy-png-tools/
├── web/                    # Main SvelteKit application
│   ├── src/
│   │   ├── lib/
│   │   │   ├── core/       # Pure TS image processing (ImageData-based)
│   │   │   ├── components/ # UI components
│   │   │   ├── tools/      # Pipeline, executor, overlay store
│   │   │   ├── i18n/       # Localization (ru/en)
│   │   │   └── registry.ts # Tool registry (source of truth)
│   │   └── routes/         # SvelteKit routes
│   └── build/              # Static export output
├── docs/                   # Architecture docs, roadmap, plans
└── refs/                   # Design reference (Next.js, not part of runtime)

Architecture

The project is built around a tool registry (registry.ts) — each tool is a self-contained entry with {id, title, description, category, params, run}. Pages, forms, and pipelines are generated from this registry.

Core image processing lives in lib/core/ and operates directly on ImageData objects with no browser API dependencies, making it portable to other environments (WASM, CLI) in the future.

Roadmap

See docs/roadmap.md for the full development plan. Current phases:

Phase 1 — TypeScript core + web UI (in progress)
Phase 2 — Rust/WASM core for performance-critical operations
Phase 3 — CLI tool

License

MIT