User GuideMood Board

Mood Board

Mood boards are visual reference and inspiration boards for collecting images, colors, text notes, and links. Use them for character design references, location concepts, brand palettes, UI inspiration, or any creative collection.

Getting Started

  1. Navigate to Mood Board in the sidebar
  2. Click New Board to create a mood board
  3. Add items: images, color swatches, text notes
  4. Drag items to arrange them on the canvas
  5. Click Save to persist your board

Board Categories

Each board has a category for organization:

CategoryUse Case
CharacterCharacter design references, outfit ideas, face studies
LocationEnvironment concepts, architecture, landscapes
BrandColor palettes, typography, brand identity
UIInterface inspiration, layout patterns, component ideas
ConceptGeneral concept art, themes, abstract ideas
GeneralAnything else

Canvas Navigation

The mood board uses an infinite canvas with pan and zoom:

ActionHow
ZoomScroll wheel (zooms toward cursor, 10%–500% range)
PanHold Space + drag, or middle-click drag
Reset zoomClick the zoom percentage button in the toolbar

The grid dots scale and move with your viewport for visual continuity.

Adding Items

Images

  • Click the Image button in the toolbar and select a file
  • Or drag and drop image files directly onto the canvas (supports multiple files)
  • Images are uploaded to the backend and stored alongside the board data

Color Swatches

Click the Palette button to add a random color swatch. Select a swatch and use the color picker in the properties panel to change it. Useful for building color palettes.

Text Notes

Click the Text button to add a text note. Edit the content in the properties panel. Use notes for annotations, descriptions, or reminders.

Working with Items

Selecting

Click any item to select it. The properties panel appears on the right with:

  • Title — editable name for the item
  • Content — editable text (for text notes) or color (for swatches)
  • Tags — add tags by typing and pressing Enter
  • Lock position — prevent accidental moves
  • Coordinates — current x, y, width, height

Resizing

Select an item and drag the resize handle (bottom-right corner triangle) to change its size. Minimum size is 50x50 pixels. The new size is auto-saved to the backend.

Deleting

Select an item and click the trash icon that appears above it. Or select and press Delete.

Dragging

Drag items freely on the canvas. Positions are saved to the backend after each drag. Locked items cannot be dragged.

Board Management

Saving

Click the Save button in the toolbar to persist all changes. Changes to item positions are auto-saved after drag and resize operations.

Exporting

Click the Export button to download the board as a JSON file. The JSON contains all board metadata, items, and their positions. Useful for backup or sharing.

Deleting Boards

Hover over a board in the sidebar and click the X icon, or select a board and click the Delete button in the toolbar.

Storage

Mood boards are stored as JSON files at project/_MoodBoards/{board_id}.json. Uploaded images are stored in project/_MoodBoards/{board_id}/images/. This follows the same file-first pattern as entities and documents — the filesystem is the source of truth.

See Also

  • Maps — Spatial maps for entity placement and game engine export
  • Managing Entities — Creating entities to reference in your boards