Insites Studio®Docs

Command Palette

Search for a command to run...

How Studio Works

A high-level tour of Insites Studio — how the editor, AI, repo, and instance fit together.

Insites Studio is a browser-based editor for projects that run on the Insites platform. It pairs a real-time code editor with an AI that can read your project, propose changes as reviewable patches, and ship them to a connected instance. This page explains how the pieces interlock.

The four moving parts#

A working Studio session has four collaborators sitting in front of one project:

  • You. Editing files, prompting the AI, hitting Deploy.
  • The editor. A live multi-pane workspace: file tree, code editor, preview, AI chat, deploy panel.
  • The AI. A Claude model that proposes changes as structured patches, never as freeform text.
  • The instance. Your live Insites deployment, backed by a GitHub repo that Studio commits to.

The editor is the surface. The AI is the assistant. The repo is the source of truth. The instance is what your users see.

What an Insites project is#

An Insites project is a CloudShell-deployed application built on the Insites platform, with its source code stored in a GitHub repo. Studio is the editor; the repo is the canonical source; the instance is the running app. Projects can ship marketing sites, ecommerce stores, internal tools, dashboards — anything Insites' module set covers.

A workspace owns the project. Members are added at the workspace level and granted access tiers (Console, Studio, IIA) that govern what they can do.

Three ways in#

A new project starts via one of three on-ramps, each tuned for a different starting point:

Build with AI

Start from a brief and let Studio scaffold a working app.

Migrate

Bring an existing Shopify, WordPress, Webflow, Wix, or Squarespace site across.

Connect

Hook Studio up to one or more Insites instances you already manage.

Once you're inside, the editor experience is the same regardless of how you got there.

Inside the editor#

The editor lays out four primary regions:

  • File tree — every file in your repo, grouped by path prefix (pages/, partials/, layouts/, data/, assets/, etc.). Cmd-P opens a fuzzy file palette.
  • Editor pane — Monaco with syntax highlighting for Liquid, JSON, JS, TS, CSS, Markdown, and YAML. Liveblocks gives you real-time collaborative editing, so two members editing the same file see each other's cursors and changes.
  • Preview / Code / Styles / Setup — toggle the centre pane between a live preview of the connected instance, the code view, the inferred design tokens, and the project setup.
  • AI chat — the right rail. Conversation history, voice-to-text input, model picker, and the Pending Patches card where AI-proposed changes accumulate until you accept them.
  • Deploy panel — surfaces commit progress and CloudShell deploy status whenever you ship.

How a change gets to production#

Every edit follows the same path, whether the AI made it or you did:

  1. Edit in the browser. The editor mutates an in-memory copy of the file. Originals are preserved so you can always see the diff.
  2. Accept (if AI-generated). Approval mode determines whether AI patches stage for review or apply automatically. See the Approval mode reference.
  3. Deploy. The deploy action commits dirty files to the connected GitHub repo, then triggers CloudShell to deploy the instance. Both legs stream progress back to the deploy panel.
  4. Verify. The preview pane reloads against the live instance.

There is no separate build step you manage by hand. The repo is the build input; the instance is the build output. Studio orchestrates both.

Studio versus the rest of the Insites stack#

Three products sit alongside each other:

  • Insites Console — administers workspaces, instances, members, billing.
  • Insites Studio — the editor you're reading docs about. Edit projects, prompt AI, deploy.
  • IIA modules — the platform's own admin surfaces (CRM, CMS, Pipelines, Forms, Events, etc.) that show up inside deployed instances.

Studio is the only one of these you ever open in the browser to edit a project. The others run on top of, or feed into, the same workspace.

Real-time, in the browser#

A few things distinguish Studio from a desktop IDE:

  • Multiplayer by default. Liveblocks-backed editor: two people can edit the same file at the same time.
  • No local clone. The editor reads files from your connected GitHub repo on demand — there's nothing to install, nothing to keep in sync on your machine.
  • AI is first-class. It's not an extension or a sidebar. It's a peer that produces structured, reviewable changes.
  • Deploys are first-class. The Deploy button is always visible. Rolling forward (and back) is a deliberate, observable act.

Where to go next#