> ## Documentation Index
> Fetch the complete documentation index at: https://docs.olonjs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Edit pages and collections visually with OlonJS Studio

> Use the OlonJS Studio visual editor to update page sections, collection entries, and site configuration — without writing code or redeploying.

OlonJS Studio is a visual editor built into every OlonJS project at `/admin`. It lets you edit any section's data, manage collection entries, and update site configuration — all through a form-based UI without touching code or triggering a redeployment. Changes are saved back to your JSON data files and, when cloud mode is enabled, pushed straight to production through the Save2Repo pipeline.

***

## Opening Studio

Navigate to the Studio URL for your environment:

| Environment | URL |
| - | - |
| Local development | `http://localhost:3000/admin` |
| Production | `https://your-domain.com/admin` |

Studio loads the full page structure from the live site and renders every page and section in the left-hand navigation tree.

<Note>
  Studio is protected by the same authentication you configure for your deployment. On a fresh local install with no auth configured, it is open by default — add access controls before deploying to production.
</Note>

***

## Editing a section

<Steps>
  ### Select a page

  In the Studio left panel, click the page you want to edit. Studio loads the page's section tree and renders a live preview on the right.

  ### Click the section to edit

  In the section list, click the section you want to change. The form panel opens on the right with all editable fields for that section.

  Each field is rendered using the Studio widget matching its `describe()` annotation — a `ui:text` field becomes a text input, a `ui:textarea` becomes a resizable text area, a `ui:select` becomes a dropdown, and so on. See [Field descriptor annotations](/guides/defining-collections#field-descriptor-annotations) for the full list.

  ### Update field values

  Edit the field values directly in the form panel. Changes are reflected in the preview as you type, so you can see the result before committing.

  ### Save the changes

  Click **Save** to persist the changes. In local mode, Studio writes the updated data directly to the source JSON file in `src/data/` via the `/api/save-to-file` endpoint. In cloud mode, it triggers the Save2Repo pipeline and pushes the update to your connected repository.
</Steps>

<Note>
  The `/api/save-to-file` endpoint accepts a `{ slug, page }` payload and writes the page JSON to disk. See the [save-to-file API reference](/reference/api/save-to-file) for the full request schema and response format.
</Note>

***

## Managing collections

You can add, edit, and remove collection entries directly from Studio without touching any JSON files manually.

To open a collection in Studio:

1. Click **Collections** in the Studio sidebar.
2. Select the collection you want to manage (e.g. `posts` or `tags`).
3. Click an existing entry to edit it, or click **New entry** to add one.

The collection editor renders each field using the widget defined by its `describe()` annotation in the schema. A `ui:collection-ref:tags` field, for example, renders as a multi-select dropdown populated with all registered tag entries — so you can wire relations without writing raw `$ref` strings.

<Tip>
  When you upload an image inside the collection editor, use the built-in asset picker rather than pasting a URL manually. The picker calls `/api/upload-asset` internally, stores the file in the correct location, and inserts the resolved URL into the field automatically.
</Tip>

***

## Cloud save vs local save

Studio supports two save modes depending on your environment configuration:

| Mode | How it works | When it's active |
| - | - | - |
| **Local save** | Writes directly to `src/data/` on the server via `/api/save-to-file` | Default; no extra configuration needed |
| **Cloud save** | Pushes a file bundle to the OlonJS cloud service, which commits the changed files to your repository and triggers a production deployment | When your OlonJS cloud credentials are configured in your environment |

To enable cloud save, add your OlonJS cloud API URL and API key to your `.env.local` file (or your hosting environment's secret store). Contact your OlonJS account team or check your dashboard for the required credentials and variable names.

Once cloud save is active, every save in Studio commits the changed files to your repository and triggers a production deployment — no manual step needed.

***

## ColdSaveDrawer

When cloud save mode is active, the **ColdSaveDrawer** appears at the bottom of the screen whenever a save is in progress. It shows a step-by-step progress indicator (committing, building, deploying) with a live progress bar, and surfaces any build errors inline so you can retry without leaving Studio.

The drawer also acts as a **navigation guard**: if you navigate away from Studio while a save is running, the drawer warns you and keeps the save alive until it completes or fails.

States the drawer can show:

| Phase | What you see |
| - | - |
| `running` | Step list with the current step highlighted and a progress bar |
| `done` | "Your content is live." confirmation with an **Open site** button |
| `error` | Error message with a **Retry** button |

If the deploy fails, click **Retry** to re-attempt the save with the same payload — no need to re-edit your changes.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.