> ## Documentation Index
> Fetch the complete documentation index at: https://rive-debug-panel.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Viewport

> Use the viewport to work with the Stage, scripts, and the AI Agent.

export const VideoEmbed = ({src}) => {
  return <div style={{
    width: "100%",
    height: "100%",
    overflow: "hidden"
  }}>

      <video src={src} autoPlay loop muted playsInline style={{
    width: "100%",
    height: "100%",
    borderRadius: 0,
    margin: 0,
    display: "block",
    objectFit: "cover",
    backgroundColor: "transparent"
  }} />
    </div>;
};

export const YouTube = ({id, timestamp}) => {
  const videoSrc = timestamp ? `https://www.youtube.com/embed/${id}?start=${timestamp}` : `https://www.youtube.com/embed/${id}`;
  return <iframe width="100%" height="400" src={videoSrc} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />;
};

The viewport is the center area of the editor. It can show the [Stage](#stage), scripts, and the **AI Agent**.

You can [split the viewport](#splitting-the-viewport) to view multiple panels side by side or stacked vertically. This is useful when you want to edit artwork while viewing a script, or keep the AI Agent open alongside the Stage.

<img src="https://mintcdn.com/rive-debug-panel/dMedjlYfIk6DsYlF/images/editor/interface/viewport.png?fit=max&auto=format&n=dMedjlYfIk6DsYlF&q=85&s=63f46108e898bb4a76e505efc2c5cf61" alt="Viewport" width="3456" height="2088" data-path="images/editor/interface/viewport.png" />

## Stage

The Stage is an infinite canvas where you can place artboards containing all your graphics.

<img src="https://mintcdn.com/rive-debug-panel/Y8dgm52DhnTVPlCr/images/interface/stage.png?fit=max&auto=format&n=Y8dgm52DhnTVPlCr&q=85&s=f81f3b6507cd85985d37a789c8f5cc56" alt="Stage" width="3632" height="2342" data-path="images/interface/stage.png" />

[Artboards](/editor/fundamentals/artboards) live on the stage. You can pan and zoom around the stage, select objects, and use guides or rulers to help position elements.

<Tip>
  To learn how to navigate and select items on the stage, see [Keyboard Shortcuts](/editor/keyboard-shortcuts).
</Tip>

### View Options menu

<img src="https://mintcdn.com/rive-debug-panel/Y8dgm52DhnTVPlCr/images/interface/stage-view-options.png?fit=max&auto=format&n=Y8dgm52DhnTVPlCr&q=85&s=b477cc689170ef712e04066e4e20a548" alt="View options" width="3728" height="2438" data-path="images/interface/stage-view-options.png" />

The View Options menu controls what appears on the stage while you work. Use it to adjust zoom, snapping, guides, and visual overlays for animation and interaction tools.

* **Zoom and snapping:** adjust the stage zoom level, enable snapping, or snap objects to pixels
* **User Cursors:** show or hide other users' cursors
* **Tool overlays:** show or hide gizmos, bones, targets, motion paths, joysticks, events, layouts, and text modifier ranges
* **Show Final Playback:** show the final playback state while editing
* **Rulers and guides:** show rulers, lock guides, or clear guides from the stage

### Stage Background Colors

You can set separate stage background colors for Design mode and Animate mode.

Using different colors can make it easier to tell which mode you are in at a glance. This can help prevent accidentally editing keys or animation values when you meant to work in Design mode.

To change the stage background colors, deselect everything, then use the background color options in the [Inspector](/editor/interface-overview/inspector).

<VideoEmbed src="https://static.rive.app/video/stage-background-color.mp4" />

<Note>
  Stage background colors are only visible in the editor. They do not affect the artboard background, exports, or runtime appearance.
</Note>

### Rulers and Guides

<YouTube id="uePyLZfrB7E" />

## Splitting the Viewport

To split the viewport, drag a panel into the viewport or click **Split Editor Right** from the panel options.

<VideoEmbed src="https://static.rive.app/video/split-panes.mp4" />

To open the **AI Agent** in the viewport, click the **…** button in the **Agent** panel in the sidebar, then select **Open in Viewport**.