> For the complete documentation index, see [llms.txt](https://help.craftsmanplus.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.craftsmanplus.com/play/general/editor.md).

# Viewport

Understand the PLAY editor viewport, including the artboard, aspect ratios, asset scaling, and layer transforms.

<figure><img src="https://3019081569-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZBycFFNxrdS0X9OsGtmT%2Fuploads%2FUrDbp4YeyNOpo7vFm0te%2FVIEWPORT%20-%20HERO.jpg?alt=media&amp;token=55a647f0-431e-4062-ae81-c1b69390c017" alt=""><figcaption></figcaption></figure>

The viewport is your visual workspace in the PLAY editor. It's where you see, arrange, and interact with every layer in your project. Everything you place on the artboard, from images and text to games and interactive components, is rendered here in real time as you build.

### The Artboard

The artboard is the visible canvas area in the center of the viewport. It represents the boundaries of your project.

#### Aspect Ratios

PLAY uses an aspect-ratio-based canvas system rather than fixed pixel dimensions. When you create a project, you select a preset aspect ratio (such as 9:16, 1:1, or 2:1), and the editor generates an artboard at that ratio. Internally, the longer side of the artboard is always normalized to 1024 pixels. For example, a 2:1 ratio produces a 1024×512 artboard, while a 1:1 ratio produces a 1024×1024 artboard.

This ratio is displayed as a label above the top-left corner of the artboard, so you always know what dimensions you're working with.

#### Orientation

PLAY projects can be configured for portrait, landscape, or both orientations. When both orientations are enabled, the viewport can display two artboards side by side — one for portrait and one for landscape — so you can design each layout in context.

You can switch between orientations using the toolbar, and layers can be configured to appear in one orientation, the other, or both.

### Default Asset Size

When you add an image, video, or sequence layer to the artboard, PLAY scales the asset proportionally relative to the canvas dimensions. The editor compares the asset's original dimensions to the artboard size and scales it so that its proportions are maintained in context.

If you import an asset that is larger than the artboard (for example, a 2048×2048 image onto a 1024×1024 canvas), the layer will appear larger than the artboard. You can then resize it manually to fit. This behavior is consistent whether the layer is placed directly on the artboard or nested inside a group or component.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.craftsmanplus.com/play/general/editor.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
