Canvas Designer

The Canvas Designer is a drag-and-drop authoring environment for creating multi-page interactive graphics, overlays, and presentations that play back on your LED displays. It is part of the Creator suite — a set of creative tools accessible from the Create button in the main toolbar.

Getting Started

Click Create in the main toolbar to open the Creator suite and launch the Canvas Designer. You can start from a blank canvas or open an existing design.

Canvas Elements

The canvas supports the following element types, each with its own properties panel on the right:

Element	Description
Text	Rich text block with font, size, color, alignment, and shadow controls
Image	Static image from your media library
Video	Video asset with looping and autoplay options
Shape	Rectangles, ellipses, and other geometric shapes with fill and border
Line	Straight SVG line with configurable start/end points, stroke color, width, and cap style
Carousel	Auto-advancing or hover-triggered image slideshow
ScrollBox	Scrollable content region with configurable scroll behavior
Gallery	Browsable image and video gallery with a full-screen lightbox that supports video playback
iFrame	Embedded web content

Adding Elements

Drag an element type from the Elements Panel on the left onto the canvas, or use the toolbar to insert at a default size.

Selecting and Moving Elements

Click any element to select it. Selected elements show resize handles. Drag the element to reposition it.

To select multiple elements, hold Shift and click, or drag a selection box around them.

Grouping Elements

Select two or more elements and use Group (right-click → Group, or the toolbar shortcut) to combine them into a single unit. Grouped elements move, resize, and copy together. Right-click a group and choose Ungroup to release them.

Proportional Resize

Hold Shift while dragging a corner handle to resize an element proportionally.

Cropping Images and Videos

Select an image or video element and double-click it (or click the Crop button in the toolbar) to enter crop mode. Drag the crop handles to define the visible region without modifying the underlying file.

Rotating Elements

Every element on the canvas has a rotation handle at the top center of its selection box. Grab the handle and drag to rotate the element visually on the canvas — the element orbits around its center and the bounding box rotates with it. While you drag, a live degree readout shows the current rotation angle.

Rotation can still be set precisely by entering a value in the element's properties, which is useful when you need an exact angle rather than a freehand rotation.

Independent Corner Radius

Shapes and other elements that support rounded corners can have each corner's radius rounded independently, so you can round individual corners by different amounts rather than applying a single uniform radius to all four.

Alignment and Smart Guides

When you drag elements, smart alignment guides appear automatically — lines that snap to the edges and centers of other elements and the canvas boundaries. This makes it easy to align elements precisely without a grid.

To align multiple elements:

1. Select two or more elements
2. Use the Alignment Controls in the Properties panel (right side) to align by left edge, center, right edge, top, middle, or bottom, or to distribute elements evenly

Context Menus

Right-click any element on the canvas to access the Canvas Context Menu with quick actions including copy, paste, duplicate, group, lock, and layer order controls.

Right-click a layer in the Layers Panel to access the Layer Context Menu with the same options.

Layers Panel

The Layers Panel (left side) shows a stacked list of all elements on the current page. Drag layers to reorder them. Click the eye icon to show or hide a layer.

Typography and Fonts

The Typography section in the Properties panel provides font selection, size, weight, line height, letter spacing, color, alignment, and text shadow controls.

Available fonts include Inter, Roboto, Open Sans, Lato, Montserrat, Playfair Display, and more. Custom fonts can also be uploaded and used in text elements. Tenant-specific fonts may also be available depending on your organization's configuration.

Pages

Canvas designs can have multiple pages — think of these as slides in a presentation. Each page has its own set of elements.

• Click the + button at the bottom of the Pages panel to add a page
• Drag pages to reorder them
• Click a page thumbnail to switch to it

Setting a Thumbnail

Right-click a design in the library or use the Set Thumbnail option in the editor's top menu to choose a custom thumbnail image for the design. This controls how the design appears in the Asset Library and Experiences page.

Saving

Designs are saved automatically. Use File → Save (or Ctrl/Cmd+S) to save manually. A design name can be set from the top toolbar.

Presenting a Design

Click Present in the top toolbar to launch the design in Present Mode — a full-screen interactive playback environment.

See Present Mode for details on interactive actions, page transitions, and exiting.

Resuming Where You Left Off

A design that contains a PowerPoint element remembers the slide that element was on. Refresh the browser, or navigate away and come back to the design, and it resumes at that slide instead of restarting from the first one — useful when a presentation is running unattended on a wall and the page reloads, or when you step away from a kiosk mid-deck.

The remembered position is stored per design and per element in the browser you are viewing on, so each device picks up where it left off; it is not shared between viewers. Presenting the design somewhere else, or on another device, starts from that device's own last position.

Casting a Design to a Player

Canvas designs can be sent directly to a connected Vū Media Player without entering Present Mode:

1. From the Experiences page, open the design's context menu and click Launch Canvas Design
2. In the dialog, select Cast to Wall and choose your target player
3. The design begins playing on the wall immediately

This allows operators to push a canvas design to a display without it taking over their local screen.

Canvas Editing Enhancements

The Canvas editor includes several precision and consistency improvements: adjustable guide rulers, a new push page transition, a global Canvas Settings panel for applying settings across your whole design, a full-resolution image preview, a hand tool for moving the view, hide/unhide on the pages list, steadier layer drag-and-drop, and proportional resizing from the numeric size fields.

Guide Rulers

The editor can display measurement rulers along the top and left edges of the canvas, with tick marks that reflect the current zoom level. Use them to place adjustable guides for precise alignment:

• Show or hide the rulers with the Shift+R shortcut. (Cmd/Ctrl+R is reserved for browser reload.)
• Create a guide by dragging out from a ruler: drag from the top ruler to place a horizontal guide, or from the left ruler to place a vertical guide.
• While you drag a guide, a value badge shows its exact position, so you can drop it precisely.
• Hold Shift while dragging to snap the guide to coarse percentage-of-canvas positions.
• Reposition an existing guide by dragging it; the value badge appears again while moving.

Guides act as alignment references for arranging elements accurately across the canvas.

Full-Resolution Image Source

While you edit, image elements normally render from a thumbnail of the source file — fast to load, but a large photo scaled up on the canvas can look soft or blurry while you are working on it, even though it plays back sharp.

Show full-resolution images switches the editor to the original source image instead:

1. Open the View menu in the top menu bar.
2. Click Show full-resolution images. A checkbox next to the item shows whether it is on; it is off by default.
3. Image elements on the canvas re-render from the full-size source file. Turn it off again the same way.

Notes and limitations:

• The setting is a view preference for the editor. It does not change the design, the stored asset, or how the design looks when you present or cast it — presentation always uses the full-size source.
• The setting applies to the whole canvas, across every page, not to one selected element.
• Full-size files are heavier than thumbnails, so a design with many large images takes longer to paint with this on. If the editor feels sluggish while you arrange elements, switch it off and turn it back on when you need to judge image detail.
• If a full-size source can't be loaded, the element falls back to its thumbnail rather than showing nothing.

Hand Tool and Panning

Zoomed in, you often need to move the view rather than the artwork. The Hand tool does that without any risk of dragging an element out of place:

• Click the Hand tool (the hand icon) in the floating toolbar, or press H. The cursor becomes a grab cursor.
• Drag anywhere on the canvas to move the view. The cursor changes to a closed grab cursor while you drag.
• Switch back to editing with the Select tool (the arrow icon, or V).

For a quick pan without changing tools, hold the spacebar and drag. While the spacebar is held, dragging pans the view instead of moving elements; release it and you are back in whatever tool was already active, with nothing selected or moved. Holding Ctrl/Cmd and dragging, or dragging with the middle mouse button, pans the same way.

Spacebar panning is deliberately ignored mid-gesture — if you are already dragging, resizing, rotating, drawing a selection box, or placing a new element, holding the spacebar will not interrupt it.

Hiding Pages

Pages can be hidden from playback without being deleted, matching the show/hide behavior the Layers Panel already has for elements. Use it to park a work-in-progress page, or to keep a variant of a slide in the design without showing it to an audience.

1. Open the Pages panel.
2. Hover the page you want to hide and click the eye icon on its row (its tooltip reads Hide page), or open the page's ⋯ overflow menu and choose Hide Page.
3. A hidden page keeps a visible eye-off icon on its row. To bring it back, click that icon again or choose Show Page from the same menu.

What hiding does:

• Hidden pages are skipped in Preview, in the published Present view, and when the design is cast to a wall. They stay fully editable in the editor.
• If you open a hidden page in the editor, a This page is hidden notice appears in the top bar with a Show button to unhide it immediately.
• If the page you are hiding is the target of a navigation or timeout action elsewhere in the design, Vū Studio asks Hide page? and tells you how many places reference it, so you can cancel rather than break a link. Unhiding never prompts.
• Pages that are hidden are marked (hidden) wherever you pick a target page, such as a button's navigate action or the canvas default timeout, so you can see that a link points at a page nobody will reach.
• If every page in a design is hidden there is nothing to show: Preview and Cast are disabled and explain why (No visible pages to present).

Layer Drag-and-Drop Reordering

Reordering and re-nesting in the Layers Panel is drag-and-drop, and the interaction is built to stay predictable in deep or crowded designs:

1. Point at the layer you want to move and grab its drag handle — the grip of dots at the left of the row. Only the handle starts a drag, so clicking a row still selects it, double-clicking still renames it, and the visibility, lock, and delete controls keep working.
2. Drag up or down. The other rows slide out of the way as you move, previewing the order you'll get when you release — what you see while dragging is the result.
3. To change nesting, move right while dragging to nest the layer into the container above it, or left to pull it back out. The dragged row's indentation shows the level it will land at.
4. Release to commit. Each drop is a single undo step, so one Ctrl/Cmd+Z puts it back.

Notes:

• Dragging a container carries its children with it; the group moves as one unit and keeps its internal order.
• Locked layers can't be dragged, and locked containers refuse drops.
• A scroll box can't be nested inside another scroll box, so that drop is rejected.
• The Pages panel uses the same drag-handle interaction for reordering pages (pages don't nest).

Proportional Resizing from Width and Height

The W and H fields in the Properties panel resize the selected element numerically. With Constrain proportions (the checkbox under those fields, on by default) enabled, typing a new Width scales the element proportionally — the height follows so the image keeps its aspect ratio, and the same applies when you type a height.

• Clear the Constrain proportions checkbox to set width and height independently and stretch an element on purpose.
• If an image or video has been stretched away from its natural aspect ratio, a Reset to natural size button (the restore arrow) appears next to the H field. Click it to snap the element back to the source file's own proportions.
• Elements have a minimum size, so a value below it is clamped rather than accepted.

Push Transition

The push transition is a new page exit transition type. Unlike a plain slide (where only the outgoing page moves), a push moves both the outgoing and incoming pages together — they travel edge-to-edge like a filmstrip, with the new page pushing the old one off-screen. Push supports a direction (left, right, up, or down) and a duration.

You can apply push as a page's exit transition in its Actions panel, or set it as the design-wide default in Canvas Settings (see below).

Global Canvas Settings

The Canvas Settings panel provides one centralized place for settings that affect the entire canvas, rather than editing them piecemeal. Open it from the top menu bar. The panel is labeled "Applies to the whole canvas, across every page" and includes:

Setting	What it controls
Canvas Size	The canvas width (W) and height (H)
Default Background Color	The background color used by every page, unless a page sets its own in its Properties
Default Exit Transition	The transition used for new pages; any page can override it in its own Actions panel
Default Timeout to Page	An automatic "go to page after a delay" applied to any page that doesn't set its own Timeout to Page action; choose a target page and a delay, or turn it off
Preview Navigation	A toggle — "Move between pages with Left/Right arrow keys" — that applies in both Preview and the published Present view

Global settings (dimensions, background color) can be reached from any page, while per-page settings (such as a page's own exit transition or timeout) remain editable on that page.