Skip to content

Content Blocks & Canvas Editor

Create and design the visual elements of your Roku channel.

Overview

Content Blocks are the individual visual elements that make up your Roku channel — videos, images, text, buttons, and more. You create and design them using the Canvas Editor, an intuitive visual drag-and-drop tool.

Workflow Summary

  1. Create Content Blocks in the Canvas Editor
  2. Design layouts using container presets as visual guides
  3. Assign Content Blocks to containers in the Scenes & Containers stage
  4. Generate your app — scenes become the "recipe" sent to Roku for rendering

The Canvas Editor

The Canvas Editor is where you create and design individual content blocks.

Authoring Resolution

All content is authored at 1280x720 (Roku's native HD resolution). The end user's Roku device automatically scales up to 1080p (FHD) if their display supports it.

Why 720p?

Roku's native coordinate system is 1280x720. Authoring at this resolution ensures pixel-perfect rendering on all devices, with automatic upscaling for FHD displays.

Container Presets

The Canvas Editor includes container presets — visual guides that show you the screen area you're designing for. This helps you:

  • See exactly how much space your content block will occupy
  • Design content blocks that fit specific container shapes
  • Ensure proper alignment and scaling
Preset Dimensions Use Case
Full Screen 1280x720 Single hero content, splash screens
Half Width 640x720 Side-by-side layouts
Half Height 1280x360 Stacked layouts
Horizontal Thirds 1280x240 Stacked layouts
Quarter 640x360 Grid layouts, thumbnails
Sidebar 320x720 Navigation menus
Banner 1280x180 Headers, footers

Content Block Types

Type Description Use Case
Video Streaming video content Main content, trailers, playlists
Image Static images Backgrounds, thumbnails, logos
Text Formatted text Titles, descriptions, labels
Button Interactive buttons Navigation, calls-to-action
QR Code Scannable QR codes Links, promotions (Pro plan)

Pre-Built Content Blocks

When you activate CastConductor, the setup wizard seeds your channel with ready-to-use content blocks. These are fully customizable — use them as-is or modify them for your needs.

Content Block Description
Track Information Displays live track title and artist metadata — perfect for radio stations with now-playing data
Track Info Hero Full-screen track display with large album artwork
Shoutouts User-submitted messages displayed on your channel. Embed the shoutout form on your website so fans can send messages that appear on Roku
Promos Promotional content for announcements, events, or featured items
Sponsors Sponsor logos and messages — great for direct monetization (you keep 100% of revenue)
Location/Time Displays the viewer's local time and location. Generated client-side on the Roku device (no PII collected)
Weather Current weather conditions based on viewer location. Generated client-side on the Roku device (no PII collected)
Feed Browser Parse RSS, SoundCloud, YouTube, or JSON feeds into navigable Netflix-style menus. Supports Carousel, Grid, List, and Featured+List layouts with full styling control (colors, fonts, backgrounds). Episodes include detail panels with playback controls.
Custom API Pull content from external REST APIs (Phase 1 available)
Custom Content Blank canvas for your own custom designs

Privacy Note

Location/Time and Weather blocks use the Roku device's built-in geolocation. This data stays on the viewer's device — CastConductor does not collect or store any personally identifiable information.

Creating a Content Block

  1. Go to CastConductor → Canvas Editor
  2. To get started quickly, select one of the 7 Existing Content Blocks from the drop-down menu.
    1. Option: Tap "Load Selected" button.
    2. Option: tap "Duplicate as New" to use an existing content block as a template for a new content block.
    3. Option: OR select "Custom Content" and then "Duplicate as New" to start from scratch.
  3. Tap the "Container Presets" button in the horizontal toolbar and choose a container preset to author your content block for.
  4. Then tap the Add Layer button to begin adding layers.

    NOTE: Enable/Disable the Guides and Smart Snapping toggles for helpful visual guides for content placement - as you move layers around the canvas.

  5. Double-click a layer to display the pop-up Precision Properties Modal.
  6. When you get everything adjusted the way you like, tap the "Save Changes" button.

Canvas Editor Interface

Canvas Area

The main working area shows a 1280x720 canvas with your selected container preset overlay. Design your content block within the highlighted area.

Toolbar

Tool Description
Container Preset Choose the target container shape
Select Select and move elements
Grid Toggle snap-to-grid
Preview See full-screen preview
Save Save current content block
Undo/Redo Undo or redo changes

Content Panel (Left)

Add elements to your content block:

  • Images from Media Library
  • Text elements
  • Shapes and backgrounds
  • Video placeholders

Properties Panel

Double-click a layer to open the Precision Properties modal. Edit properties of the selected element:

  • Position: X, Y coordinates
  • Size: Width, Height
  • Styling: Colors, borders, opacity
  • Typography: Font, size, alignment

Working with Elements

Adding Elements

  1. Click an element type in the left panel (Image, Text, etc.)
  2. Click on the canvas to place it
  3. Drag to reposition, use handles to resize

Resizing

  • Click an element to select it
  • Drag the corner handles to resize
  • Hold Shift to maintain aspect ratio

Positioning

  • Drag elements to move them freely
  • Use arrow keys for fine adjustments (1px nudge)
  • Enable grid snap for automatic alignment

Layering

  • Right-click → Bring to Front / Send to Back
  • Or use the layer panel to drag and reorder

Keyboard Shortcuts

Shortcut Action
Ctrl+S Save
Ctrl+Z Undo
Ctrl+Y / Ctrl+Shift+Z Redo
Delete Remove selected element
Arrow keys Nudge selection 1px
Ctrl+D Duplicate selected

From Content Block to Scene

Once your content blocks are created, you assign them to scenes:

  1. Go to CastConductor → Scenes & Containers
  2. Create or edit a scene
  3. Tap on the Containers tab of the Scene Manager to add container preset(s) for your layout
  4. Assign your content blocks to containers
  5. The scene(s) becomes the "recipe" that CastConductor sends to Roku for rendering

See Scenes & Containers for the full workflow.

Best Practices

Design for TV

  • Keep important content away from screen edges (use 5% margin / safe zone)
  • Use large fonts — minimum 24px for body text, 36px+ for headlines
  • High contrast is essential for readability on TV

Image Guidelines

  • Match the container preset dimensions for best results
  • Minimum 1280x720 for full-screen content
  • Compress images to reduce loading time

Keep It Simple

  • Limit elements per content block to what's necessary
  • Use consistent styling across content blocks
  • Test on an actual Roku device when possible

Video & Audio Layers

The Canvas Editor supports native video and feed layers:

  • Video Layer: Stream live or on-demand video content
  • Feed Layer: Parse RSS, SoundCloud, YouTube, or JSON feeds into navigable menus

Full Video Support Available!

See Video & Audio Support for complete documentation on adding video layers, parsing podcast feeds, and creating Netflix-style browse menus.

Coming Soon

On the Roadmap

  • Smart Reflow: Content blocks authored for a specific container size and shape will dynamically adapt to different container sizes automatically.
  • Custom Container Shapes: Drag-to-resize containers beyond preset geometry to fill available screen real estate.
  • Layer Grouping: Group multiple layers to move and resize them together.