A browser-based PNG glitch art editor with 48 real-time effects and direct byte manipulation.
- 48 Glitch Effects - Channel shifts, pixel sorting, data moshing, cellular automata, and more
- Hex Editor - Edit PNG bytes directly with real-time preview
- Layer System - Stack multiple effects with adjustable parameters
- Chunk Navigator - Visual breakdown of PNG structure (IHDR, IDAT, IEND, etc.)
- CRC Auto-fix - Automatically recalculates checksums on save
npx glitcheditOpens the editor in your browser automatically.
Download the latest release for your platform from Releases:
| Platform | Download |
|---|---|
| macOS (Apple Silicon) | glitchedit-darwin-arm64.tar.gz |
| macOS (Intel) | glitchedit-darwin-x64.tar.gz |
| Linux (x64) | glitchedit-linux-x64.tar.gz |
| Windows (x64) | glitchedit-windows-x64.zip |
# Extract and run
tar -xzf glitchedit-darwin-arm64.tar.gz
./glitchedit-darwin-arm64git clone https://github.com/helgesverre/glitchedit.git
cd glitchedit
npm install
npm startThen open http://localhost:3000 in your browser.
Download glitchedit.html from Releases and open it in your browser. No server required.
# Install dependencies
npm install
# Run dev server
npm start
# Run tests
npm test
# Generate effect previews (for help dialog)
npm run generate-previews
# Build single-file distribution
npm run build:bundle| Command | Description |
|---|---|
npm start |
Start local dev server at localhost:3000 |
npm test |
Run Playwright e2e tests |
npm run build:bundle |
Create single-file dist/glitchedit.html (~3.7MB) |
npm run build:exe |
Build standalone binary for current platform |
npm run build:exe:all |
Build binaries for all platforms |
npm run generate-previews |
Regenerate effect preview thumbnails |
npm run profile |
Profile CPU performance with Playwright + CDP |
The build:bundle command creates a standalone HTML file with all assets inlined:
- CSS embedded in
<style>tags - JavaScript bundled and minified with Bun
- Effect preview images as base64 data URIs
- fflate compression library inlined
Requires: Bun runtime (npm install -g bun or see bun.sh for installation)
- Open the app - a random image loads automatically
- Click + Add to apply glitch effects
- Adjust effect parameters with sliders
- Stack multiple effects by adding more layers
- Click Download to save your glitched image
| Key | Action |
|---|---|
Arrow keys |
Navigate hex view |
0-9, A-F |
Edit byte at cursor |
Shift+Click |
Select range |
Ctrl+G |
Go to offset |
Ctrl+Z |
Undo |
Ctrl+Shift+Z |
Redo |
Delete |
Randomize selection |
48 effects across 7 categories:
| Category | Effects |
|---|---|
| Filter | Filter Byte manipulation |
| Channel | Channel Shift, Swap, Orbit, Chromatic Aberration |
| Distortion | Pixel Sort, Block Glitch, Data Mosh, Warp Field, Spiral, Melt |
| Color | Quantize, Noise, Halftone, Plasma, Color Bleed |
| Generative | Turing Patterns, Game of Life, Cellular Automata, Perlin Flow |
| Stylize | Crystal, Erode, Convolution kernels |
| Blend | Temporal Echo with hue shifting |
Click the ? button in the app for a full effects guide with previews.
PNG files have a specific structure: signature bytes followed by chunks (IHDR, IDAT, IEND, etc.). Each chunk has a CRC checksum. GĻƗŦÇĦɆĐƗŦ:
- Decompresses IDAT chunks to raw pixel data
- Applies effects to the pixel buffer
- Recompresses and updates CRCs automatically
- Provides both "fixed" and "raw" export options
├── index.html # Main HTML
├── style.css # Styles
├── script.js # App logic
├── effects.mjs # 48 effect implementations (shared module)
├── server.ts # Bun server for standalone binary
├── bin/
│ └── cli.js # Node.js CLI for npx
├── assets/
│ └── effect-previews.json # Pre-generated effect thumbnails
├── scripts/
│ ├── generate-help-previews.mjs # Preview generator
│ ├── bundle.js # Single-file bundler
│ └── profile-performance.js # CPU profiler (Playwright + CDP)
├── .github/
│ └── workflows/ # CI/CD pipelines
└── tests/
└── app.spec.js # Playwright e2e tests
Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
MIT