A Professional, Browser-Based Image Editing Studio
PixelForge is a powerful, lightweight, and fully client-side image editor built with vanilla web technologies. It offers a premium dark theme UI and a comprehensive suite of editing tools ranging from basic filters to drawing and text overlays.
Fine-tune your images with real-time CSS filters applied directly via the Canvas API:
- Brightness & Contrast: Perfect your image lighting.
- Saturate & Grayscale: Control color intensity.
- Sepia & Hue Rotate: Apply creative color effects.
- Blur: Add softness or depth.
- Opacity & Invert: Advanced blending and creative inversion.
- Transform: Rotate left/right (90°), flip horizontally/vertically, and use a precision free-rotate slider.
- Crop: Interactive drag-to-select cropping with support for freeform and fixed aspect ratios (1:1, 4:3, 16:9).
- Draw Studio: Freehand brush, eraser, line, rectangle, and circle tools. Features an interactive color picker and adjustable brush size.
- Text Overlay: Add typography to your images. Customize font size, family (Inter, Arial, Georgia, etc.), color, bold, and italic styles with simple click-to-place mechanics.
- Undo/Redo History: Robust history stack (up to 40 steps) allowing you to revert or reapply changes safely.
- Zoom & Pan: Mouse-wheel and button-based zoom controls (in, out, fit to screen) for precision editing.
- Compare Mode: Click and hold to instantly compare your edited version with the original image.
- Drag & Drop: Seamlessly import images by dragging them directly onto the canvas.
- Export your masterpiece in multiple formats: PNG (Lossless), JPEG (Compressed), or WebP (Modern).
- Adjustable quality slider for JPEG and WebP formats to balance file size and visual fidelity.
Speed up your workflow with native keyboard shortcuts:
| Shortcut | Action |
|---|---|
Ctrl + Z / Cmd + Z |
Undo last action |
Ctrl + Y / Cmd + Y |
Redo action |
Ctrl + S / Cmd + S |
Open Export Dialog |
+ / = |
Zoom In |
- |
Zoom Out |
0 |
Fit to Screen |
Escape |
Cancel Crop / Text Placement / Close Modal |
PixelForge is built to be fast and completely serverless (client-side processing only):
- Structure: Semantic HTML5.
- Styling: Tailwind CSS (via CDN) for rapid, responsive layout building, complemented by custom CSS for complex range sliders and keyframe animations.
- Logic: Vanilla JavaScript (ES6+).
- Rendering: HTML5
<canvas>API for high-performance image manipulation. - Icons: Google Material Icons Round.
Since PixelForge is entirely client-side, setup is instantaneous!
- Clone the repository:
git clone https://github.com/yourusername/pixelforge.git
- Navigate to the project directory:
cd pixelforge - Open
index.htmlin your favorite modern web browser (Chrome, Firefox, Safari, Edge). Note: For the best experience, you can serve it via a local development server like Live Server (VS Code) or Python'shttp.server.
This project is open-source and available under the MIT License. Feel free to fork, modify, and use it in your own projects!