The <Viewport> component is a full-width component which is a lightly interactive wrapper around an <iframe>.
The viewport can be resized to simulate different device widths. The height of the iframe will automatically adjust
to the iframe content.
The component does not provide the full functionality of the browsers responsive device mode simulation. In particular, it can't simulate network / CPU throttling, nor can it change the user agent. It's purpose is to provide a simple interface to test your components at different viewport widths.
Since <Viewport> uses an <iframe>, you must provide a page which can be loaded into it. If you used the timvir
cli to scaffold your component, you already have one such sample (in src/components/…/samples/basic.tsx). Make that
sample available via a Next.js page and load it into the <Viewport>.
See also Concepts: Component Sample.
The <Viewport> displays a gray, animated background while the iframe is loading.
When the Viewport points to something else than a HTML document (eg. an image), it'll stay the default height, but display the contents nonetheless.
TODO: display a nice error message describing the problem.