FlexGrid example: Cowboy TV

An app-style home screen built on the declarative defineFlexGrid API from @roku-sdk/flex-grid. It has navigable top tabs, rows of mixed card sizes, a nested "mini-grid" shelf with focusable zones, and loading skeletons for rows that have not arrived yet. Start from this example if you are building a streaming-app grid.

Purpose

This app shows the built-in FlexGrid plugins and focus patterns working together in one layout, without custom strategies or custom plugins.

Summary

This app covers the following areas:

Variable card dimensions per row (portrait, landscape, wide)
Row titles (@roku-sdk/flex-grid/row-titles)
A metadata block that tracks the focused item (@roku-sdk/flex-grid/bob-in-the-middle)
Loading skeletons for unresolved rows (@roku-sdk/flex-grid/empty-placeholder)
Navigable top tabs, each rendering its own grid, and an optional shared pool that persists across tab switches (off by default; toggle it in the settings modal)
Nested grids in boundary mode (src/components/mini-grid/): a focusable cell containing its own grid, with navigationMap escapes and captureKeyPress on the outer shelf
A settings modal with debug-viewport and shared-pool toggles and jump-to presets

The app fetches row data and artwork at runtime from a Roku-hosted content delivery network (CDN). See src/components/fetch-row.ts for more information.

Related examples

FlexGrid example: Showcase: Switch strategies and rebuild options interactively
FlexGrid example: Fantasy TV: Use custom strategies and custom plugins

Development

You can use these commands to start the app, run tests, and run the linter:

npx rk dev
pnpm test
pnpm run lint