From 7e59f29deca7f28c83664e168f18fc9de8f48bc9 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Tue, 11 Nov 2025 17:02:06 +0100
Subject: [PATCH 01/11] feat(dev): enable studio in development mode without
 auth

---
 src/app/src/components/AppFooter.vue         | 20 +++----
 src/app/src/components/header/HeaderMain.vue |  3 +-
 src/app/src/composables/useDraftBase.ts      | 55 +++++++++++---------
 src/module/src/module.ts                     | 22 ++++----
 src/module/src/runtime/host.dev.ts           |  2 +-
 src/module/src/runtime/utils/activation.ts   | 11 ++++
 6 files changed, 65 insertions(+), 48 deletions(-)

diff --git a/src/app/src/components/AppFooter.vue b/src/app/src/components/AppFooter.vue
index 33c0dc97..b4d9a82d 100644
--- a/src/app/src/components/AppFooter.vue
+++ b/src/app/src/components/AppFooter.vue
@@ -16,19 +16,19 @@ const user = host.user.get()
 
 const repositoryUrl = computed(() => git.getBranchUrl())
 const userMenuItems = computed(() => [
-  [
-  // [{
-  //   slot: 'view-mode' as const,
-  // }
-    repositoryUrl.value
-      ? {
+  repositoryUrl.value
+    ? [
+        // [{
+        //   slot: 'view-mode' as const,
+        // }
+        {
           label: `${host.repository.owner}/${host.repository.repo}`,
           icon: 'i-simple-icons:github',
           to: repositoryUrl.value,
           target: '_blank',
-        }
-      : undefined,
-  ].filter(Boolean),
+        },
+      ]
+    : undefined,
   [{
     label: 'Sign out',
     icon: 'i-lucide-log-out',
@@ -38,7 +38,7 @@ const userMenuItems = computed(() => [
       })
     },
   }],
-])
+].filter(Boolean))
 
 function closeStudio() {
   unsetActiveLocation()
diff --git a/src/app/src/components/header/HeaderMain.vue b/src/app/src/components/header/HeaderMain.vue
index 9c73b51f..bea42d4b 100644
--- a/src/app/src/components/header/HeaderMain.vue
+++ b/src/app/src/components/header/HeaderMain.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useRouter, useRoute } from 'vue-router'
 import { computed } from 'vue'
-import { useStudio } from '../../composables/useStudio'
+import { studioFlags, useStudio } from '../../composables/useStudio'
 import type { StudioFeature } from '../../types'
 import { useStudioState } from '../../composables/useStudioState'
 
@@ -52,6 +52,7 @@ const current = computed({
     />
 
     <UButton
+      v-if="!studioFlags.dev"
       label="Review"
       color="neutral"
       :variant="context.draftCount.value > 0 ? 'solid' : 'soft'"
diff --git a/src/app/src/composables/useDraftBase.ts b/src/app/src/composables/useDraftBase.ts
index a217bdbe..fc6c7bfd 100644
--- a/src/app/src/composables/useDraftBase.ts
+++ b/src/app/src/composables/useDraftBase.ts
@@ -6,6 +6,7 @@ import { checkConflict, findDescendantsFromId, getDraftStatus } from '../utils/d
 import type { useGit } from './useGit'
 import { useHooks } from './useHooks'
 import { ref } from 'vue'
+import { studioFlags } from './useStudio'
 
 export function useDraftBase<T extends DatabaseItem | MediaItem>(
   type: 'media' | 'document',
@@ -73,42 +74,44 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
       await storage.removeItem(id)
       await hostDb.delete(id)
 
-      let deleteDraftItem: DraftItem<T> | null = null
-      if (existingDraftItem) {
-        if (existingDraftItem.status === DraftStatus.Deleted) return
+      if (!studioFlags.dev) {
+        let deleteDraftItem: DraftItem<T> | null = null
+        if (existingDraftItem) {
+          if (existingDraftItem.status === DraftStatus.Deleted) return
 
-        if (existingDraftItem.status === DraftStatus.Created) {
-          list.value = list.value.filter(item => item.id !== id)
+          if (existingDraftItem.status === DraftStatus.Created) {
+            list.value = list.value.filter(item => item.id !== id)
+          }
+          else {
+            deleteDraftItem = {
+              id,
+              fsPath: existingDraftItem.fsPath,
+              status: DraftStatus.Deleted,
+              original: existingDraftItem.original,
+              githubFile: existingDraftItem.githubFile,
+            }
+
+            list.value = list.value.map(item => item.id === id ? deleteDraftItem! : item) as DraftItem<T>[]
+          }
         }
         else {
+        // TODO: check if gh file has been updated
+          const githubFile = await git.fetchFile(joinURL('content', fsPath), { cached: true }) as GithubFile
+
           deleteDraftItem = {
             id,
-            fsPath: existingDraftItem.fsPath,
+            fsPath,
             status: DraftStatus.Deleted,
-            original: existingDraftItem.original,
-            githubFile: existingDraftItem.githubFile,
+            original: originalDbItem,
+            githubFile,
           }
 
-          list.value = list.value.map(item => item.id === id ? deleteDraftItem! : item) as DraftItem<T>[]
+          list.value.push(deleteDraftItem)
         }
-      }
-      else {
-      // TODO: check if gh file has been updated
-        const githubFile = await git.fetchFile(joinURL('content', fsPath), { cached: true }) as GithubFile
-
-        deleteDraftItem = {
-          id,
-          fsPath,
-          status: DraftStatus.Deleted,
-          original: originalDbItem,
-          githubFile,
-        }
-
-        list.value.push(deleteDraftItem)
-      }
 
-      if (deleteDraftItem) {
-        await storage.setItem(id, deleteDraftItem)
+        if (deleteDraftItem) {
+          await storage.setItem(id, deleteDraftItem)
+        }
       }
 
       if (rerender) {
diff --git a/src/module/src/module.ts b/src/module/src/module.ts
index cbe7fb4f..32d710a0 100644
--- a/src/module/src/module.ts
+++ b/src/module/src/module.ts
@@ -71,8 +71,12 @@ interface ModuleOptions {
   }
   /**
    * Enable Nuxt Studio to edit content and media files on your filesystem.
-   * Currently experimental.
-   * @experimental
+   */
+  dev: boolean
+  /**
+   * Enable Nuxt Studio to edit content and media files on your filesystem.
+   *
+   * @deprecated Use the 'dev' option instead.
    */
   development?: {
     sync?: boolean
@@ -103,6 +107,7 @@ export default defineNuxtModule<ModuleOptions>({
         clientSecret: process.env.STUDIO_GITHUB_CLIENT_SECRET,
       },
     },
+    dev: false,
     development: {
       sync: false,
     },
@@ -111,10 +116,7 @@ export default defineNuxtModule<ModuleOptions>({
     const resolver = createResolver(import.meta.url)
     const runtime = (...args: string[]) => resolver.resolve('./runtime', ...args)
 
-    if (!nuxt.options.dev) {
-      options.development!.sync = false
-    }
-
+    options.dev = nuxt.options.dev || options.development?.sync || false
     if (!nuxt.options.dev && !nuxt.options._prepare) {
       if (!options.auth?.github?.clientId && !options.auth?.github?.clientSecret) {
         logger.warn([
@@ -130,8 +132,8 @@ export default defineNuxtModule<ModuleOptions>({
 
     nuxt.options.runtimeConfig.public.studio = {
       route: options.route!,
+      dev: Boolean(options.dev),
       development: {
-        sync: Boolean(options.development!.sync),
         server: process.env.STUDIO_DEV_SERVER,
       },
       // @ts-expect-error Autogenerated type does not match with options
@@ -176,7 +178,7 @@ export default defineNuxtModule<ModuleOptions>({
       ]
     })
 
-    if (options.development!.sync) {
+    if (options.dev) {
       nuxt.options.nitro.storage = {
         ...nuxt.options.nitro.storage,
         nuxt_studio_content: {
@@ -185,7 +187,7 @@ export default defineNuxtModule<ModuleOptions>({
         },
         nuxt_studio_public_assets: {
           driver: 'fs',
-          base: resolve(nuxt.options.srcDir, 'public'),
+          base: resolve(nuxt.options.rootDir, 'public'),
         },
       }
       addServerHandler({
@@ -220,7 +222,7 @@ export default defineNuxtModule<ModuleOptions>({
     })
     addTemplate({
       filename: 'studio-public-assets.mjs',
-      getContents: () => options.development!.sync
+      getContents: () => options.dev
         ? getAssetsStorageDevTemplate(assetsStorage, nuxt)
         : getAssetsStorageTemplate(assetsStorage, nuxt),
     })
diff --git a/src/module/src/runtime/host.dev.ts b/src/module/src/runtime/host.dev.ts
index 12ba30cc..7f63ded2 100644
--- a/src/module/src/runtime/host.dev.ts
+++ b/src/module/src/runtime/host.dev.ts
@@ -11,7 +11,7 @@ import { debounce } from 'perfect-debounce'
 export function useStudioHost(user: StudioUser, repository: Repository) {
   const host = useStudioHostBase(user, repository)
 
-  if (!useRuntimeConfig().public.studio.development.sync) {
+  if (!useRuntimeConfig().public.studio.dev) {
     return host
   }
 
diff --git a/src/module/src/runtime/utils/activation.ts b/src/module/src/runtime/utils/activation.ts
index 71d4aead..274c10a4 100644
--- a/src/module/src/runtime/utils/activation.ts
+++ b/src/module/src/runtime/utils/activation.ts
@@ -5,6 +5,17 @@ export async function defineStudioActivationPlugin(onStudioActivation: (user: St
   const user = useState<StudioUser | null>('studio-session', () => null)
   const config = useRuntimeConfig().public.studio
 
+  if (config.dev) {
+    return await onStudioActivation({
+      provider: 'github',
+      email: 'dev@nuxt.com',
+      name: 'Dev',
+      githubToken: '',
+      githubId: '',
+      avatar: '',
+    })
+  }
+
   await $fetch<{ user: StudioUser }>('/__nuxt_studio/auth/session').then((session) => {
     user.value = session?.user ?? null
   })

From d34bb27a0559f7f5594081acd265201b0f75addd Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Tue, 11 Nov 2025 17:19:56 +0100
Subject: [PATCH 02/11] types: fix

---
 src/app/src/components/AppFooter.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/src/components/AppFooter.vue b/src/app/src/components/AppFooter.vue
index b4d9a82d..b1dacf83 100644
--- a/src/app/src/components/AppFooter.vue
+++ b/src/app/src/components/AppFooter.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import { useStudio } from '../composables/useStudio'
 import { useStudioState } from '../composables/useStudioState'
+import type { DropdownMenuItem } from '@nuxt/ui'
 
 const { ui, host, git } = useStudio()
 const { preferences, updatePreference, unsetActiveLocation } = useStudioState()
@@ -38,7 +39,7 @@ const userMenuItems = computed(() => [
       })
     },
   }],
-].filter(Boolean))
+].filter(Boolean) as DropdownMenuItem[][])
 
 function closeStudio() {
   unsetActiveLocation()

From e832b9c05cbf387a40a31f873b1e889a1f3f43c1 Mon Sep 17 00:00:00 2001
From: Baptiste Leproux <leproux.baptiste@gmail.com>
Date: Wed, 12 Nov 2025 14:56:47 +0100
Subject: [PATCH 03/11] expose devMode on useStudioState

---
 playground/docus/content/2.studio/2.setup.md | 151 -------------------
 playground/docus/nuxt.config.ts              |   1 +
 src/app/src/components/header/HeaderMain.vue |   8 +-
 src/app/src/composables/useDraftBase.ts      |   9 +-
 src/app/src/composables/useDraftDocuments.ts |   4 +-
 src/app/src/composables/useStudio.ts         |  21 +--
 src/app/src/composables/useStudioState.ts    |   7 +
 src/app/src/composables/useTree.ts           |   4 +-
 src/app/src/utils/draft.ts                   |   5 +-
 src/app/src/utils/tree.ts                    |  19 ++-
 10 files changed, 44 insertions(+), 185 deletions(-)
 delete mode 100644 playground/docus/content/2.studio/2.setup.md

diff --git a/playground/docus/content/2.studio/2.setup.md b/playground/docus/content/2.studio/2.setup.md
deleted file mode 100644
index 9c26426c..00000000
--- a/playground/docus/content/2.studio/2.setup.md
+++ /dev/null
@@ -1,151 +0,0 @@
----
-title: Setup
-description: Learn how to install and configure Nuxt Studio to edit your content in production with GitHub authentication.
-navigation:
-  title: Setup
-  icon: i-lucide-settings
-seo:
-  title: Nuxt Studio Setup Guide
-  description: Learn how to install and configure the self-hosted Nuxt Studio module for your Nuxt Content website. Edit content in production with GitHub authentication.
----
-
-::tip{to="https://nuxt.studio/docs/setup"}
-This documentation covers only the new open-source Nuxt Studio module.
-Click here to view the documentation for the legacy standalone platform.
-::
-
-## Install
-
-Add the Nuxt Studio module to your project:
-
-::code-group
-```bash [pnpm]
-pnpm add nuxt-studio
-```
-
-```bash [npm]
-npm install nuxt-studio
-```
-
-```bash [yarn]
-yarn add nuxt-studio
-```
-
-```bash [bun]
-bun add nuxt-studio
-```
-::
-
-Alternatively, use the Nuxt CLI to automatically add the module:
-
-```bash
-npx nuxi module add nuxt-studio
-```
-
-## Configure
-
-Add the module to your `nuxt.config.ts` and configure your GitHub repository:
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  modules: [
-    '@nuxt/content',
-    'nuxt-studio'
-  ],
-  
-  studio: {
-    // Studio admin route (default: '/_studio')
-    route: '/_studio',
-    
-    // GitHub repository configuration (required)
-    repository: {
-      provider: 'github', // only GitHub is currently supported
-      owner: 'your-username', // your GitHub username or organization
-      repo: 'your-repo', // your repository name
-      branch: 'main', // the branch to commit to
-      rootDir: '', // optional: if your Nuxt app is in a subdirectory
-      private: true // optional: whether the repository is private or public (default: true)
-    }
-  }
-})
-```
-
-::prose-tip
-If your Nuxt Content application is in a monorepo or subdirectory, specify the `rootDir` option to point to the correct location.
-::
-
-## Create GitHub OAuth App
-
-Nuxt Studio uses GitHub OAuth for authentication.
-
-::prose-steps
-> If you changed the `route` option in your config, update the callback URL accordingly (the route set instead of `/studio`)
-
-### Navigate to GitHub Developer Settings
-
-Go to [GitHub Developer Settings](https://github.com/settings/developers) and click **New OAuth App**
-
-### Configure the OAuth Application
-
-Fill in the required fields:
-
-- **Application name**: Your app name
-- **Homepage URL**: Your production website homepage URL
-- **Authorization callback URL**: `https://yourdomain.com/_studio/auth/github`:tip [If you want to try studio on project running in local, you can simply set the callback url to your local url `http://localhost:3000`.]
-
-### Copy Your Credentials
-
-After creating the OAuth app, you'll receive:
-
-- A **Client ID** (visible immediately)
-- A **Client Secret** (click **Generate a new client secret**)
-
-### Set your environment Variables
-
-Add the GitHub OAuth credentials to your deployment platform's environment variables or in your `.env` file in local
-
-```bash [.env]
-STUDIO_GITHUB_CLIENT_ID=your_github_client_id
-STUDIO_GITHUB_CLIENT_SECRET=your_github_client_secret
-```
-::
-
-## Deployment
-
-::warning
-The new Nuxt Studio module requires a server-side route for authentication.
-While static generation remains supported with [Nuxt hybrid rendering](https://nuxt.com/docs/4.x/guide/concepts/rendering#route-rules), your site must be **deployed on a platform that supports server-side rendering (SSR)**.
-::
-
-### Accessing Studio
-
-After deployment, access the Studio interface by navigating to your configured route (default: `/_studio`):
-
-1. Click **Login with GitHub** if it does not directly redirect to the OAuth app authorization page
-2. Authorize the OAuth application
-3. You'll be redirected back to Studio, ready to edit your content
-
-::prose-note
-Secure OAuth-based login with **Google** should be available quickly in the Beta release.
-::
-
-## Development mode
-
-Nuxt Studio includes an **experimental** development mode that enables real-time file system synchronization:
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  studio: {
-    development: {
-      sync: true // Enable development mode
-    }
-  }
-})
-```
-
-When enabled, Nuxt Studio will:
-
-- ✅ Write changes directly to your local `content/` directory
-- ✅ Write media changes to your local `public/` directory
-- ❌ Listen for file system changes and update the editor
-- ❌ Commit changes to your repository (use your classical workflow instead)
diff --git a/playground/docus/nuxt.config.ts b/playground/docus/nuxt.config.ts
index 3ddfd574..6ecc979e 100644
--- a/playground/docus/nuxt.config.ts
+++ b/playground/docus/nuxt.config.ts
@@ -13,6 +13,7 @@ export default defineNuxtConfig({
   },
   compatibilityDate: '2025-08-26',
   studio: {
+    dev: false,
     route: '/admin',
     repository: {
       owner: 'nuxt-content',
diff --git a/src/app/src/components/header/HeaderMain.vue b/src/app/src/components/header/HeaderMain.vue
index bea42d4b..841c2d1a 100644
--- a/src/app/src/components/header/HeaderMain.vue
+++ b/src/app/src/components/header/HeaderMain.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { useRouter, useRoute } from 'vue-router'
 import { computed } from 'vue'
-import { studioFlags, useStudio } from '../../composables/useStudio'
+import { useStudio } from '../../composables/useStudio'
 import type { StudioFeature } from '../../types'
 import { useStudioState } from '../../composables/useStudioState'
 
 const router = useRouter()
 const route = useRoute()
 const { context } = useStudio()
-const { setLocation } = useStudioState()
+const { setLocation, devMode } = useStudioState()
 
 const items = [
   {
@@ -52,7 +52,7 @@ const current = computed({
     />
 
     <UButton
-      v-if="!studioFlags.dev"
+      v-if="!devMode"
       label="Review"
       color="neutral"
       :variant="context.draftCount.value > 0 ? 'solid' : 'soft'"
@@ -67,7 +67,7 @@ const current = computed({
       >
         <UBadge
           :label="context.draftCount.value.toString()"
-          class="bg-[var(--ui-color-neutral-400)]"
+          class="bg-neutral-400"
           size="xs"
           variant="soft"
         />
diff --git a/src/app/src/composables/useDraftBase.ts b/src/app/src/composables/useDraftBase.ts
index fc6c7bfd..4eaa45b0 100644
--- a/src/app/src/composables/useDraftBase.ts
+++ b/src/app/src/composables/useDraftBase.ts
@@ -6,7 +6,7 @@ import { checkConflict, findDescendantsFromId, getDraftStatus } from '../utils/d
 import type { useGit } from './useGit'
 import { useHooks } from './useHooks'
 import { ref } from 'vue'
-import { studioFlags } from './useStudio'
+import { useStudioState } from './useStudioState'
 
 export function useDraftBase<T extends DatabaseItem | MediaItem>(
   type: 'media' | 'document',
@@ -23,6 +23,7 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
   const hookName = `studio:draft:${type}:updated` as const
 
   const hooks = useHooks()
+  const { devMode } = useStudioState()
 
   async function get(id: string): Promise<DraftItem<T> | undefined> {
     return list.value.find(item => item.id === id) as DraftItem<T>
@@ -41,7 +42,7 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
       id: item.id,
       fsPath,
       githubFile,
-      status: getDraftStatus(item, original),
+      status: getDraftStatus(item, original, devMode.value),
       modified: item,
     }
 
@@ -74,7 +75,7 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
       await storage.removeItem(id)
       await hostDb.delete(id)
 
-      if (!studioFlags.dev) {
+      if (!devMode.value) {
         let deleteDraftItem: DraftItem<T> | null = null
         if (existingDraftItem) {
           if (existingDraftItem.status === DraftStatus.Deleted) return
@@ -143,7 +144,7 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
         // @ts-expect-error upsert type is wrong, second param should be DatabaseItem | MediaItem
         await hostDb.upsert(draftItem.id, existingItem.original)
         existingItem.modified = existingItem.original
-        existingItem.status = getDraftStatus(existingItem.modified, existingItem.original)
+        existingItem.status = getDraftStatus(existingItem.modified, existingItem.original, devMode.value)
         await storage.setItem(draftItem.id, existingItem)
       }
     }
diff --git a/src/app/src/composables/useDraftDocuments.ts b/src/app/src/composables/useDraftDocuments.ts
index e35561be..0029adbb 100644
--- a/src/app/src/composables/useDraftDocuments.ts
+++ b/src/app/src/composables/useDraftDocuments.ts
@@ -9,8 +9,10 @@ import { joinURL } from 'ufo'
 import { documentStorage as storage } from '../utils/storage'
 import { getFileExtension } from '../utils/file'
 import { useDraftBase } from './useDraftBase'
+import { useStudioState } from './useStudioState'
 
 export const useDraftDocuments = createSharedComposable((host: StudioHost, git: ReturnType<typeof useGit>) => {
+  const { devMode } = useStudioState()
   const {
     isLoading,
     list,
@@ -34,7 +36,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     }
 
     const oldStatus = existingItem.status
-    existingItem.status = getDraftStatus(document, existingItem.original)
+    existingItem.status = getDraftStatus(document, existingItem.original, devMode.value)
     existingItem.modified = document
 
     await storage.setItem(id, existingItem)
diff --git a/src/app/src/composables/useStudio.ts b/src/app/src/composables/useStudio.ts
index 2183ea82..6c6931f6 100644
--- a/src/app/src/composables/useStudio.ts
+++ b/src/app/src/composables/useStudio.ts
@@ -14,14 +14,16 @@ import { useHooks } from './useHooks'
 import { getDraftStatus } from '../utils/draft'
 import { useStudioState } from './useStudioState'
 
-export const studioFlags = {
-  dev: false,
-}
-
 export const useStudio = createSharedComposable(() => {
   const isReady = ref(false)
   const host = window.useStudioHost()
-  studioFlags.dev = host.meta.dev
+  const { devMode, enableDevMode, preferences, setManifestId } = useStudioState()
+
+  if (host.meta.dev) {
+    enableDevMode()
+  }
+
+  console.log('devMode', devMode.value)
 
   const gitOptions: GitOptions = {
     owner: host.repository.owner,
@@ -33,8 +35,7 @@ export const useStudio = createSharedComposable(() => {
     authorEmail: host.user.get().email,
   }
 
-  const git = studioFlags.dev ? useDevelopmentGit(gitOptions) : useGit(gitOptions)
-  const { preferences, setManifestId } = useStudioState()
+  const git = devMode.value ? useDevelopmentGit(gitOptions) : useGit(gitOptions)
   const ui = useUI(host)
   const draftDocuments = useDraftDocuments(host, git)
   const documentTree = useTree(StudioFeature.Content, host, draftDocuments)
@@ -43,7 +44,7 @@ export const useStudio = createSharedComposable(() => {
   const context = useContext(host, git, documentTree, mediaTree)
 
   host.on.mounted(async () => {
-    if (studioFlags.dev) {
+    if (devMode.value) {
       initDevelopmentMode(host, draftDocuments, draftMedias, documentTree, mediaTree)
     }
 
@@ -103,7 +104,7 @@ function initDevelopmentMode(host: StudioHost, draftDocuments: ReturnType<typeof
         const document = await host.document.get(id)
         item.modified = document
         item.original = document
-        item.status = getDraftStatus(document, item.original)
+        item.status = getDraftStatus(document, item.original, true)
         item.version = item.version ? item.version + 1 : 1
       }
     }
@@ -125,7 +126,7 @@ function initDevelopmentMode(host: StudioHost, draftDocuments: ReturnType<typeof
         const media = await host.media.get(id)
         item.modified = media
         item.original = media
-        item.status = getDraftStatus(media, item.original)
+        item.status = getDraftStatus(media, item.original, true)
         item.version = item.version ? item.version + 1 : 1
       }
     }
diff --git a/src/app/src/composables/useStudioState.ts b/src/app/src/composables/useStudioState.ts
index 624efb37..91643b3a 100644
--- a/src/app/src/composables/useStudioState.ts
+++ b/src/app/src/composables/useStudioState.ts
@@ -4,6 +4,7 @@ import type { StudioConfig, StudioLocation } from '../types'
 import { StudioFeature } from '../types/context'
 
 export const useStudioState = createSharedComposable(() => {
+  const devMode = ref(false)
   const manifestId = ref<string>('')
   const preferences = useStorage<StudioConfig>('studio-preferences', { syncEditorAndRoute: true, showTechnicalMode: false })
   const location = useStorage<StudioLocation>('studio-active', { active: false, feature: StudioFeature.Content, fsPath: '/' })
@@ -20,14 +21,20 @@ export const useStudioState = createSharedComposable(() => {
     manifestId.value = id
   }
 
+  function enableDevMode() {
+    devMode.value = true
+  }
+
   function updatePreference<K extends keyof StudioConfig>(key: K, value: StudioConfig[K]) {
     preferences.value = { ...preferences.value, [key]: value }
   }
 
   return {
+    devMode: readonly(devMode),
     manifestId: readonly(manifestId),
     preferences: readonly(preferences),
     location: readonly(location),
+    enableDevMode,
     setLocation,
     unsetActiveLocation,
     setManifestId,
diff --git a/src/app/src/composables/useTree.ts b/src/app/src/composables/useTree.ts
index 8b374400..f5f58e41 100644
--- a/src/app/src/composables/useTree.ts
+++ b/src/app/src/composables/useTree.ts
@@ -10,7 +10,7 @@ import { TreeRootId } from '../types/tree'
 
 export const useTree = (type: StudioFeature, host: StudioHost, draft: ReturnType<typeof useDraftDocuments | typeof useDraftMedias>) => {
   const hooks = useHooks()
-  const { preferences, setLocation } = useStudioState()
+  const { preferences, setLocation, devMode } = useStudioState()
 
   const tree = ref<TreeItem[]>([])
 
@@ -106,7 +106,7 @@ export const useTree = (type: StudioFeature, host: StudioHost, draft: ReturnType
       return { ...item, fsPath }
     })
 
-    tree.value = buildTree(listWithFsPath, draft.list.value)
+    tree.value = buildTree(listWithFsPath, draft.list.value, devMode.value)
 
     // Reselect current item to update status
     if (selectItem) {
diff --git a/src/app/src/utils/draft.ts b/src/app/src/utils/draft.ts
index 47693b19..f02686f9 100644
--- a/src/app/src/utils/draft.ts
+++ b/src/app/src/utils/draft.ts
@@ -1,7 +1,6 @@
 import type { DatabaseItem, MediaItem, DatabasePageItem, DraftItem, BaseItem, ContentConflict } from '../types'
 import { DraftStatus, ContentFileExtension, TreeRootId } from '../types'
 import { isEqual } from './database'
-import { studioFlags } from '../composables/useStudio'
 import { generateContentFromDocument, generateDocumentFromContent } from './content'
 import { fromBase64ToUTF8 } from '../utils/string'
 
@@ -44,8 +43,8 @@ export async function checkConflict(draftItem: DraftItem<DatabaseItem | MediaIte
   }
 }
 
-export function getDraftStatus(modified?: BaseItem, original?: BaseItem): DraftStatus {
-  if (studioFlags.dev) {
+export function getDraftStatus(modified?: BaseItem, original?: BaseItem, isDev = false): DraftStatus {
+  if (isDev) {
     return DraftStatus.Pristine
   }
 
diff --git a/src/app/src/utils/tree.ts b/src/app/src/utils/tree.ts
index d2ba7fca..209ab3d7 100644
--- a/src/app/src/utils/tree.ts
+++ b/src/app/src/utils/tree.ts
@@ -9,7 +9,6 @@ import {
 import type { RouteLocationNormalized } from 'vue-router'
 import type { BaseItem } from '../types/item'
 import { isEqual } from './database'
-import { studioFlags } from '../composables/useStudio'
 import { getFileExtension, parseName } from './file'
 import { joinURL } from 'ufo'
 
@@ -29,7 +28,7 @@ export const COLOR_UI_STATUS_MAP: { [key in TreeStatus]?: string } = {
   [TreeStatus.Opened]: 'neutral',
 } as const
 
-export function buildTree(dbItems: ((BaseItem) & { fsPath: string })[], draftList: DraftItem[] | null):
+export function buildTree(dbItems: ((BaseItem) & { fsPath: string })[], draftList: DraftItem[] | null, isDev = false):
 TreeItem[] {
   const tree: TreeItem[] = []
   const directoryMap = new Map<string, TreeItem>()
@@ -93,7 +92,7 @@ TreeItem[] {
 
       const draftFileItem = draftList?.find(draft => draft.id === dbItem.id)
       if (draftFileItem) {
-        fileItem.status = getTreeStatus(draftFileItem.modified!, draftFileItem.original!)
+        fileItem.status = getTreeStatus(draftFileItem.modified!, draftFileItem.original!, isDev)
       }
 
       tree.push(fileItem)
@@ -158,7 +157,7 @@ TreeItem[] {
 
     const draftFileItem = draftList?.find(draft => draft.id === dbItem.id)
     if (draftFileItem) {
-      fileItem.status = getTreeStatus(draftFileItem.modified!, draftFileItem.original!)
+      fileItem.status = getTreeStatus(draftFileItem.modified!, draftFileItem.original!, isDev)
     }
 
     if (dbItem.path) {
@@ -168,7 +167,7 @@ TreeItem[] {
     directoryChildren.push(fileItem)
   }
 
-  calculateDirectoryStatuses(tree)
+  calculateDirectoryStatuses(tree, isDev)
 
   return tree
 }
@@ -177,8 +176,8 @@ export function generateIdFromFsPath(fsPath: string, collectionName: string): st
   return joinURL(collectionName, fsPath)
 }
 
-export function getTreeStatus(modified?: BaseItem, original?: BaseItem): TreeStatus {
-  if (studioFlags.dev) {
+export function getTreeStatus(modified?: BaseItem, original?: BaseItem, isDev = false): TreeStatus {
+  if (isDev) {
     return TreeStatus.Opened
   }
 
@@ -310,8 +309,8 @@ export function findDescendantsFileItemsFromFsPath(tree: TreeItem[], fsPath: str
   return descendants
 }
 
-function calculateDirectoryStatuses(items: TreeItem[]) {
-  if (studioFlags.dev) {
+function calculateDirectoryStatuses(items: TreeItem[], isDev = false) {
+  if (isDev) {
     return
   }
 
@@ -320,7 +319,7 @@ function calculateDirectoryStatuses(items: TreeItem[]) {
       continue
     }
 
-    calculateDirectoryStatuses(item.children)
+    calculateDirectoryStatuses(item.children, isDev)
 
     const childrenWithStatus = item.children.filter(child => child.status && child.status !== TreeStatus.Opened)
 

From 242b3e5eafd35321dcd6519a147bf43a1873bbe7 Mon Sep 17 00:00:00 2001
From: Baptiste Leproux <leproux.baptiste@gmail.com>
Date: Wed, 12 Nov 2025 15:40:49 +0100
Subject: [PATCH 04/11] remove logs

---
 src/app/src/composables/useStudio.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/src/composables/useStudio.ts b/src/app/src/composables/useStudio.ts
index 45d30c66..f2b9b0fb 100644
--- a/src/app/src/composables/useStudio.ts
+++ b/src/app/src/composables/useStudio.ts
@@ -23,8 +23,6 @@ export const useStudio = createSharedComposable(() => {
     enableDevMode()
   }
 
-  console.log('devMode', devMode.value)
-
   const gitOptions: GitOptions = {
     owner: host.repository.owner,
     repo: host.repository.repo,

From 93eb17de3d86970381d4b9c9b3b1133af0be7fc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <atinux@gmail.com>
Date: Thu, 13 Nov 2025 10:58:38 +0100
Subject: [PATCH 05/11] ui: display local filesystem instead of user

---
 src/app/src/components/AppFooter.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app/src/components/AppFooter.vue b/src/app/src/components/AppFooter.vue
index b1dacf83..b2c98a39 100644
--- a/src/app/src/components/AppFooter.vue
+++ b/src/app/src/components/AppFooter.vue
@@ -5,7 +5,7 @@ import { useStudioState } from '../composables/useStudioState'
 import type { DropdownMenuItem } from '@nuxt/ui'
 
 const { ui, host, git } = useStudio()
-const { preferences, updatePreference, unsetActiveLocation } = useStudioState()
+const { devMode, preferences, updatePreference, unsetActiveLocation } = useStudioState()
 const user = host.user.get()
 
 // const showTechnicalMode = computed({
@@ -51,7 +51,14 @@ function closeStudio() {
   <div
     class="bg-muted/50 border-default border-t-[0.5px] flex items-center justify-between gap-1.5 px-2 py-2"
   >
+    <span
+      v-if="devMode"
+      class="ml-2 text-xs text-muted"
+    >
+      Using local filesystem
+    </span>
     <UDropdownMenu
+      v-else
       :portal="false"
       :items="userMenuItems"
       :ui="{ content: 'w-full' }"

From e90d0f39af40e2cd60c0c9f2307b0c4e0f32b8ca Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Thu, 13 Nov 2025 12:19:55 +0100
Subject: [PATCH 06/11] fix: add fsPath to public assets storage

---
 src/module/src/runtime/server/routes/dev/public/[...path].ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/module/src/runtime/server/routes/dev/public/[...path].ts b/src/module/src/runtime/server/routes/dev/public/[...path].ts
index 8b7066fe..b224da49 100644
--- a/src/module/src/runtime/server/routes/dev/public/[...path].ts
+++ b/src/module/src/runtime/server/routes/dev/public/[...path].ts
@@ -1,6 +1,7 @@
 import type { H3Event } from 'h3'
 import { createError, eventHandler, getRequestHeader, readRawBody, setResponseHeader } from 'h3'
 import type { Storage, StorageMeta } from 'unstorage'
+import { withLeadingSlash } from 'ufo'
 // @ts-expect-error useStorage is not defined in .nuxt/imports.d.ts
 import { useStorage } from '#imports'
 
@@ -30,6 +31,7 @@ export default eventHandler(async (event) => {
       extension: key.split('.').pop(),
       stem: key.split('.').join('.'),
       path: '/' + key.replace(/:/g, '/'),
+      fsPath: withLeadingSlash(key.replace(/:/g, '/')),
       version: new Date(item.mtime || new Date()).getTime(),
     }
   }

From e8d3aa1ffd9fef3c62f1cfa58410d5528e81c5ca Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Thu, 13 Nov 2025 13:21:32 +0100
Subject: [PATCH 07/11] up

---
 src/app/src/composables/useDraftBase.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/src/composables/useDraftBase.ts b/src/app/src/composables/useDraftBase.ts
index c51f5bda..7a480f96 100644
--- a/src/app/src/composables/useDraftBase.ts
+++ b/src/app/src/composables/useDraftBase.ts
@@ -221,7 +221,7 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
   }
 
   function getStatus(modified: BaseItem, original: BaseItem): DraftStatus {
-    if (studioFlags.dev) {
+    if (devMode.value) {
       return DraftStatus.Pristine
     }
 

From 54d69ab3b72d763a8b7d43cecbb31a70fc53dc9e Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Thu, 13 Nov 2025 14:29:05 +0100
Subject: [PATCH 08/11] feat: double click to edit

---
 src/app/src/composables/useContext.ts |  5 +++++
 src/app/src/composables/useStudio.ts  | 16 +++++++++++++---
 src/app/src/types/index.ts            |  1 +
 src/module/src/runtime/host.ts        | 25 +++++++++++++++++++++++++
 4 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/app/src/composables/useContext.ts b/src/app/src/composables/useContext.ts
index 9f22dc94..337d363a 100644
--- a/src/app/src/composables/useContext.ts
+++ b/src/app/src/composables/useContext.ts
@@ -234,6 +234,10 @@ export const useContext = createSharedComposable((
     actionInProgress.value = null
   }
 
+  function switchFeature(feature: StudioFeature) {
+    router.push(`/${feature}`)
+  }
+
   return {
     currentFeature,
     activeTree,
@@ -246,5 +250,6 @@ export const useContext = createSharedComposable((
     draftCount,
     isDraftInProgress,
     unsetActionInProgress,
+    switchFeature,
   }
 })
diff --git a/src/app/src/composables/useStudio.ts b/src/app/src/composables/useStudio.ts
index fa4bb5c8..76edecaa 100644
--- a/src/app/src/composables/useStudio.ts
+++ b/src/app/src/composables/useStudio.ts
@@ -7,7 +7,7 @@ import { useDraftMedias } from './useDraftMedias'
 import { ref } from 'vue'
 import { useTree } from './useTree'
 import type { RouteLocationNormalized } from 'vue-router'
-import type { StudioHost, GitOptions, DatabaseItem } from '../types'
+import type { GitOptions, DatabaseItem } from '../types'
 import { StudioFeature } from '../types'
 import { documentStorage, mediaStorage, nullStorageDriver } from '../utils/storage'
 import { useHooks } from './useHooks'
@@ -42,7 +42,7 @@ export const useStudio = createSharedComposable(() => {
 
   host.on.mounted(async () => {
     if (devMode.value) {
-      initDevelopmentMode(host, documentTree, mediaTree)
+      initDevelopmentMode()
     }
 
     await draftDocuments.load()
@@ -79,7 +79,8 @@ export const useStudio = createSharedComposable(() => {
   }
 })
 
-function initDevelopmentMode(host: StudioHost, documentTree: ReturnType<typeof useTree>, mediaTree: ReturnType<typeof useTree>) {
+function initDevelopmentMode() {
+  const { host, documentTree, mediaTree, context, ui } = useStudio()
   const hooks = useHooks()
 
   // Disable browser storages
@@ -128,4 +129,13 @@ function initDevelopmentMode(host: StudioHost, documentTree: ReturnType<typeof u
 
     await hooks.callHook('studio:draft:media:updated', { caller: 'useStudio.on.mediaUpdate' })
   })
+
+  host.on.requestDocumentEdit((fsPath: string) => {
+    if (context.currentFeature.value !== StudioFeature.Content) {
+      context.switchFeature(StudioFeature.Content)
+    }
+
+    documentTree.selectItemByFsPath(fsPath)
+    ui.open()
+  })
 }
diff --git a/src/app/src/types/index.ts b/src/app/src/types/index.ts
index a2a46ec8..155871f8 100644
--- a/src/app/src/types/index.ts
+++ b/src/app/src/types/index.ts
@@ -30,6 +30,7 @@ export interface StudioHost {
     manifestUpdate: (fn: (id: string) => void) => void
     documentUpdate: (fn: (fsPath: string, type: 'remove' | 'update') => void) => void
     mediaUpdate: (fn: (fsPath: string, type: 'remove' | 'update') => void) => void
+    requestDocumentEdit: (fn: (fsPath: string) => void) => void
   }
   ui: {
     colorMode: 'light' | 'dark'
diff --git a/src/module/src/runtime/host.ts b/src/module/src/runtime/host.ts
index 0a64d85e..3b6c70fc 100644
--- a/src/module/src/runtime/host.ts
+++ b/src/module/src/runtime/host.ts
@@ -142,6 +142,10 @@ export function useStudioHost(user: StudioUser, repository: Repository): StudioH
       mediaUpdate: (_fn: (id: string, type: 'remove' | 'update') => void) => {
         // no operation
       },
+      requestDocumentEdit: (fn: (fsPath: string) => void) => {
+        // @ts-expect-error studio:document:edit is not defined in types
+        useNuxtApp().hooks.hook('studio:document:edit', fn)
+      },
     },
     ui: {
       colorMode,
@@ -347,6 +351,27 @@ export function useStudioHost(user: StudioUser, repository: Repository): StudioH
         }
         return meta.fetch()
       })
+
+    document.body.addEventListener('dblclick', (event: MouseEvent) => {
+      let element = event.target as HTMLElement
+      while (element) {
+        if (element.getAttribute('data-content-id')) {
+          break
+        }
+        element = element.parentElement as HTMLElement
+      }
+      if (element) {
+        const id = element.getAttribute('data-content-id')!
+        const collection = getCollectionById(id, useContentCollections())
+        const source = getCollectionSourceById(id, collection.source)
+        const fsPath = generateFsPathFromId(id, source!)
+
+        // @ts-expect-error studio:document:edit is not defined in types
+        useNuxtApp().hooks.callHook('studio:document:edit', fsPath)
+      }
+    })
+    // Initialize styles
+    host.ui.updateStyles()
   })()
 
   return host

From d49a435a9d603313c86bed5512a5a392c0bcf970 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Thu, 13 Nov 2025 14:32:03 +0100
Subject: [PATCH 09/11] up

---
 src/app/src/composables/useDraftBase.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/src/composables/useDraftBase.ts b/src/app/src/composables/useDraftBase.ts
index 7a480f96..a3eed97f 100644
--- a/src/app/src/composables/useDraftBase.ts
+++ b/src/app/src/composables/useDraftBase.ts
@@ -89,7 +89,7 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
             deleteDraftItem = {
               fsPath: existingDraftItem.fsPath,
               status: DraftStatus.Deleted,
-              original: originalDbItem,
+              original: existingDraftItem.original,
               githubFile,
             }
 

From 13dd2c04c547f1c77c8e8fe653bfc932fad4e931 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Thu, 13 Nov 2025 14:51:02 +0100
Subject: [PATCH 10/11] fix: improve dev mode detection

---
 playground/docus/nuxt.config.ts |  1 -
 src/module/src/module.ts        | 10 +++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/playground/docus/nuxt.config.ts b/playground/docus/nuxt.config.ts
index 6ecc979e..3ddfd574 100644
--- a/playground/docus/nuxt.config.ts
+++ b/playground/docus/nuxt.config.ts
@@ -13,7 +13,6 @@ export default defineNuxtConfig({
   },
   compatibilityDate: '2025-08-26',
   studio: {
-    dev: false,
     route: '/admin',
     repository: {
       owner: 'nuxt-content',
diff --git a/src/module/src/module.ts b/src/module/src/module.ts
index 32d710a0..751d9c50 100644
--- a/src/module/src/module.ts
+++ b/src/module/src/module.ts
@@ -107,16 +107,16 @@ export default defineNuxtModule<ModuleOptions>({
         clientSecret: process.env.STUDIO_GITHUB_CLIENT_SECRET,
       },
     },
-    dev: false,
-    development: {
-      sync: false,
-    },
+    dev: true
   },
   async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url)
     const runtime = (...args: string[]) => resolver.resolve('./runtime', ...args)
 
-    options.dev = nuxt.options.dev || options.development?.sync || false
+    if (nuxt.options.dev === false || options.development?.sync === false) {
+      options.dev = false
+    }
+
     if (!nuxt.options.dev && !nuxt.options._prepare) {
       if (!options.auth?.github?.clientId && !options.auth?.github?.clientSecret) {
         logger.warn([

From 9115526e8bbe803c9928ad8a0d8c872a70163a1d Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Thu, 13 Nov 2025 15:26:00 +0100
Subject: [PATCH 11/11] lint: fix

---
 src/module/src/module.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/module/src/module.ts b/src/module/src/module.ts
index 751d9c50..2af8456b 100644
--- a/src/module/src/module.ts
+++ b/src/module/src/module.ts
@@ -107,7 +107,7 @@ export default defineNuxtModule<ModuleOptions>({
         clientSecret: process.env.STUDIO_GITHUB_CLIENT_SECRET,
       },
     },
-    dev: true
+    dev: true,
   },
   async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url)