About this template
This template gives you a visual mood board tool built around a spatial canvas. Upload images, arrange them freely, add text notes, and generate new images with AI — all on a zoomable, pannable workspace with a dot grid background.
Each board is a separate canvas where you can place items at any position and size. Drag to reposition, use corner handles to resize or rotate, and right-click for context actions like copy, paste, and delete. Everything saves automatically to the database.
The dashboard lets you create, rename, reorder, and delete boards. Each board shows a thumbnail preview and timestamp. Boards can be reordered with drag-and-drop.
Authentication is built in — users sign up with email (or Google), verify their account, and get access to their private boards. All data is scoped to the authenticated user.
Best Use Cases
Brand and Campaign Mood Boards
Collect visual references for a new brand identity or campaign. Arrange images spatially to see how colors, textures, and styles relate to each other. Add text notes to capture thoughts alongside the visuals.
Design Project References
Build a reference board before starting a design project. Upload screenshots, photos, and illustrations. Use AI generation to explore visual directions you haven't found yet.
Content Planning
Plan visual themes for social media, editorial shoots, or product launches. Organize images by mood, palette, or concept across separate boards.
Personal Inspiration Archive
Keep a running collection of things that catch your eye. Create boards by topic — architecture, typography, fashion, interiors — and revisit them whenever you need a creative spark.
Getting Started
Step 1: Remix This Template
Click "Remix" to create your copy. You'll have a working mood board app you can explore before adding your own content.
Step 2: Familiarize Yourself With the Project
Go to User > Settings > Knowledge, and read what's under "Project knowledge" to understand the intended architecture and data model. You can also ask Lovable in the chat for more details.
Step 3: Customize Your Brand
Update colors, fonts, and your app name. The design system uses semantic tokens so you can change the entire look by editing a few CSS variables.
Step 4: Create Your First Board
Sign up, head to the dashboard, and create a new board. Upload images, add text, and arrange everything on the canvas.
Step 5: Try AI Image Generation
Use the magic wand tool in the floating dock to generate images from text prompts directly onto your canvas.
Step 6: Go Live
Deploy with one click and share with your team. Lovable handles hosting and performance.
Step 7: Iterate and Make It Yours
Continue building and make any changes to the app to suit your creative workflow and preferences.
Conclusion
This mood board creator works for designers, art directors, content creators, and anyone who thinks visually. You get an infinite canvas, drag-and-drop image management, AI generation, text annotations, and multi-board organization in a template you can deploy in minutes. Whether you're planning a brand direction, collecting references for a project, or building a visual archive, the spatial layout replaces the Pinterest board or folder of screenshots you've been juggling.
Features & capabilities
Infinite spatial canvas
Place images and text anywhere on a zoomable, pannable canvas with a subtle dot grid background.
Image upload and placement
Upload images from your device and place them on the canvas. Drag to reposition, resize with handles, and rotate with corner controls.
AI image generation
Generate images from text prompts using the built-in AI tool. Created images appear directly on your canvas ready to arrange.
Text annotations
Add text items to your canvas for notes, labels, or captions. Double-click to edit text in place.
Multi-board dashboard
Create and manage multiple boards from a central dashboard. Each board shows a thumbnail preview, title, and last-updated timestamp.
Drag-and-drop reordering
Reorder boards on the dashboard with drag-and-drop. On the canvas, freely move and arrange all items.
Copy and paste
Copy selected items and paste them onto the canvas. Works with keyboard shortcuts for fast workflows.
Undo and redo
Full undo/redo stack for canvas actions. Never worry about losing work from an accidental move or delete.
Context menu
Right-click any item for quick actions — copy, paste, delete, and more.
Floating toolbar
A dock at the bottom of the canvas gives you quick access to tools — select, upload, text, delete, download, and AI generate.
Keyboard shortcuts
Power-user shortcuts for select, copy, paste, undo, delete, zoom, and pan. A built-in shortcuts panel shows all available keys.
Board export
Download your canvas as an image to share or use in presentations.
Authentication
Email-based signup and login with Google sign-in support. Users verify their email before accessing the app.
Responsive design
Works on desktop and adapts to different screen sizes with a responsive canvas and UI.
Dark and light mode
Toggle between dark and light themes from the dashboard navbar.
