The Bitmap Gallery Builder was created to empower users to build highly customized, interactive online portfolios or "linktree-style" pages without writing a single line of code. It bridges the gap between powerful design tools and simple website builders by offering a flexible, canvas-based editing experience with a focus on a simple, powerful final output.
The entire application runs in a single HTML file, and the final export is a self-contained static website, making it incredibly easy to host on platforms like Netlify, Vercel, or GitHub Pages.
- Visual, Canvas-Based Editor: Drag, drop, resize, and rotate elements freely on an 800x800 canvas with intuitive pan and zoom controls.
- Rich Content Blocks: Create "Blocks" that act as powerful containers for various media types:
- Images & Videos (from URL or local upload)
- Formatted Text
- YouTube & X (Twitter) embeds
- Customizable hyperlinks
- Vector Tools: Add standalone text and free-form doodle shapes to complement your gallery.
- Robust Progress Management:
- Browser Cache: Automatically saves your work to the browser's local storage, allowing you to resume your session after closing or refreshing the page.
- Import/Export Drafts: Save your entire canvas state to a
.jsonfile to create backups or move your work between computers.
- One-Click Website Export: Package your entire creation into a self-contained
.zipfile, including a staticindex.htmland all necessary assets, ready for immediate deployment. - Undo/Redo History: A reliable undo/redo system (
Ctrl+Z) tracks every action for a stress-free editing experience. - Advanced Customization: Use the context-aware properties panel to edit titles, descriptions, and even apply decoration overlays to your blocks with real-time controls for opacity, scale, and corner radius.
The Bitmap Gallery Builder is designed to be intuitive. Here’s how to get started in 5 simple steps:
Simply open the gallery-build.html file in your web browser (like Chrome or Firefox).
Use the main control buttons to add your first elements:
- Click "Add Block" to create a new content block.
- Click "T+ Add Text" to add standalone text.
- Click "✏️ Doodle" to enter drawing mode and create free-form lines.
- Select an element by clicking on it. A transformer tool will appear, allowing you to drag, resize, and rotate it.
- With an element selected, the Properties Panel on the right will activate. Here you can:
- For Blocks: Change the title, description, and add content like images, videos, or links. Switch to the "Decoration" tab to add a stylish image overlay.
- For Text: Change the text content, font size, and color.
You have two ways to save your work:
- Save to Cache: Click the "Save to Local Cache" button. Your work is now saved in the browser. If you refresh the page, it will automatically reload.
- Export Draft: Click the "Export Draft" button to save your entire project as a
gallery-draft.jsonfile. This is useful for creating backups. You can load it back anytime using the "Import Draft" button.
Once you are happy with your design, click the "📁 Export as .zip" button. This will generate a .zip file containing your finished, interactive website. Unzip it and upload the contents to any static web host to share your gallery with the world!
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Created by: @Evan_XYZ_ on X