FlexGrid example: Showcase

An interactive sandbox for @roku-sdk/flex-grid. It renders a mixed-template grid and lets you change the grid's configuration at runtime from a settings modal. As a result, you can see how each option behaves on a real device before you choose one in your own app.

Purpose

You can use this app to compare focus strategies and rebuild options by trying them side by side. The FlexGrid guide points to this app for runtime strategy switching.

Summary

This app covers the following areas:

Mixed cell templates in one grid (hero banner, landscape, portrait, and variable-size cards)
Switching horizontal (fixedFocus, floatingFocus, fixedFocusWrap) and vertical focus strategies at runtime
Rebuilding the grid from settings, and a shared pool (createPool) that survives those rebuilds
The focus highlight plugin (@roku-sdk/flex-grid/focus-highlight)
The performance plugin (@roku-sdk/flex-grid/perf) as an on-screen overlay
A nested vertical FocusBoundary for the settings modal, opened from the root boundary

Related examples

FlexGrid example: Cowboy TV: the same building blocks assembled into an app-style layout
Showcase example: the SDK-wide component gallery, which includes simpler list and grid demos

Development

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

npx rk dev
pnpm test
pnpm run lint