# The panel - SSR websites

> The SSR Websites page of the API Maker panel - the files of a website in a tree (new files and folders, rename, drag and drop, copy, upload, download), the editor and its keys, and the preview beside the editor or under it, at the size of a device or of your own.

Source: https://docs.apimaker.dev/v4/docs/ssr/editor.html

Dashboard → **SSR Websites** lists the websites of the account. Open one : its files on the left, the editor in the middle, the preview of its pages on the right or below. The views of the bar — **UI libraries**, **Routes**, **Settings** — take the whole page.

## Keys

| Keys | What they do |
|---|---|
| Ctrl+S (Cmd+S on a Mac) | Saves the file of the editor : it is compiled, and the preview reloads by itself. |
| Ctrl+Backslash (Cmd+Backslash) | Hides the files, or shows them again : the editor gets their room. |
| Ctrl+Alt+Backslash (Cmd+Option+Backslash) | Hides the preview, or shows it again. |

The keys work in the editor and on the rest of the page.

In the tree of the files, when it has the focus : Up Down move, Right Left open and close a folder, Enter opens, F2 renames, Delete removes.

## The files

The tree draws a line from each folder to what is in it ; the file of the editor and its folders take the accent, as the menu of these docs does for the page you read. The folders of a website come first (`pages`, `components`, `lib`, `data`, `public`), then the files of its root.

| To | Do |
|---|---|
| Make a file | **+** in the header (next to the node chosen), **+** on a folder, or **New file** in the menu of a folder. Type its name — or a path below the folder (`blog/index.tsx`) — and Enter. A page in `pages/`, an endpoint, a layout, a component in `components/` or code in `lib/` starts from its template ; any other file starts empty. |
| Make a file from a template | **New file from a template…** in the menu : every template of the panel, the path to write it at. |
| Make a folder | The folder button of the header, or **New folder** in a menu. A folder no file is in yet shows as *empty* : this browser keeps it until a file goes into it, as git keeps no empty folder. |
| Rename | F2, or **Rename** in the menu : the name is typed in its place. A path with `/` moves it below its folder. |
| Move | Drag a file or a folder onto another folder, or onto the empty part of the tree for the root. A closed folder opens when the pointer stays on it. |
| Upload | Drag files of your disk onto a folder, or **Upload files here…** in its menu. **Upload into public/…** in the `⋮` menu of the header takes them into `public/`. |
| Copy | **Duplicate** : `about-copy.tsx` next to `about.tsx` (a folder with every file in it). |
| Download | **Download** in the menu of a file. |
| Use its path | **Copy the path** (`components/Card.tsx`), **Copy the import** (`@/components/Card`), **Copy the address** of a page or a file of `public/` (`/about`). |
| Preview | **Preview** in the menu of a page : the preview opens on it. |
| Remove | Delete, or **Remove** in the menu : a folder goes with every file in it. A commit of git keeps what was committed. |
| Compress images | **Compress images…** in the menu of a folder, **Resize & compress…** in the menu of an image : JPEG, PNG and WebP made smaller, to a largest size. **Save as a new image…** writes the result as a new file of the name you type, the original as it is. A large image shows its size next to its name in the tree. See [images](https://docs.apimaker.dev/v4/docs/ssr/images.html). |
| See its history | **Git history** in the menu of a file or a folder, or above the editor : every committed version, its changes, a version loaded into the editor or put back. See [git](https://docs.apimaker.dev/v4/docs/ssr/git.html#the-history-of-a-file). |
| Find | The search above the tree keeps the files whose paths hold every word. |

The menu of a node opens on its right click, and on its `…` ; the right click on the empty part of the tree opens the menu of the website. `site.config.ts` keeps its name and its place : it is the settings of the website.

Code is compiled again at its new path after a move. The imports of it elsewhere are not changed : the problems of the website show the ones which no longer find it.

## The preview

The preview shows a page with the pass of the panel : an error shows where it comes from, and the preview reloads by itself after a save. Type a path in its address, or open a page : the preview follows the page in the editor.

| To | Do |
|---|---|
| Put it under the editor | The dock button of its header : the preview goes under the files and the editor, as wide as the page. The same button puts it back beside the editor. |
| Make it larger or smaller | Drag its side (or the side of the files). A double click on the side gives back the size it had. |
| See a size of a device | Choose it in its header : desktop (1440 × 900), laptop (1280 × 800), tablet (768 × 1024), phone (390 × 844), small phone (360 × 640). |
| See a size of your own | **Custom size**, then type the width and the height, 200 to 4000 pixels. |
| Turn the page | The turn button swaps the width and the height. |

A page larger than the panel is made smaller to fit it, with the share shown (`62 %`) : the page is laid out at its own size. The fit button next to the share shows it at 100 % instead, and the panel scrolls. **Fill the panel** gives the page the room of the panel. The panel keeps these choices for the next time.

## The address of a website

A website answers at `/ssr/<apiPath>/<name>/` : the path of the account, as in the addresses of its APIs, then the name of the website, unique in the account. The bar shows it ; the settings view writes the reverse proxies of a domain of its own for it. See [deployment](https://docs.apimaker.dev/v4/docs/ssr/deployment.html).