93 lines
3.5 KiB
Markdown
93 lines
3.5 KiB
Markdown
# easy-png-tools
|
|
|
|
Browser-based PNG utility toolkit — no server, no data upload, everything runs locally.
|
|
|
|
Inspired by online services like onlinepngtools.com, but fully offline-capable and open source.
|
|
|
|
## Features
|
|
|
|
- **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](https://pnpm.io/) v11.20+
|
|
|
|
### Install & Run
|
|
|
|
```bash
|
|
pnpm install
|
|
pnpm dev
|
|
```
|
|
|
|
### Build
|
|
|
|
```bash
|
|
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
|
|
|
|
```txt
|
|
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](docs/roadmap.md) for the full development plan. Current phases:
|
|
|
|
1. **Phase 1** — TypeScript core + web UI (in progress)
|
|
2. **Phase 2** — Rust/WASM core for performance-critical operations
|
|
3. **Phase 3** — CLI tool
|
|
|
|
## License
|
|
|
|
[MIT](LICENSE)
|