https://github.com/tstraub89/gallery_wall

A web app for designing and organizing gallery walls
https://github.com/tstraub89/gallery_wall

canvas gallery gallery-app gallery-images javascript layout-design photo-management react vite

Last synced: 4 months ago
JSON representation

A web app for designing and organizing gallery walls

Host: GitHub
URL: https://github.com/tstraub89/gallery_wall
Owner: tstraub89
Created: 2026-01-18T17:47:06.000Z (5 months ago)
Default Branch: main
Last Pushed: 2026-01-31T17:27:45.000Z (4 months ago)
Last Synced: 2026-01-31T19:57:27.715Z (4 months ago)
Topics: canvas, gallery, gallery-app, gallery-images, javascript, layout-design, photo-management, react, vite
Language: TypeScript
Homepage: https://tstraub89.github.io/gallery_wall/
Size: 30.3 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

# Gallery Wall Planner 🖼️✨

**Visualize your perfect gallery wall before you hang a single nail.**

![Gallery Wall Planner Preview](./example.png)

A powerful, interactive web application designed to help you plan complex gallery layouts with real frames and personal photos. Transition from a pile of frames on the floor to a perfectly aligned wall with confidence.

---

## 🚀 Key Highlights

* **Precision Layout Canvas**: An infinite workspace with pan, zoom, and smart snapping tools (`S`, `#`) for pixel-perfect alignment.
* **Instant Visualization**: Drag and drop photos from your computer directly onto frames to see your memories in situ.
* **Portable Project Bundles**: Save your entire workspace—including photos—into a single `.gwall` file for easy sharing or backup.
* **Print-Ready Photo Export**: preparing your gallery for reality? Export all your cropped photos in a high-resolution ZIP (with smart DPI capping), ready for professional printing.
* **Intelligent Search & Filter**: Instantly find frames by label or size (e.g., "8x10") and photos by filename. Filter collections by shape or status.
* **Inventory First Workflow**: Keep track of your physical frames. Even if you remove a frame from the wall, it stays in your "Unplaced" library for later use.

---

## 🛠️ Detailed Features

### 🖼️ Inventory & Frame Management
* **Adaptive Grid Inventory**: A smart sidebar that shifts between list and grid views, featuring "Placed" status overlays on frame previews.
* **1:1 Inventory Manifest**: Every frame is accounted for individually with "Placed" and "(Duplicated)" indicators.
* **Smart Parsing & Import**: Batch import dimensions from plain text (e.g., "8x10", "11 1/4 x 14 matted"). Handles fractions and keywords automatically.
* **Custom Labels & Scaling**: Name your frames (e.g., "Light Switch") directly. Labels automatically scale to fit their container for maximum readability.
* **Geometric Variety**: Full support for traditional rectangles and modern round/oval shapes with automatic proportional scaling.
* **Aesthetics**: Set frame colors using presets or a color picker; toggle and adjust matting openings on the fly.
* **Direct Dimension Control**: Resize frames directly in a tabbed **Properties Panel**; changes update the wall and inventory dynamically.
* **Additive Layout Logic**: Adding borders or mats grows the frame *outward*, ensuring your internal photo dimensions remain exactly as intended.

### 📸 Photo Management
* **Masonry Library**: A beautiful, efficient grid for managing your uploaded photos.
* **Smart Integration**: Drag files directly from your computer onto a canvas frame to place them and auto-save them to your library.
* **Photo Fine-Tuning**: Dedicated adjustment tab for scale, position, and 90° rotation within the frame.
* **Search**: Find photos by filename instantly as your library grows.

### 🎨 Workspace Interaction
* **Modern Glass HUD**: Sleek, translucent on-canvas controls for zoom, grid toggles, and snapping that maximize workspace visibility.
* **Marquee Selection**: Bulk-select, nudge, or duplicate clusters of frames by dragging on the background.
* **Context Menu**: Right-click for layering (Bring to Front), duplication, and photo removal.
* **Advanced Alignment**: Use **Lucide-React** standard icons to align frames by edges or centers.
* **Undo / Redo**: Full session history support via `Ctrl+Z` / `Ctrl+Y`.
* **Automatic Persistence**: Your progress is instantly saved to local storage—refresh or return later exactly where you left off.

### 💾 Project Controls
* **Shopping List**: Export a text manifest of all frames in your design for easy shopping.
* **Canvas Snapshot**: Save your layout as a PNG to share or use as a reference.
* **Multi-Project Support**: Create and switch between distinct gallery wall designs.

---

## ⌨️ Shortcuts & Navigation

Click the **"?"** button in the header for the in-app **Quick Start Guide**.

---

## 🏗️ Getting Started

1. **Install**: `npm install`
2. **Dev Server**: `npm run dev`
3. **Browse**: Open `http://localhost:5173`.

> [!TIP]
> You can load [example.gwall](./example.gwall) to try out the tool with a preconfigured gallery wall layout. You can also check [example_frame_template.txt](./example_frame_template.txt) to see how to format your own frame collection for batch importing.

**Tech Stack**: Built with React 19 (Vite), **TypeScript**, CSS Modules, and IndexedDB for persistent local storage.

v2.0.0 Released Jan 2026. 🚀✨

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/tstraub89/gallery_wall

Awesome Lists containing this project

README