> For the complete documentation index, see [llms.txt](https://docs.theseaai.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.theseaai.com/tools/ruler-and-guides.md).

# Ruler & Guides

## When to use

Use **Ruler & Guides** when placement and sizing need to be exact — not just "looks about right":

* Aligning products, text, shapes, or logos consistently across scenes.
* Checking an element's exact size, or the distance between elements in a scene.
* Doing precise layout work without leaving Beachside.<br>

***

## How to use

{% stepper %}
{% step %}

#### Click the <i class="fa-ruler" style="color:$primary;">:ruler:</i> <kbd><mark style="color:$primary;">**Ruler & Guides**<mark style="color:$primary;"></kbd> toggle

Located at the bottom-right corner of the playground, alternatively you can use the keyboard shortcut <kbd><mark style="color:$primary;">**Shift + R**<mark style="color:$primary;"></kbd> to turn if on & off

<figure><img src="/files/GiwGqWyO4FaA7A7uonEl" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Create new guides

* Drag from the **top** or **left** ruler to pull out the guides onto playground.
* Drag from the **top-left corner** to pull out both **horizontal** and **vertical** guide at onc&#x65;**.**

As you drag, the guide's pixel position shows on the ruler so you can place it exactly.
{% endstep %}

{% step %}

#### How to read distances

The ruler's distance labels always describe what you're working on, with a **highlight band** appears on each rulers to help read.

* **Nothing selected** → measures from the playground's top-left corner.
* **A scene selected** → measures from that scene's top-left corner.
* **A layer selected** → still measures from the scene's corner, so you see where the layer sits inside its scene.
  {% endstep %}

{% step %}

#### Remove guides

* Remove **a single guide** — drag it back onto the ruler it came from, or click to select it and press the <kbd><mark style="color:$primary;">**Delete**<mark style="color:$primary;"></kbd> key.
* Remove **all guides** — right-click the **top** or **left** ruler and choose **Remove all guides.**
  {% endstep %}
  {% endstepper %}

***

## FAQ

<details>

<summary><strong>What's the difference between scene guides &#x26; global guides?</strong></summary>

Where a guide lives depends on what was selected when you created it.

* **Global guides** — created with **nothing selected**. They stay at fixed positions on the playground, no matter how scenes move around. Solid all the way across.
* **Scene guides** — created with a **scene selected**. They belong to that scene and move with it. Solid inside the scene, dashed where they extend past it.

</details>

<details>

<summary><strong>Will my rulers and guides still be there when I reopen the playground?</strong></summary>

Yes! Guides are **saved with the playground** — when reopening, guides stay where you placed them.

* **Duplicating a scene** copies its scene guides at the same relative positions.
* **Deleting a scene** removes that scene's guides along with it.

</details>

<details>

<summary><strong>Do I lose all the guides if turn the ruler off?</strong>  </summary>

Toggling visibility off doesn't delete your guides — they reappear where you left them when you turn the ruler back on.

</details>


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.theseaai.com/tools/ruler-and-guides.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
