Home
Layers is a professional-grade, non-destructive image annotation system for MediaWiki. Add captions, callouts, highlights, shapes, and drawings to images without modifying the original files.
| 🎨 Professional Tools | 🔒 Non-Destructive | ♿ Accessible |
|---|---|---|
| 13 drawing tools, style presets, alignment & distribution | Original images never modified | WCAG 2.1 compliant, full keyboard support |
- Deep Linking to Editor — Open the editor with a specific layer set via URL parameters
- Fullscreen Lightbox Viewer — View annotated images in a modal overlay
-
Wikitext Link Options — Control click behavior with
layerslink=editororlayerslink=viewer
See Changelog for full details.
- Installation — Download, configure, and set up Layers
- Quick Start Guide — Create your first annotation in 5 minutes
- Configuration Reference — All configuration parameters explained
- Drawing Tools — Complete guide to all 13 tools
- Keyboard Shortcuts — Master the keyboard for faster editing
- Style Presets — Save and reuse style configurations
- Named Layer Sets — Multiple annotation sets per image
- Alignment and Distribution — Professional layout tools
- Architecture Overview — System design and code organization
- API Reference — Backend API endpoints and contracts
- Frontend Architecture — JavaScript module structure
- Contributing Guide — How to contribute to Layers
- Testing Guide — Running and writing tests
- Wikitext Syntax — Using layers in wiki pages
- Permissions — User rights and group configuration
- Troubleshooting — Common issues and solutions
- FAQ — Frequently asked questions
- Changelog — Version history
| Resource | Description |
|---|---|
| GitHub Repository | Source code and issue tracker |
| README | Project overview |
| CHANGELOG | Version history |
| Issue Tracker | Report bugs or request features |
| Metric | Value |
|---|---|
| Version (main) | 1.2.1 |
| Version (REL1_39) | 1.1.13 |
| Release Date | December 23, 2025 |
| Test Suites | 125 |
| Total Tests | 6,479 |
| Code Coverage | 92% |
| JavaScript Files | 96 |
| ES6 Classes | 87 |
- Educational Content — Annotate diagrams, label anatomy, highlight key concepts
- Documentation — Add numbered steps, highlight UI elements
- Visual Effects — Apply blur effects, draw attention to specific areas
- Maps & Geography — Add markers, routes, region highlights
- Scientific Imagery — Label specimens, mark measurement points
- Collaborative Review — Multiple annotators with named layer sets
Layers draws inspiration from industry-leading design tools:
- Figma — Collaborative design
- Canva — Accessible design tools
- Adobe Photoshop — Professional image editing
Users familiar with these tools will feel right at home with Layers.