# Intro to the Designer

The Squirrel365 designer is where you build your apps. It's a browser-based environment made up of a few distinct areas, each with a specific role. Once you know what each area does and how they connect, the whole interface starts to feel intuitive. This article walks you through each part.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FtjLfbIGbvC799WGA3RQm%2FLabelled%20UI.webp?alt=media&#x26;token=8f193072-9609-4bbe-9aa4-8528266453b8" alt=""><figcaption></figcaption></figure>

### The canvas

The **main canvas** is the large central area where you design your app. You drag and drop components onto it, position them visually, and resize them by dragging their edges and corners. What you see on the canvas is a close representation of what your published app will look like.

You can scroll around the canvas and zoom in and out to work on specific areas.&#x20;

Click any component to select it, and drag a selection box across multiple components to select several at once.

The canvas has it's own set of properties which are accessed by clicking in an empty space on the canvas, the void or the component tree to select it.&#x20;

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FreZEhGMirB5s4UjqMEPx%2Fimage.png?alt=media&#x26;token=e665470d-75a2-44ff-ada9-1632354c1ed8" alt="" width="250"><figcaption></figcaption></figure>

#### Main canvas size&#x20;

**Width** - The width of your app in pixels

**Height** - The height of your app in pixles

**Canvas size** - Select from a number of pre-canned app/device sizes. This will update the values in the Height and Width properties.

**Enable responsive canvas** - When checked this option allows your app to dynamically re-size based on the size of the device or browser window that it is being viewed in. Use with layout containers to build responsive apps.

**Insert browser size into spreadsheet** - Turns on the option to receive the users browser dimensions at runtime. Bind the width and height properties to cells in the spreadsheet that you want to inject this data into.&#x20;

#### GENERAL

Set background color, padding and optionally specify a background image. Note you have to enable the backgroudn image with the subsection checkbox.

### The app menu

The main app menu runs across the top of the designer. It gives you access to project-level controls: file operations, undo and redo, view settings and preview mode. It also shows the name of the project you're currently working on and the save status.

The preview button lets you test your app without leaving the designer. Preview mode runs your app with live data, so you can check that your bindings are working and your layout looks right before you publish.

### The sidebar

The sidebar sits on the left side of the designer. It's your library of everything you can add to your project, components, functions, connections and custom components. Its also provides access to project settings and a link to the marketplace.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FPkeanRMeDGhPgmGJ7yQJ%2Fimage.png?alt=media&#x26;token=9a077803-74d4-4e21-bdf3-777ec39f1373" alt="" width="563"><figcaption></figcaption></figure>

#### Component Library (add component)

The component library is your list of everything you can add to your canvas — charts, tables, input controls, display components, and more. Components are grouped by category to make them easier to find.

To add a component to your canvas, click it in the panel and then click where you want it to appear on the canvas. Once placed, you can move and resize it freely.

#### Component Tree

The component tree, also on the left side of the designer, shows all the visual components that currently exist in your project.

Clicking a component in the list selects it on the canvas and opens its properties in the properties panel. This is useful when components are stacked on top of each other and are hard to click directly.

#### Custom Components

Lists the Custom Components you have saved to your library. A small thumbnail of each custom component is displayed. Add them to your project by dragging and dropping them from the Custom Component library. Read the [**Custom Component article**](https://learn.squirrel365.io/the-designer/custom-components) for more information about creating and using custom components.

#### Functions panel

Lists any background processing functions you've added to your project. These have no visual presence on the canvas but they do work, such as calculations and data transformations. You add and remove functions from this section.

#### Connections panel

Lists any external data connections you've set up. Like functions, connections have no canvas presence — they run in the background and make data available for your components to bind to. You add and remove connections here too.

#### Project settings

The Project Settings modal is the place where project or app level preferences are configured and saved. It includes options relating to publishing, performance, customization, and PWAs. The article on [**Project Settings**](https://learn.squirrel365.io/the-designer/project-settings) covers this in more detail.

#### Marketplace

Link to the marketplace where you can get add-ons and templates.

### The spreadsheet

The spreadsheet runs along the bottom of the designer. It's the data layer of your app — the logic engine that sits behind what users see on the canvas.

If you're familiar with Excel or Google Sheets, the spreadsheet will feel natural. You can write formulas, reference data from your connections, perform calculations, and control what values get sent to your components. Squirrel365 evaluates the spreadsheet continuously, so changes flow through to your app in real time.

Bindings in the properties panel point to cells or ranges in this spreadsheet. That's what keeps your components in sync with your data.

### The properties panel

The properties panel sits on the right side of the designer. It's empty when nothing is selected, and populates with the settings for whichever component, function, or connection you have selected. All styling and configuration, colours, data bindings, behaviour settings, is done here. The article on [**styling and configuring components**](https://learn.squirrel365.io/getting-started/styling-and-configuring-components) covers this in more detail.