Objects on a slide

The Builder works with 6 object types. Each has common properties (position, size, rotation, opacity, layering) + specific ones.

Text

Insert: click T in the toolbar → a text object with placeholder appears on the canvas.

Properties:

• Text (double-click the object = inline edit; Enter confirms)
• Font — Inter, Roboto, Lora, Playfair, JetBrains Mono… (sans / serif / monospace dropdown)
• Size — 8–400 px (or "font-resize handle" = drag the bottom-right corner with Shift)
• Style — Bold / Italic toggle
• Color — color picker
• Alignment — L / C / R
• Line height — 1.0 to 2.0

Tip: For dynamic font size change, hold Shift and drag the small square handle in the bottom-right corner of the selected text. Size updates in real time.

Image

Insert: click 🖼 in the toolbar → pick a file (JPG/PNG/WebP, max ~5 MB) → upload to R2 → appears on canvas.

Properties:

• Source URL (can upload new)
• Opacity 0–100 %
• Rotation
• Standard z-order, duplicate, delete

Resize: drag corner (free) or Shift+drag (preserve aspect ratio). Alternatively the 🔗 toggle in the properties panel = persistent aspect lock (for touch).

Video

Insert: click 🎬 in the toolbar → pick .mp4 (max ~50 MB) → upload to R2.

Properties:

• Video URL (can remove = delete video)
• Subtitles — a whole separate section, see Video subtitles
• Standard position/size/rotation

In the editor, video plays automatically (muted, loop) — for preview. In Present mode and MP4 export it plays the same way.

Automatic duration detection: when you insert a video (and when the project is opened later), the system measures its length from metadata. In HTML and MP4 export, the slide then won't end before the video finishes — it auto-extends to max(animations, video length) + 1.5 s so viewers can comfortably finish reading the slide text. Works for looped videos too (slide advances after one iteration + buffer). Before each export the system re-checks all video durations so the export never catches an unmeasured video.

Shapes (rect / ellipse / line)

Insert: □ rect, ○ ellipse, — line in the toolbar.

Properties:

• Fill color (rect/ellipse)
• Stroke — color + width
• Corner radius (rect)
• Line color + width (line)
• Standard position / rotation / opacity

Common properties

Link (URL) on objects

Any object (text, image, shape, …) can have a clickable URL link attached. In the properties panel under "Link (URL)", enter the address (e.g. https://pmgclub.com).

Behavior:

• In Present mode, HTML export, feed embed, and the /present-live projector, clicking the object opens the link in a new tab
• Click on an object with a link does not advance the slide (unlike a regular click)
• The cursor changes to a pointer when hovering over it

"Apply to all slides" button — creates independent copies of the same object with the same link on the remaining slides (idempotent — won't add a duplicate if a similar object already exists). Use: a global "buy now" button or a logo linking to the home page across the entire presentation.

Multi-select bulk edit

When selecting 2+ objects, the properties panel switches to bulk edit mode:

• Header: "Selected: N objects" + type breakdown
• Common properties — if all share the same value, it's shown; otherwise placeholder "Mixed"
• Change applies to all selected at once (one transaction, one undo)
• Bulk Bold/Italic, color, font, size available for text
• Fill, stroke and stroke width — when every selected object is a shape
• Animation — switch the panel to the Animation tab (see below)
• Actions: Duplicate (N) / Delete (N)

How to select multiple objects:

A floating badge "Selected N" with Done and × appears at the bottom of the canvas.

⚠️ A selection is not a group. Builder does not group objects permanently — the selection lasts until you clear it. Whatever must stay together afterwards is held together by position and layer order; to copy a whole arrangement to another slide use Cmd/Ctrl+C and paste (relative layout is preserved).

What else works on a selection:

• dragging any of the objects moves the whole group (see Group drag below)
• arrows nudge by 1 px, Shift + arrows by 10 px
• Cmd/Ctrl + D duplicates, Delete removes, Cmd/Ctrl + C copies

Group drag

When multiple are selected, dragging any of them moves the whole group by the same distance. Relative positions are preserved. Arrows same.

Z-order (layering)

In the properties panel, 4 buttons:

• ⏫ Bring to front — to top
• ⬆ Bring forward — one up
• ⬇ Send backward — one down
• ⏬ Send to back — to bottom (often for backgrounds)

Z-order is stored as zIndex: number on each object.

Aspect ratio during resize

Drag corner = free resize. To preserve aspect ratio:

• Desktop: hold Shift during drag
• Mobile/touch: toggle 🔗 in the properties panel (persistent)
• Multi-select: automatically preserves ratio (keepRatio Konva Transformer)

Tips

• Copy style from another object — not yet (planned)
• Object alignment (align center, distribute) — not yet in multi-select
• Snap to other objects — the Builder snaps to edges and centers of other objects during drag (pink lines)
• Snap to slide edges — also works