Skip to main content
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: Studio loads the full page structure from the live site and renders every page and section in the left-hand navigation tree.
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.

​
Editing a section

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 for the full request schema and response format.

​
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.
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.

​
Cloud save vs local save

Studio supports two save modes depending on your environment configuration: 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: If the deploy fails, click Retry to re-attempt the save with the same payload — no need to re-edit your changes.