https://github.com/muhammad-fiaz/pixelforge
PixelForge is a fast, modular, vanilla TypeScript photo editor designed for the browser. It supports layers, multiple tools, filters, tabbed projects, theme toggling, and image export — all without needing a server.
https://github.com/muhammad-fiaz/pixelforge
editing html html-css-javascript image-editing-app image-editor imageeditor javascript photo-editing photoshop pixel-editor pixel-forge pixelforge tailwindcss typescript vanilla-js vanilla-typescript vite
Last synced: 26 days ago
JSON representation
PixelForge is a fast, modular, vanilla TypeScript photo editor designed for the browser. It supports layers, multiple tools, filters, tabbed projects, theme toggling, and image export — all without needing a server.
- Host: GitHub
- URL: https://github.com/muhammad-fiaz/pixelforge
- Owner: muhammad-fiaz
- License: apache-2.0
- Created: 2025-08-28T10:27:13.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-08-28T15:11:18.000Z (about 1 month ago)
- Last Synced: 2025-08-28T18:40:34.582Z (about 1 month ago)
- Topics: editing, html, html-css-javascript, image-editing-app, image-editor, imageeditor, javascript, photo-editing, photoshop, pixel-editor, pixel-forge, pixelforge, tailwindcss, typescript, vanilla-js, vanilla-typescript, vite
- Language: TypeScript
- Homepage:
- Size: 78.1 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
PixelForge
Table of Contents
- [Quick start](#quick-start)
- [Notes](#notes)
- [Assumptions](#assumptions)
- [Features implemented](#features-implemented)
- [Run](#run)
- [Structure](#structure)
- [License](#license)
A fast, modular, vanilla TypeScript photo editor with layers, tools, filters, tabbed projects, export and theme toggle.
Repository: https://github.com/muhammad-fiaz/PixelForge
## Quick start
Clone the repo and run the dev server:
```powershell
git clone https://github.com/muhammad-fiaz/PixelForge.git
cd PixelForge
npm install
npm run dev
```
## Notes
The project uses Vite and TypeScript. If you use Bun you can run `bun run dev` or `bunx vite` per your environment.
## Assumptions
- Runs fully in the browser with HTML5 Canvas, no server required.
- TIFF/BMP export falls back to browser-supported encoders (PNG when unavailable).
- Fonts available depend on the OS/browser; add webfonts if needed.
## Features implemented
- Tabs with multiple projects; Save Current, Save All (JSON project files)
- Import images (PNG/JPEG/BMP/WEBP via browser support)
- Layer manager: add/toggle/opacity, merge-down, active selection
- Tools: Move, Brush, Eraser, Picker, Zoom (wheel), Crop, Text, Shapes (Rect/Ellipse/Line)
- Filters: Grayscale (B/W), Sepia, Invert, Blur, Sharpen, Contrast, Brightness, Hue
- Export: PNG, JPEG; BMP/TIFF/SVG best-effort
- Responsive UI, Lucide icons, GSAP intro animations
- Theme toggle (light default)
## Run
- Dev: `npm run dev` (or `bun run dev` / `bunx vite`)
- Build: `npm run build`
- Preview: `npm run preview`
## Structure
- src/types: data models
- src/core: render engine and app store
- src/layers: layer factory and manager
- src/tools: all tools
- src/filters: image filters
- src/file: import/export and serialization
- src/ui: UI composition and event wiring
## License
This project is licensed under the Apache-2.0 License — see the [LICENSE](LICENSE) file for details.