---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/studio-at-a-glance"
locale: en
meta:
"og:title": "Academy Article"
---
[Go to home](https://academy.laioutr.com/en)
- [Studio](https://academy.laioutr.com/en/bereiche/studio)
- [Building pages](https://academy.laioutr.com/en/leitfaeden/building-pages)
- [Studio at a glance](https://academy.laioutr.com/en/artikel/studio-at-a-glance)
# Studio at a glance
Studio is the visual editor in Cockpit: the team builds pages from sections and blocks, sees every change in a live preview of the real storefront and publishes when everything is right.
## Before you start
- Plan
- All plans
- Role
- Member with access to the project and permission to edit project content
- Duration
- 5 min
### Prerequisites
- Project created in Cockpit
- Reachable frontend so the preview can load
Last reviewed on October 15, 2026
**Studio** is the editor in Cockpit that the team uses to build the storefront visually. It opens from the project sidebar. Work happens on **pages**, **sections** and **blocks**, while the centre shows a live preview of the real frontend.
### Layout
- **Top bar**: page context, market and language selection, preview device modes, **Save** and **Publish**.
- **Left sidebar (layers)**: the page tree with header, body and footer. Sections and blocks are added, duplicated, deleted and shown or hidden here.
- **Centre**: the storefront preview.
- **Right sidebar (properties)**: the settings of the selected page, section or block.
At the bottom, the **command bar** offers further commands. The installed apps decide which page types, sections and blocks are available. Product and content data comes from Orchestr, the Laioutr data layer. Several people work in the same document at the same time, and so can AI agents connected through Laioutr MCP. A person always publishes.
## Step by step
1. 1 ### Step 1: Open Studio
Select the project in Cockpit and open **Studio** from the sidebar.
2. 2 ### Step 2: Choose page and context
Choose the page, market and language in the top bar. Studio keeps the selection in the URL, so a shared link opens the same view.
3. 3 ### Step 3: Select an element
Click a section or block in the layers tree or in the preview. The **properties** panel on the right shows the matching fields.
## Frequently asked questions
Does the team need coding skills for Studio?
No. Pages are assembled from existing sections and blocks and edited through form fields. Developers build new sections, blocks or page types in apps, and they then appear in Studio.
Can several people work on one page at the same time?
Yes. Studio is a real-time editor, and changes by others appear immediately. AI agents connected through Laioutr MCP also appear as participants and edit the same document.
Why does the preview not load?
The preview shows the project's deployed frontend. If it cannot be reached, Studio shows a loading or error state with a retry option. For a protected deployment, the bypass key must be stored in the hosting settings.
When do visitors see a change?
Only after **Publish**. **Save** stores the draft and leaves the storefront unchanged.
## Related
- [Create pages and variants from page types](https://academy.laioutr.com/en/artikel/create-pages-and-variants-from-page-types)6 min
Every page in Studio is based on a page type such as Home, Product Detail or Landing Page. When adding a page, the team picks the type, checks name and URL path, and adds further variants of the same page when needed.
- [Add and arrange sections and blocks](https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks)7 min
Sections are the large areas of a page in header, body or footer, and blocks are content units inside a section's slots. Both are added and arranged in the layers tree and edited in the properties panel.
- [Preview and publish changes in Studio](https://academy.laioutr.com/en/artikel/preview-and-publish-changes-in-studio)5 min
Studio saves changes as a draft and shows them instantly in the live preview. Publish in the top bar takes the saved state to the storefront through a deployment of the environment.
- [Using Larry Co-Pilot in Studio](https://academy.laioutr.com/en/artikel/using-larry-co-pilot-in-studio)6 min
Larry Co-Pilot is the AI assistant in Studio. The Larry button next to Publish has Larry build new sections, page layouts and revised copy as drafts; nothing goes live until a person publishes it.
- [Connect Laioutr MCP to an AI assistant](https://academy.laioutr.com/en/artikel/connect-laioutr-mcp-to-an-ai-assistant)5 min
Laioutr MCP connects Claude, ChatGPT, Cursor or another MCP client to Laioutr projects via OAuth. Once Laioutr has enabled it, signing in with the Laioutr account is enough; no API key is needed.
## Learn it in a lesson
- [Page types, pages and variants](https://academy.laioutr.com/en/lektionen/foundations-page-types-pages-variants)9 min
- [Studio overview](https://academy.laioutr.com/en/lektionen/go-live-studio-overview)6 min
## [Building pages](https://academy.laioutr.com/en/leitfaeden/building-pages)
Search this guide
1. [Studio at a glance](https://academy.laioutr.com/en/artikel/studio-at-a-glance)5 min
2. [Create pages and variants from page types](https://academy.laioutr.com/en/artikel/create-pages-and-variants-from-page-types)6 min
3. [Add and arrange sections and blocks](https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks)7 min
4. [Find sections: library, Growth Kits, tags and search](https://academy.laioutr.com/en/artikel/find-sections-library-growth-kits-tags-search)4 min
5. [Global sections for header, footer and recurring content](https://academy.laioutr.com/en/artikel/global-sections-for-header-footer-and-recurring-content)5 min
6. [Fill sections with shop data](https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data)7 min
7. [Build a landing page from existing sections](https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections)10 min
8. [Run campaigns with page variants](https://academy.laioutr.com/en/artikel/run-campaigns-with-page-variants)7 min
9. [Page type recipes: home, product listing, product detail, content](https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content)6 min
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "en",
"name": "Default",
"url": "https://academy.laioutr.com/",
"translationOfWork": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/studio-at-a-glance#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/en/artikel/studio-at-a-glance",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/artikel/studio-at-a-glance#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/artikel/studio-at-a-glance#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/artikel/studio-at-a-glance#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/artikel/studio-at-a-glance#/schema/question/3"
},
{
"@id": "https://academy.laioutr.com/en/artikel/studio-at-a-glance#/schema/question/4"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/artikel/studio-at-a-glance"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/studio-at-a-glance#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/en",
"position": 1
},
{
"@type": "ListItem",
"name": "Studio",
"item": "https://academy.laioutr.com/en/bereiche/studio",
"position": 2
},
{
"@type": "ListItem",
"name": "Building pages",
"item": "https://academy.laioutr.com/en/leitfaeden/building-pages",
"position": 3
},
{
"@type": "ListItem",
"name": "Studio at a glance",
"item": "https://academy.laioutr.com/en/artikel/studio-at-a-glance",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/studio-at-a-glance#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "Does the team need coding skills for Studio?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. Pages are assembled from existing sections and blocks and edited through form fields. Developers build new sections, blocks or page types in apps, and they then appear in Studio.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/studio-at-a-glance#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "Can several people work on one page at the same time?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Studio is a real-time editor, and changes by others appear immediately. AI agents connected through Laioutr MCP also appear as participants and edit the same document.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/studio-at-a-glance#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "Why does the preview not load?",
"acceptedAnswer": {
"@type": "Answer",
"text": "The preview shows the project's deployed frontend. If it cannot be reached, Studio shows a loading or error state with a retry option. For a protected deployment, the bypass key must be stored in the hosting settings.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/studio-at-a-glance#/schema/question/4",
"@type": "Question",
"inLanguage": "en",
"name": "When do visitors see a change?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Only after Publish. Save stores the draft and leaves the storefront unchanged.
"
}
}
]
}
```