> ## Documentation Index > Fetch the complete documentation index at: https://docs.ollie.shop/llms.txt > Use this file to discover all available pages before exploring further. # What is Ollie Studio > A live, side-by-side editor for your checkout: preview components from your local project in the real checkout, edit props and theme, and publish, without leaving the Admin **Ollie Studio** is the workspace where you see your checkout change as you work on it. It loads your store's real checkout in a preview, connects to the dev server running in your project, and lets you edit what the checkout renders from a sidebar. When something is ready, you publish it from the same screen. ![Studio overview](https://mintcdn.com/ollie/ZKpSeyUd64Smy50J/images/studio-preview.png?fit=max\&auto=format\&n=ZKpSeyUd64Smy50J\&q=85\&s=c60caaf79eba277161c2e15b21ce4daa) Studio with a local project connected: stage selector and connection status in the header, the Components tab on the left, and the real checkout on the right rendering the local HelloWorld component in its slot ## Opening Studio * From the Admin, open your store and click **Studio** in the sidebar. It opens in a new tab at `admin.ollie.shop/studio?storeId=`. * From a project, `npm start` (which runs `ollieshop start`) opens Studio for the store in your `ollie.json` and connects it to the dev server. Pass `--no-open` to skip the browser. ## How it works Studio is a bridge between three things: ``` your project (components/, ollie.json) │ ollieshop start builds it and serves a manifest + live reload on http://localhost:4000 ▼ Studio (Admin) ──pushes components and settings──▶ checkout preview (your store, in an iframe) ``` 1. The **dev server** in your project builds every component it discovers and exposes a manifest. When you save a file, it rebuilds and notifies Studio. 2. **Studio** reads the manifest, shows your components in the sidebar, and pushes each component's code into the preview. It pushes again on every rebuild, so the preview hot-reloads. 3. The **preview** is your real checkout, loaded in Studio mode. Everything the shopper sees (cart, shipping, payment, totals) is real for the version you selected; only the components you are working on come from your machine. Two status dots in the header tell you whether each half of the bridge is up: **CLI** (Studio can reach the dev server, and the last build succeeded) and **Checkout** (the preview has loaded and is listening). > [!NOTE] > > Nothing you do in Studio changes your store until you **Save** or **Publish**. Previewing a local component, switching device sizes, or navigating the preview is invisible to shoppers. ## What you can do from Studio | Task | Needs the dev server? | Where | | - | - | - | | Preview components from your project in the real checkout, with hot reload | Yes | Components tab | | Set a component's **slot**, edit its **props**, toggle **active**, and save | No for linked components | Props panel | | **Publish** an unlinked local component (creates it in the store and deploys it) | Yes | Props panel | | **Deploy** one or several linked components | Yes | Components tab | | **Duplicate** a component into a second slot | Yes | Components tab | | Edit the version's **theme tokens** (brand, neutral and system colors, shape and size) and save | No | Theme tab | | **Inspect slots**: hover the preview to see slot ids, right-click to copy one or jump to the component in that slot. **Highlight all slots** outlines every slot at once | No | Header | | Preview the checkout as **desktop, tablet or mobile** and from a different **start route** | No | Header and Settings tab | | Switch between the store's **versions**, or between your project's **stages** | No for versions, yes for stages | Header | What Studio does not do: it does not edit code. Your component source stays in your project and your editor; Studio shows the result. The **Functions** tab is marked coming soon, so functions are still created and configured in the Admin and deployed with the CLI. ## The main workflows ### Preview and iterate Start the dev server, open Studio, and open the **Components** tab. Every component in your project is listed, grouped by slot. Click one to open its props panel. Edit the file in your editor; the preview updates on save. An **unlinked** component (one your store does not know yet) shows a temporary `studio-*` id and only renders once it has a slot. Set the slot in the props panel, or in the component's `ollie.json` entry. ### Edit props without a deploy For a **linked** component, the props panel is the fastest way to change behaviour that the component reads from props: switch between the **Visual** form and raw **JSON**, change the slot, toggle active, then **Save changes**. The checkout picks the new values up on its next load. No build and no CLI involved. See [Props](/ollie-shop/customization/props.md). ![Studio props panel](https://mintcdn.com/ollie/ZKpSeyUd64Smy50J/images/studio-props-panel.png?fit=max\&auto=format\&n=ZKpSeyUd64Smy50J\&q=85\&s=a50c62e7fa90f69c90a315de6d236184) The props panel of an unlinked component: slot picker, Visual/JSON props editor, and the Publish button ### Publish and deploy * An unlinked component gets a **Publish** button once it has a slot. Publish creates the component record in the selected version, bundles your local code, uploads it, and follows the build until it finishes. The CLI then writes the new id into your `ollie.json`, so the folder is linked from then on. * A linked component has a **Deploy** action in its card menu. Select several cards to deploy them together with **Deploy (N)**. Deploys go to production for the selected version. Studio refuses to deploy while the dev server reports a build error. ### Theme The **Theme** tab edits the design tokens of the selected version: brand, neutral and system colors, shape and size presets, plus any custom token under **Advanced Customization**. Each color pair shows its contrast ratio against the WCAG AA and AAA thresholds. **Save changes** writes the theme to the version; **Reload preview** shows it in the checkout. See [Theme](/ollie-shop/configuration/theme.md) for the token names. ![Studio theme tab](https://mintcdn.com/ollie/ZKpSeyUd64Smy50J/images/studio-theme-tab.png?fit=max\&auto=format\&n=ZKpSeyUd64Smy50J\&q=85\&s=d9c608b40e988d35bdea239d9aea055c) The Theme tab: token pairs grouped by section, each with its contrast rating ### Inspect slots Turn on **Inspect slots** in the header and hover the preview: the slot under the pointer is outlined and labelled with its id. Right-click it to **Copy slot id**, or to **Edit in studio**, which opens the component currently rendered there. This is the quickest way to answer "which slot is this?" when you plan a customization. ![Studio slot inspector](https://mintcdn.com/ollie/ZKpSeyUd64Smy50J/images/studio-slot-inspector.png?fit=max\&auto=format\&n=ZKpSeyUd64Smy50J\&q=85\&s=ecc6163b5bc839ed9b3c5b0bd75313ce) Slot inspector: the hovered slot is outlined and labelled, and a right-click offers Copy slot id and Edit in studio ### Versions and stages Without a dev server, the header selector lists your store's versions, with the live one marked. With a dev server running on a project that uses the `ollie.json` `components` map, the selector switches to your project's **stages** instead (`ollie.json` is `prod`, `ollie..json` the others), so you can preview the components each stage links against its own version. ## Next steps > **[Studio reference](/ollie-shop/customization/studio-editor.md)** > > Every tab, button and status, plus troubleshooting > **[Quickstart](/ollie-shop/get-started/quickstart.md)** > > Scaffold a project and publish your first component from Studio > **[Slots](/ollie-shop/concepts/slots.md)** > > What a slot is and how components fill them > **[Theme](/ollie-shop/configuration/theme.md)** > > The tokens the Theme tab edits This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.