Viewport

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.

px

Loading Behaviour

The <Viewport> displays a gray, animated background while the iframe is loading.

px
Source: /api/slow

Unsupported content

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.

px