Studio

Synchronization

Understand how Nuxt Studio synchronizes content between your production website and your GitHub repository.

This page explains how Nuxt Studio keeps your content synchronized between the browser (your production site) and your GitHub repository.

This section is informational. Synchronization happens automatically after setup and requires no manual action.

Architecture Overview

The self-hosted Nuxt Studio module uses a three-tier system for storage:

Production Database (SQLite WASM)

When the application loads in the browser, Nuxt Content v3 downloads a SQLite database dump from the server and initializes a local WASM database.
This local database contains all content from the content/ directory of your deployed branch.

This browser-side database stays in sync with GitHub as long as your last deployment was built successfully and your CI/CD pipeline completed without errors.

Draft Storage (IndexedDB)

Studio maintains a separate draft layer using unstorage, backed by IndexedDB.
When you edit content, your changes are stored as drafts in this layer.
Each time the Studio app loads, these drafts are merged with the SQLite database to render a drafted version of your production site.

Drafts are stored only in your local browser. They are not shared between editors or devices.

GitHub Repository

When you publish, Studio commits your draft changes directly to your GitHub repository through the GitHub API.
Your CI/CD pipeline then rebuilds and redeploys your site automatically.

After deployment, you need to wait for your build to complete successfully, then refresh your site to update your browser database with your latest content.
The Studio module will automatically notify you when a new deployment is detected.

How Synchronization Works

Initial Load

Database Initialization

Nuxt Content downloads the SQLite database dump generated during the build process.
This file contains all parsed content from your content/ directory.

Draft Recovery

Studio checks IndexedDB for any existing drafts from previous sessions and loads them into the SQLite database.

Preview

Studio refreshes the site preview so you can view your latest drafts and edits directly on your production website.

Editing Content

When you modify content in Studio:

Draft Modification

Changes are saved immediately in IndexedDB as draft items with a status of created, modified, or deleted.

Database Update

The local SQLite database is updated to include your draft content, allowing instant visual preview.

Conflict Detection

Studio compares your draft content against the latest version on GitHub to detect possible conflicts.

Conflicts can occur when:

  • Someone pushes a commit that modifies the same file and its version is currently building.
  • A deployment fails or hasn’t completed, leaving the production database out of date and unsync with GitHub.

Publishing Changes

When you publish your edits:

Draft Collection

Studio gathers all draft items that contain changes.

GitHub Commit

Using the GitHub API, Studio creates a new commit with all updated files.

Deployment Trigger

Your CI/CD platform detects the commit and automatically rebuilds and redeploys your website.

Deployment Wait

After publication, Studio clears the local drafts and waits for the deployment to complete.
During this time, a loading state is shown while the production SQLite database catches up with your latest commit.

Until your commit is deployed, Studio remains in a pending state where the production database is not yet up to date.

Setup

Learn how to install and configure Nuxt Studio to edit your content in production with GitHub authentication.

Content Editors

Discover and select your favorite way to manage your content between the visual or the code editor.