VT supports viewport configuration globally and per spec.

Single viewport:

vt:
  viewport:
    id: desktop
    width: 1280
    height: 720

Multiple viewports:

vt:
  viewport:
    - id: desktop
      width: 1280
      height: 720
    - id: mobile
      width: 390
      height: 844

Spec frontmatter can override the global vt.viewport:

---
viewport:
  - id: tablet
    width: 768
    height: 1024
---

Each viewport object requires:

• id (required string)
• width (integer >= 1)
• height (integer >= 1)

Additional rules:

• id is required (no auto-generated IDs).
• IDs must be unique case-insensitively inside one viewport array.

For each spec, VT uses:

1. frontMatter.viewport (if defined)
2. otherwise vt.viewport
3. otherwise internal default viewport

When viewport IDs are configured, output filenames include the viewport ID:

• <base>--<viewportId>-01.webp
• <base>--<viewportId>-02.webp

Example:

• components/forms/login--desktop-01.webp
• components/forms/login--mobile-01.webp

You can also change viewport inside steps using:

setViewport <width> <height>

This change is scoped to the current running spec session only. The next spec starts from its resolved config/frontmatter viewport.