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

# Overview

> Learn how to build modern apps using Paper.

# Overview

Here is an overview of Paper's designer editor.

## Screen Canvas

![](https://mintlify.s3.us-west-1.amazonaws.com/composablehorizons/assets/screen_canvas.png)

The Screen Canvas shows a real-time version of the current screen you are working on. Any changes you do to your screen
will be reflected here.

Selecting any element placed in the Canvas will bring up the [Properties Panel](#properties-panel) for that element.

You can reorder elements in the Canvas by drag and drop to the desired spot. Elements can only be moved within the
same [Stack](/components/stack).

You can move elements into different Stacks from the [Layers Panel](#layers-panel).

You can change the zoom level via the [Toolbar](#toolbar).

## Properties Panel

![](https://mintlify.s3.us-west-1.amazonaws.com/composablehorizons/assets/properties_panel.png)

The Properties Panel is where you style every aspect of a given element on the current screen.

You can customize pretty much anything here, such as an element's background color, padding, corner radius, give it an
elevation and much, much more.

Every element has different properties you can customize. For example [Text](/components/text)
and [Text Field](/components/text-field) have **Typography** related properties such as **Text Color** and **Max Lines**,
while [Toggles](/components/toggle) give you the option to **enable** them or disable them.

[Browse all available components and their properties](/components)

## Layers Panel

![](https://mintlify.s3.us-west-1.amazonaws.com/composablehorizons/assets/layers_view.png)

As your screen becomes more complex over time, it can get difficult to select specific elements. The Layers Panel
gives you finer level access to your screen's element.

The top level layer is the `Screen Container`. It contains the rest of the screen you are working on.

Every time you select an element in your screen from the [Screen Canvas](#screen-canvas) it will be highlighted here.

## Components Pallet

![](https://mintlify.s3.us-west-1.amazonaws.com/composablehorizons/assets/components_pallete.png)

The Components Pallet contains any element you can add to your screens

## Screen Pallet

![](https://mintlify.s3.us-west-1.amazonaws.com/composablehorizons/assets/screens_pallet.png)

Here you can see all screens of your app. The first screen marked with a <span class="button-secondary">⭐️ Star</span> the Home screen of your app.

The Home Screen is the first screen that will be launched when your users start your app.

To change your Home screen, move the desired screen to the top of the Screen Pallet (by drag and dropping).

## Toolbar

![](https://mintlify.s3.us-west-1.amazonaws.com/composablehorizons/assets/toolbar.png)

The toolbar contains app-wide actions:

* ![](https://mintlify.s3.us-west-1.amazonaws.com/composablehorizons/assets/undo.svg) Reverses your last editor action.
* ![](https://mintlify.s3.us-west-1.amazonaws.com/composablehorizons/assets/redo.svg) Reverses your last undo.
* ![](https://mintlify.s3.us-west-1.amazonaws.com/composablehorizons/assets/brush.svg) Brings up the [Theme Panel](/building/theming)
* ![](https://mintlify.s3.us-west-1.amazonaws.com/composablehorizons/assets/cog.svg) Opens up the settings for your app.
* `Export` Exports the full source code of your app.

It also contains the 🔍 Zoom level for the [Screen Canvas](#screen-canvas).