Design Editor
The Design Editor is a dedicated full-page workspace where you design how your display looks and what content plays in each area.
Editor Overview
Section titled “Editor Overview”The editor opens at its own route (/admin/designs/:id) when you click the edit action on a design card in Designs (/admin/designs). It is a full-page route — there is no overlay or modal. Navigating to /admin/layouts redirects automatically to /admin/designs.
Scaled Layout Preview
Section titled “Scaled Layout Preview”The center of the editor shows a scaled preview of your layout at its actual proportions. This preview updates live as you make changes so you always see how your display will look.
Adding and Editing Areas
Section titled “Adding and Editing Areas”To insert a new element, click Insert — on a desktop or tablet it sits on the left edge of the editor; on a phone it appears in the bar at the bottom of the screen. Either way opens the same insert rail, where you choose from seven element types:
- Templates — start from a ready-made arrangement
- Content — add a content source area
- Assets — add an image or video asset area
- Text — add a branded text area
- Elements — add shapes, stickers, or decorative elements
- QR Code — add a scannable QR Code area
- Ticker — add a scrolling ticker pinned to the bottom edge (paid plans)
Select a card to place that element into your design.
Each existing area appears as a card. Cards are draggable — reorder them to change their priority or position. Click any area card to expand it for inline editing, where you can adjust the area’s size, content assignment, and display settings.
Assigning Content to Areas
Section titled “Assigning Content to Areas”Click the content selector on any area card to choose what plays in that area. You can assign a single content source, a playlist, or leave the area empty. Content can be changed at any time without recreating the design.
Twig AI Design Help
Section titled “Twig AI Design Help”Open the Twig chat panel from the sidebar to get AI-powered design suggestions. Describe the look or purpose of your display and Twig can recommend content assignments, suggest layout adjustments, or create new content sources for you on the spot.
Design Settings
Section titled “Design Settings”Access design settings via the settings icon to update the design name, change orientation, add tags, or apply brand customization options like color overrides and font choices.
Saving Changes
Section titled “Saving Changes”Changes do not save automatically. Click the Save button to commit your edits. There is no Publish button — saving immediately updates the design for all assigned displays.