> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reyapp.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Canvas

> Learn how to navigate Rey's visual editor, arrange objects, and use the canvas to design every screen of your app.

The canvas is the heart of Rey — it's the central editing area where you visually design every screen of your app. Everything you see in your app is placed, sized, and styled directly on the canvas, with no code required. Understanding how the canvas works will help you move faster and build with more confidence.

## Canvas layout

Rey's editor keeps the workspace intentionally minimal so your screen designs stay front and center. There are three things to know:

<Frame>
  <img src="https://mintcdn.com/rey-62fd4809/1S3nMA6YX09xuXSk/images/canvas/layout.png?fit=max&auto=format&n=1S3nMA6YX09xuXSk&q=85&s=debde2f30925e3546c892b8029ee956f" alt="Rey editor showing the top toolbar and the bot and plus icons at the bottom corners of an empty canvas" width="3794" height="1642" data-path="images/canvas/layout.png" />
</Frame>

<CardGroup cols={3}>
  <Card title="The canvas" icon="square-dashed">
    The full editing surface where you arrange, resize, and compose your app's screens visually.
  </Card>

  <Card title="Top toolbar" icon="layout-panel-top">
    Opens the [**Design**](/building/design) panel (paintbrush), the [**Data**](/data/database) panel (database), **Preview** (play), and **Publish** (rocket).
  </Card>

  <Card title="Bottom icons" icon="circle-dot">
    The **bot icon** (bottom-left) opens [Rey AI](/ai/overview), and the **+ icon** (bottom-right) adds new screens and [components](/building/components).
  </Card>
</CardGroup>

## Adding elements to the canvas

To add a new element to your screen, click the **+ button** in the bottom-right of the canvas to open the component palette. Pick a category — **Screen**, **Layout**, **Text**, **Button**, **Image**, or **More** — and choose an element to drop it onto your screen.

<Tip>
  Instead of building a screen from scratch, click the **bot icon** in the bottom-left to open **Rey AI** and describe the screen you need — for example, *"A profile page with an avatar, display name, bio, and an edit button."* Rey AI generates the layout and places components on the canvas automatically. Select any element to refine it via its property toolbar, giving you the best of both AI speed and manual precision.
</Tip>