Studio tour
The Studio is where you build. Here’s what every part of it does.
Topbar
Section titled “Topbar”Across the top:
| Element | What it does |
|---|---|
| Project menu | New site, make a copy, rename, delete; Import / Export Project; Download site (ZIP) |
| Edit menu | Undo / Redo / Clear page (asks first; Undo brings the page back) |
| View menu | Preview, View Code, dark mode, replay animations, outline, fullscreen |
| Settings menu | Opens a dropdown to jump to any settings tab (SEO, fonts, AI, deployment, …) |
| Site title | Editable — click the pencil icon to rename |
| Cloud sync | Beside the title: Save to Cloud on a local site; once linked, a status icon with Sync now and Version history… |
| Zoom controls | Zoom in / out on the canvas |
| Publish | Swebsy Hosting, GitHub Pages or Cloudflare Pages; Download site (ZIP); publishing settings |
| Account menu | Sign in when signed out; your avatar when signed in, with Account settings and Sign out |
The Settings menu lists every settings tab, including Forms. Once a published form starts getting submissions, it shows an unread count.
→ Cloud sync · Accounts & sign-in
Left sidebar
Section titled “Left sidebar”Six icon tabs, in this order. Alt plus the number opens one directly.
| Tab | Shortcut | What it does |
|---|---|---|
| Components | Alt+1 |
Drag individual elements (buttons, images, icons, …) onto the canvas |
| Layers | Alt+2 |
Hierarchical view of all components on the current page |
| Pages | Alt+3 |
Add, rename, reorder, and delete pages |
| Assets | Alt+4 |
Browse and manage uploaded images |
| Symbols | Alt+5 |
Reusable elements shared across pages |
| Blocks | Alt+6 |
Drag-and-drop library of pre-built sections |
Each panel has a pin button in its header. Pin one and it stays open next to the next panel you pick, so you can keep Layers and Pages side by side in resizable columns instead of flipping between them.
Canvas
Section titled “Canvas”The big area in the middle. Click to select something, drag to move it, double-click to edit text right there.
Hover or select an element and its name (“Hero”, “Container”) shows above it. When there’s no room above, because the page’s own sticky navbar or the top of the canvas is in the way, the name moves just inside the element, below the bar, so it never covers your navigation.
The bar along its top edge holds the canvas breadcrumb for whatever’s selected, the screen sizes and Light | Dark on the right, and a panel button at each end that opens or closes the sidebar on that side. Use the breadcrumb to see where the element sits, jump to a parent, or reach hidden ancestors when the path gets long.
→ Layers and canvas breadcrumb guide
Get started checklist
Section titled “Get started checklist”The first time you open a new site, a small Get started card sits at the bottom-left of the canvas with four steps:
- Edit some text — double-click any text, or click the step to start typing in the first heading.
- Change a color — click the step and it selects that heading and opens its color in the Design panel.
- Check it on mobile — switch the canvas to Mobile.
- Publish your site — put it online, or download it.
Each step ticks itself when you do it, wherever you do it from. Click the chevron to fold the card down to a small pill, or the close button to hide it for good. It goes away by itself once all four are done. You only see it while you’re new: if you already have other sites, or you’ve published before, it stays hidden.
Right sidebar
Section titled “Right sidebar”| Tab | What it does |
|---|---|
| Design | CSS properties for the selected component (layout, spacing, typography, …) |
| Settings | Component-specific settings (link href, image src, animation, …) |
| AI Builder | AI chat panel — describe changes and let AI edit the page for you |
Theme panel
Section titled “Theme panel”The Theme section inside Settings holds your global design tokens: colors, type scale, dark mode, animation defaults and advanced theme overrides. Change something here and it changes across the whole site.