diff --git a/package.json b/package.json
index 7bf596cd..6d9b9028 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@5111",
     "@octokit/types": "^15.0.0",
     "@tailwindcss/typography": "latest",
+    "@types/js-yaml": "^4.0.9",
     "@vitejs/plugin-vue": "^6.0.1",
     "eslint": "^9.36.0",
     "modern-monaco": "^0.2.2",
@@ -79,6 +80,7 @@
     "defu": "^6.1.4",
     "destr": "^2.0.5",
     "idb-keyval": "^6.2.2",
+    "js-yaml": "^4.1.0",
     "minimark": "^0.2.0",
     "ofetch": "^1.4.1",
     "unstorage": "^1.17.1"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4d65a70c..38290a18 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -40,6 +40,9 @@ importers:
       idb-keyval:
         specifier: ^6.2.2
         version: 6.2.2
+      js-yaml:
+        specifier: ^4.1.0
+        version: 4.1.0
       minimark:
         specifier: ^0.2.0
         version: 0.2.0
@@ -71,6 +74,9 @@ importers:
       '@tailwindcss/typography':
         specifier: latest
         version: 0.5.19(tailwindcss@4.1.13)
+      '@types/js-yaml':
+        specifier: ^4.0.9
+        version: 4.0.9
       '@vitejs/plugin-vue':
         specifier: ^6.0.1
         version: 6.0.1(vite@7.1.7(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.2))
@@ -2070,6 +2076,9 @@ packages:
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
+  '@types/js-yaml@4.0.9':
+    resolution: {integrity: sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -8816,6 +8825,8 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
+  '@types/js-yaml@4.0.9': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/lodash@4.17.20': {}
@@ -12144,7 +12155,7 @@ snapshots:
       unctx: 2.4.1
       unimport: 5.2.0
       unplugin: 2.3.10
-      unplugin-vue-router: 0.15.0(@vue/compiler-sfc@3.5.22)(typescript@5.9.2)(vue-router@4.5.1(vue@3.5.22(typescript@5.9.2)))(vue@3.5.21(typescript@5.9.2))
+      unplugin-vue-router: 0.15.0(@vue/compiler-sfc@3.5.22)(typescript@5.9.2)(vue-router@4.5.1(vue@3.5.21(typescript@5.9.2)))(vue@3.5.21(typescript@5.9.2))
       unstorage: 1.17.1(db0@0.3.2(better-sqlite3@12.2.0))(idb-keyval@6.2.2)(ioredis@5.7.0)
       untyped: 2.0.0
       vue: 3.5.21(typescript@5.9.2)
@@ -13736,7 +13747,7 @@ snapshots:
     transitivePeerDependencies:
       - vue
 
-  unplugin-vue-router@0.15.0(@vue/compiler-sfc@3.5.22)(typescript@5.9.2)(vue-router@4.5.1(vue@3.5.22(typescript@5.9.2)))(vue@3.5.21(typescript@5.9.2)):
+  unplugin-vue-router@0.15.0(@vue/compiler-sfc@3.5.22)(typescript@5.9.2)(vue-router@4.5.1(vue@3.5.21(typescript@5.9.2)))(vue@3.5.21(typescript@5.9.2)):
     dependencies:
       '@vue-macros/common': 3.0.0-beta.16(vue@3.5.21(typescript@5.9.2))
       '@vue/compiler-sfc': 3.5.22
diff --git a/src/app/src/components/shared/item/ItemCard.vue b/src/app/src/components/shared/item/ItemCard.vue
index 4e6df6b1..7f7b7bce 100644
--- a/src/app/src/components/shared/item/ItemCard.vue
+++ b/src/app/src/components/shared/item/ItemCard.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import type { TreeItem } from '../../../types'
+import { type TreeItem, TreeStatus } from '../../../types'
 import type { PropType } from 'vue'
 import { computed } from 'vue'
 import { Image } from '@unpic/vue'
 import { titleCase } from 'scule'
 import { COLOR_UI_STATUS_MAP } from '../../../utils/tree'
-import { DraftStatus } from '../../../types/draft'
 
 const props = defineProps({
   item: {
@@ -62,7 +61,7 @@ const statusRingColor = computed(() => props.item.status ? `ring-(--ui-${COLOR_U
         />
         <div
           v-else
-          class="z-[-1] aspect-video bg-muted"
+          class="z-[-1] aspect-video bg-elevated"
         />
         <div
           v-if="itemExtensionIcon"
@@ -75,7 +74,7 @@ const statusRingColor = computed(() => props.item.status ? `ring-(--ui-${COLOR_U
         </div>
       </div>
       <ItemBadge
-        v-if="item.status && item.status !== DraftStatus.Opened"
+        v-if="item.status && item.status !== TreeStatus.Opened"
         :status="item.status"
         class="absolute top-2 right-2"
       />
diff --git a/src/app/src/components/shared/item/ItemCardForm.vue b/src/app/src/components/shared/item/ItemCardForm.vue
index a40505cf..1a4181b5 100644
--- a/src/app/src/components/shared/item/ItemCardForm.vue
+++ b/src/app/src/components/shared/item/ItemCardForm.vue
@@ -1,17 +1,24 @@
 <script setup lang="ts">
 import { computed, reactive, type PropType } from 'vue'
-import { Image } from '@unpic/vue'
 import * as z from 'zod'
 import type { FormSubmitEvent } from '@nuxt/ui'
 import { type CreateFileParams, type CreateFolderParams, type RenameFileParams, type StudioAction, type TreeItem, ContentFileExtension } from '../../../types'
-import { joinURL, withLeadingSlash } from 'ufo'
+import { joinURL, withLeadingSlash, withoutLeadingSlash } from 'ufo'
 import { contentFileExtensions } from '../../../utils/content'
 import { useStudio } from '../../../composables/useStudio'
 import { StudioItemActionId } from '../../../types'
 import { stripNumericPrefix } from '../../../utils/string'
+import { defineShortcuts } from '#imports'
+import { upperFirst } from 'scule'
 
 const { context } = useStudio()
 
+defineShortcuts({
+  escape: () => {
+    context.unsetActionInProgress()
+  },
+})
+
 const props = defineProps({
   actionId: {
     type: String as PropType<StudioItemActionId.CreateDocument | StudioItemActionId.CreateFolder | StudioItemActionId.RenameItem>,
@@ -48,6 +55,14 @@ const action = computed<StudioAction>(() => {
   return context.itemActions.value.find(action => action.id === props.actionId)!
 })
 
+const isFolderAction = computed(() => {
+  return props.actionId === StudioItemActionId.CreateFolder
+    || (
+      props.actionId === StudioItemActionId.RenameItem
+      && props.renamedItem.type === 'directory'
+    )
+})
+
 const itemExtensionIcon = computed<string>(() => {
   return {
     md: 'i-ph-markdown-logo',
@@ -74,26 +89,23 @@ const tooltipText = computed(() => {
 })
 
 function onSubmit(_event: FormSubmitEvent<Schema>) {
-  const fsPath = joinURL(props.parentItem.fsPath, `${state.name}.${state.extension}`)
-
   let params: CreateFileParams | CreateFolderParams | RenameFileParams
   switch (props.actionId) {
     case StudioItemActionId.CreateDocument:
       params = {
-        routePath: routePath.value,
-        fsPath,
-        content: `New ${state.name} file`,
+        fsPath: withoutLeadingSlash(joinURL(props.parentItem.fsPath, `${state.name}.${state.extension}`)),
+        content: `# ${upperFirst(state.name)} file`,
       }
       break
     case StudioItemActionId.CreateFolder:
       params = {
-        fsPath,
+        fsPath: withoutLeadingSlash(joinURL(props.parentItem.fsPath, state.name)),
       }
       break
     case StudioItemActionId.RenameItem:
       params = {
+        newFsPath: withoutLeadingSlash(joinURL(props.parentItem.fsPath, `${state.name}.${state.extension}`)),
         id: props.renamedItem.id,
-        newFsPath: joinURL(props.parentItem.fsPath, `${state.name}.${state.extension}`),
       }
       break
   }
@@ -113,14 +125,11 @@ function onSubmit(_event: FormSubmitEvent<Schema>) {
         reverse
         class="hover:bg-white relative w-full min-w-0"
       >
-        <div class="relative">
-          <Image
-            src="https://placehold.co/1920x1080/f9fafc/f9fafc"
-            width="426"
-            height="240"
-            alt="Card placeholder"
-            class="z-[-1] rounded-t-lg"
-          />
+        <div
+          v-if="!isFolderAction"
+          class="relative"
+        >
+          <div class="z-[-1] aspect-video rounded-lg bg-elevated" />
           <div class="absolute inset-0 flex items-center justify-center">
             <UIcon
               :name="itemExtensionIcon"
@@ -170,15 +179,23 @@ function onSubmit(_event: FormSubmitEvent<Schema>) {
                 <template #error>
                   <span />
                 </template>
-                <UInput
-                  v-model="state.name"
-                  variant="soft"
-                  autofocus
-                  placeholder="File name"
-                  class="w-full"
-                />
+                <div class="flex items-center gap-1">
+                  <UIcon
+                    v-if="isFolderAction"
+                    name="i-lucide-folder"
+                    class="h-4 w-4 shrink-0 text-muted"
+                  />
+                  <UInput
+                    v-model="state.name"
+                    variant="soft"
+                    autofocus
+                    :placeholder="isFolderAction ? 'Folder name' : 'File name'"
+                    class="w-full"
+                  />
+                </div>
               </UFormField>
               <UFormField
+                v-if="!isFolderAction"
                 name="extension"
                 :ui="{ error: 'hidden' }"
               >
diff --git a/src/app/src/composables/useContext.ts b/src/app/src/composables/useContext.ts
index c221a640..c0a2df18 100644
--- a/src/app/src/composables/useContext.ts
+++ b/src/app/src/composables/useContext.ts
@@ -18,6 +18,8 @@ import type { useTree } from './useTree'
 import { useRoute } from 'vue-router'
 import { findDescendantsFileItemsFromId } from '../utils/tree'
 import type { useDraftMedias } from './useDraftMedias'
+import { joinURL } from 'ufo'
+import { upperFirst } from 'scule'
 
 export const useContext = createSharedComposable((
   host: StudioHost,
@@ -73,11 +75,25 @@ export const useContext = createSharedComposable((
 
   const itemActionHandler: { [K in StudioItemActionId]: (args: ActionHandlerParams[K]) => Promise<void> } = {
     [StudioItemActionId.CreateFolder]: async (params: CreateFolderParams) => {
-      alert(`create folder in ${params.fsPath}`)
+      const { fsPath } = params
+      const folderName = fsPath.split('/').pop()!
+      const rootDocumentFsPath = joinURL(fsPath, 'index.md')
+      const navigationDocumentFsPath = joinURL(fsPath, '.navigation.yml')
+
+      const navigationDocument = await host.document.create(navigationDocumentFsPath, `title: ${folderName}`)
+      const rootDocument = await host.document.create(rootDocumentFsPath, `# ${upperFirst(folderName)} root file`)
+
+      await activeTree.value.draft.create(navigationDocument)
+
+      unsetActionInProgress()
+
+      const rootDocumentDraftItem = await activeTree.value.draft.create(rootDocument)
+
+      await activeTree.value.selectItemById(rootDocumentDraftItem.id)
     },
     [StudioItemActionId.CreateDocument]: async (params: CreateFileParams) => {
-      const { fsPath, routePath, content } = params
-      const document = await host.document.create(fsPath, routePath, content)
+      const { fsPath, content } = params
+      const document = await host.document.create(fsPath, content)
       const draftItem = await activeTree.value.draft.create(document)
       await activeTree.value.selectItemById(draftItem.id)
     },
diff --git a/src/app/src/composables/useDraftDocuments.ts b/src/app/src/composables/useDraftDocuments.ts
index 2eb19041..9129a498 100644
--- a/src/app/src/composables/useDraftDocuments.ts
+++ b/src/app/src/composables/useDraftDocuments.ts
@@ -8,7 +8,6 @@ import { generateContentFromDocument } from '../utils/content'
 import { findDescendantsFromId, getDraftStatus } from '../utils/draft'
 import { createSharedComposable } from '@vueuse/core'
 import { useHooks } from './useHooks'
-import { stripNumericPrefix } from '../utils/string'
 import { joinURL } from 'ufo'
 
 const storage = createStorage({
@@ -178,15 +177,13 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
       throw new Error(`Database item not found for document ${id}`)
     }
 
-    const nameWithoutExtension = newFsPath.split('/').pop()!.split('.').slice(0, -1).join('.')
-    const newRoutePath = `${currentDbItem.path!.split('/').slice(0, -1).join('/')}/${nameWithoutExtension}`
     const content = await generateContentFromDocument(currentDbItem)
 
     // Delete renamed draft item
     await remove([id])
 
     // Create new draft item
-    const newDbItem = await host.document.create(newFsPath, newRoutePath, content!)
+    const newDbItem = await host.document.create(newFsPath, content!)
     return await create(newDbItem, currentDbItem)
   }
 
@@ -202,16 +199,14 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     }
 
     const currentFsPath = currentDraftItem?.fsPath || host.document.getFileSystemPath(id)
-    const currentRoutePath = currentDbItem.path!
     const currentContent = await generateContentFromDocument(currentDbItem) || ''
     const currentName = currentFsPath.split('/').pop()!
     const currentExtension = currentName.split('.').pop()!
     const currentNameWithoutExtension = currentName.split('.').slice(0, -1).join('.')
 
     const newFsPath = `${currentFsPath.split('/').slice(0, -1).join('/')}/${currentNameWithoutExtension}-copy.${currentExtension}`
-    const newRoutePath = `${currentRoutePath.split('/').slice(0, -1).join('/')}/${stripNumericPrefix(currentNameWithoutExtension)}-copy`
 
-    const newDbItem = await host.document.create(newFsPath, newRoutePath, currentContent)
+    const newDbItem = await host.document.create(newFsPath, currentContent)
 
     return await create(newDbItem)
   }
diff --git a/src/app/src/composables/useStudio.ts b/src/app/src/composables/useStudio.ts
index a04b9312..316b0cff 100644
--- a/src/app/src/composables/useStudio.ts
+++ b/src/app/src/composables/useStudio.ts
@@ -24,10 +24,10 @@ export const useStudio = createSharedComposable(() => {
   const isReady = ref(false)
   const ui = useUI(host)
   const draftDocuments = useDraftDocuments(host, git)
-  const documentTree = useTree(StudioFeature.Content, host, draftDocuments)
+  const documentTree = useTree(StudioFeature.Content, host, ui, draftDocuments)
 
   const draftMedias = useDraftMedias(host, git)
-  const mediaTree = useTree(StudioFeature.Media, host, draftMedias)
+  const mediaTree = useTree(StudioFeature.Media, host, ui, draftMedias)
 
   const context = useContext(host, documentTree, mediaTree)
 
@@ -40,6 +40,10 @@ export const useStudio = createSharedComposable(() => {
 
     host.on.routeChange(async (to: RouteLocationNormalized, _from: RouteLocationNormalized) => {
       if (ui.isOpen.value && ui.config.value.syncEditorAndRoute) {
+        if (documentTree.currentItem.value.routePath === to.path) {
+          return
+        }
+
         await documentTree.selectByRoute(to)
       }
       // setTimeout(() => {
diff --git a/src/app/src/composables/useTree.ts b/src/app/src/composables/useTree.ts
index 978e67e0..49141031 100644
--- a/src/app/src/composables/useTree.ts
+++ b/src/app/src/composables/useTree.ts
@@ -5,8 +5,9 @@ import type { useDraftMedias } from './useDraftMedias'
 import { buildTree, findItemFromId, findItemFromRoute, ROOT_ITEM, findParentFromId } from '../utils/tree'
 import type { RouteLocationNormalized } from 'vue-router'
 import { useHooks } from './useHooks'
+import type { useUI } from './useUI'
 
-export const useTree = (type: StudioFeature, host: StudioHost, draft: ReturnType<typeof useDraftDocuments | typeof useDraftMedias>) => {
+export const useTree = (type: StudioFeature, host: StudioHost, ui: ReturnType<typeof useUI>, draft: ReturnType<typeof useDraftDocuments | typeof useDraftMedias>) => {
   const hooks = useHooks()
 
   const tree = ref<TreeItem[]>([])
@@ -40,7 +41,7 @@ export const useTree = (type: StudioFeature, host: StudioHost, draft: ReturnType
   async function select(item: TreeItem) {
     currentItem.value = item || ROOT_ITEM
     if (item?.type === 'file') {
-      if (type === StudioFeature.Content) {
+      if (type === StudioFeature.Content && ui.config.value.syncEditorAndRoute) {
         host.app.navigateTo(item.routePath!)
       }
 
diff --git a/src/app/src/types/components.ts b/src/app/src/types/component.ts
similarity index 100%
rename from src/app/src/types/components.ts
rename to src/app/src/types/component.ts
diff --git a/src/app/src/types/context.ts b/src/app/src/types/context.ts
index 024131ef..31646adf 100644
--- a/src/app/src/types/context.ts
+++ b/src/app/src/types/context.ts
@@ -31,9 +31,9 @@ export interface StudioAction<K extends StudioItemActionId = StudioItemActionId>
 export interface CreateFolderParams {
   fsPath: string
 }
+
 export interface CreateFileParams {
   fsPath: string
-  routePath: string
   content: string
 }
 
diff --git a/src/app/src/types/index.ts b/src/app/src/types/index.ts
index d27cdc9d..f3b8eef9 100644
--- a/src/app/src/types/index.ts
+++ b/src/app/src/types/index.ts
@@ -3,7 +3,7 @@ import type { DatabaseItem } from './database'
 import type { RouteLocationNormalized } from 'vue-router'
 import type { MediaItem } from './media'
 import type { Repository } from './git'
-import type { ComponentMeta } from './components'
+import type { ComponentMeta } from './component'
 
 export * from './item'
 export * from './draft'
@@ -14,7 +14,7 @@ export * from './tree'
 export * from './git'
 export * from './context'
 export * from './content'
-export * from './components'
+export * from './component'
 
 export interface StudioHost {
   meta: {
@@ -40,7 +40,7 @@ export interface StudioHost {
     getFileSystemPath: (id: string) => string
     list: () => Promise<DatabaseItem[]>
     upsert: (id: string, upsertedDocument: DatabaseItem) => Promise<void>
-    create: (fsPath: string, routePath: string, content: string) => Promise<DatabaseItem>
+    create: (fsPath: string, content: string) => Promise<DatabaseItem>
     delete: (id: string) => Promise<void>
     detectActives: () => Array<{ id: string, title: string }>
   }
diff --git a/src/app/src/utils/content.ts b/src/app/src/utils/content.ts
index bc028106..9cf7012a 100644
--- a/src/app/src/utils/content.ts
+++ b/src/app/src/utils/content.ts
@@ -63,8 +63,6 @@ export function removeReservedKeysFromDocument(document: DatabaseItem) {
   return result
 }
 
-// MARK: - Generate Document - Parse Content
-
 export async function generateDocumentFromContent(id: string, content: string): Promise<DatabaseItem | null> {
   const [_id, _hash] = id.split('#')
   const extension = _id!.split('.').pop()
@@ -84,7 +82,7 @@ export async function generateDocumentFromContent(id: string, content: string):
   return null
 }
 
-async function generateDocumentFromYAMLContent(id: string, content: string): Promise<DatabaseItem | null> {
+async function generateDocumentFromYAMLContent(id: string, content: string): Promise<DatabaseItem> {
   const { data } = parseFrontMatter(`---\n${content}\n---`)
 
   // Keep array contents under `body` key
@@ -95,14 +93,16 @@ async function generateDocumentFromYAMLContent(id: string, content: string): Pro
   }
 
   return {
+    id,
+    extension: ContentFileExtension.YAML,
+    stem: id.split('.').slice(0, -1).join('.'),
     meta: {},
     ...parsed,
     body: parsed.body || parsed,
-    id,
-  } as unknown as DatabaseItem
+  } as DatabaseItem
 }
 
-async function generateDocumentFromJSONContent(id: string, content: string): Promise<DatabaseItem | null> {
+async function generateDocumentFromJSONContent(id: string, content: string): Promise<DatabaseItem> {
   let parsed: Record<string, unknown> = destr(content)
 
   // Keep array contents under `body` key
@@ -114,14 +114,16 @@ async function generateDocumentFromJSONContent(id: string, content: string): Pro
   }
 
   return {
+    id,
+    extension: ContentFileExtension.JSON,
+    stem: id.split('.').slice(0, -1).join('.'),
     meta: {},
     ...parsed,
     body: parsed.body || parsed,
-    id,
-  } as unknown as DatabaseItem
+  } as DatabaseItem
 }
 
-async function generateDocumentFromMarkdownContent(id: string, content: string): Promise<DatabaseItem | null> {
+async function generateDocumentFromMarkdownContent(id: string, content: string): Promise<DatabaseItem> {
   const document = await parseMarkdown(content, {
     remark: {
       plugins: {
@@ -146,12 +148,14 @@ async function generateDocumentFromMarkdownContent(id: string, content: string):
   return {
     id,
     meta: {},
+    extension: ContentFileExtension.Markdown,
+    stem: id.split('.').slice(0, -1).join('.'),
     body: {
       ...body,
       toc: document.toc,
     },
     ...document.data,
-  } as unknown as DatabaseItem
+  } as DatabaseItem
 }
 
 export async function generateContentFromDocument(document: DatabaseItem): Promise<string | null> {
diff --git a/src/module/src/runtime/host.dev.ts b/src/module/src/runtime/host.dev.ts
index 4e622555..2dced624 100644
--- a/src/module/src/runtime/host.dev.ts
+++ b/src/module/src/runtime/host.dev.ts
@@ -2,7 +2,7 @@ import { useStudioHost as useStudioHostBase } from './host'
 import type { StudioUser, DatabaseItem, Repository } from 'nuxt-studio/app'
 // TODO: use `nuxt-studio/app/utils` instead of `../../../app/src/utils`
 import { generateContentFromDocument } from '../../../app/src/utils'
-import { createCollectionDocument, getCollectionInfo } from './utils/collections'
+import { createCollectionDocument, getCollectionInfo } from './utils/collection'
 import { createStorage } from 'unstorage'
 import httpDriver from 'unstorage/drivers/http'
 import { useRuntimeConfig } from '#imports'
diff --git a/src/module/src/runtime/host.ts b/src/module/src/runtime/host.ts
index 43a166d4..3d19c732 100644
--- a/src/module/src/runtime/host.ts
+++ b/src/module/src/runtime/host.ts
@@ -2,7 +2,7 @@ import { ref } from 'vue'
 import { ensure } from './utils/ensure'
 import type { CollectionItemBase, DatabaseAdapter } from '@nuxt/content'
 import type { ContentDatabaseAdapter } from '../types/content'
-import { getCollectionByFilePath, generateIdFromFsPath, createCollectionDocument, generateRecordDeletion, generateRecordInsert, getCollectionInfo } from './utils/collections'
+import { getCollectionByFilePath, generateIdFromFsPath, createCollectionDocument, generateRecordDeletion, generateRecordInsert, getCollectionInfo } from './utils/collection'
 import { kebabCase } from 'lodash'
 import type { UseStudioHost, StudioHost, StudioUser, DatabaseItem, MediaItem, Repository } from 'nuxt-studio/app'
 import type { RouteLocationNormalized, Router } from 'vue-router'
@@ -183,7 +183,7 @@ export function useStudioHost(user: StudioUser, repository: Repository): StudioH
 
         return contents.flat()
       },
-      create: async (fsPath: string, routePath: string, content: string) => {
+      create: async (fsPath: string, content: string) => {
         const collections = useContentCollections()
 
         const collectionInfo = getCollectionByFilePath(fsPath, collections)
@@ -195,11 +195,11 @@ export function useStudioHost(user: StudioUser, repository: Repository): StudioH
           throw new Error(`Cannot create document with id "${id}": document already exists.`)
         }
 
-        const document = await generateDocumentFromContent(id, fsPath, routePath, content)
+        const document = await generateDocumentFromContent(id, content)
 
-        await host.document.upsert(id, document)
+        await host.document.upsert(id, document!)
 
-        return document
+        return document!
       },
       upsert: async (id: string, upsertedDocument: CollectionItemBase) => {
         id = id.replace(/:/g, '/')
diff --git a/src/module/src/runtime/utils/collections.ts b/src/module/src/runtime/utils/collection.ts
similarity index 98%
rename from src/module/src/runtime/utils/collections.ts
rename to src/module/src/runtime/utils/collection.ts
index 894ebabf..b15763f6 100644
--- a/src/module/src/runtime/utils/collections.ts
+++ b/src/module/src/runtime/utils/collection.ts
@@ -17,7 +17,7 @@ export const getCollectionByFilePath = (path: string, collections: Record<string
     const paths = path === '/' ? ['index.yml', 'index.yaml', 'index.md', 'index.json'] : [path]
     return paths.some((p) => {
       matchedSource = collection.source.find((source) => {
-        const include = minimatch(p, source.include)
+        const include = minimatch(p, source.include, { dot: true })
         const exclude = source.exclude?.some(exclude => minimatch(p, exclude))
 
         return include && !exclude
diff --git a/src/module/src/runtime/utils/content.ts b/src/module/src/runtime/utils/content.ts
index 18bc999f..1df0de3b 100644
--- a/src/module/src/runtime/utils/content.ts
+++ b/src/module/src/runtime/utils/content.ts
@@ -1,9 +1,15 @@
 // import type { ParsedContentFile } from '@nuxt/content'
 import { parseMarkdown } from '@nuxtjs/mdc/runtime'
-import { generateStemFromFsPath } from './collections'
 import { omit } from './object'
 import type { DatabaseItem } from 'nuxt-studio/app'
 import { compressTree } from '@nuxt/content/runtime'
+import { ContentFileExtension } from '../../../../app/src/types'
+import { parseFrontMatter } from 'remark-mdc'
+import { destr } from 'destr'
+import { visit } from 'unist-util-visit'
+import type { Node } from 'unist'
+import type { MDCElement } from '@nuxtjs/mdc'
+import type { MarkdownRoot } from '@nuxt/content'
 
 export function removeReservedKeysFromDocument(document: DatabaseItem) {
   const result = omit(document, ['id', 'stem', 'extension', '__hash__', 'path', 'body', 'meta'])
@@ -31,35 +37,100 @@ export function removeReservedKeysFromDocument(document: DatabaseItem) {
   return result
 }
 
-export async function generateDocumentFromContent(id: string, fsPath: string, routePath: string, content: string): Promise<DatabaseItem> {
-  // TODO expose document creation logic from content module and use it there
-  const stem = generateStemFromFsPath(fsPath)
+// TODO: factorize with app/src/utils/content.ts
+export async function generateDocumentFromContent(id: string, content: string): Promise<DatabaseItem | null> {
+  const [_id, _hash] = id.split('#')
+  const extension = _id!.split('.').pop()
 
-  const parsed = await parseMarkdown(content).then((res) => {
-    if (res.body.type === 'root') {
-      return {
-        ...res,
-        body: compressTree(res.body),
-      }
+  if (extension === ContentFileExtension.Markdown) {
+    return await generateDocumentFromMarkdownContent(id, content)
+  }
+
+  if (extension === ContentFileExtension.YAML || extension === ContentFileExtension.YML) {
+    return await generateDocumentFromYAMLContent(id, content)
+  }
+
+  if (extension === ContentFileExtension.JSON) {
+    return await generateDocumentFromJSONContent(id, content)
+  }
+
+  return null
+}
+
+async function generateDocumentFromYAMLContent(id: string, content: string): Promise<DatabaseItem> {
+  const { data } = parseFrontMatter(`---\n${content}\n---`)
+
+  // Keep array contents under `body` key
+  let parsed = data
+  if (Array.isArray(data)) {
+    console.warn(`YAML array is not supported in ${id}, moving the array into the \`body\` key`)
+    parsed = { body: data }
+  }
+
+  return {
+    id,
+    extension: ContentFileExtension.YAML,
+    stem: id.split('.').slice(0, -1).join('.'),
+    meta: {},
+    ...parsed,
+    body: parsed.body || parsed,
+  } as DatabaseItem
+}
+
+async function generateDocumentFromJSONContent(id: string, content: string): Promise<DatabaseItem> {
+  let parsed: Record<string, unknown> = destr(content)
+
+  // Keep array contents under `body` key
+  if (Array.isArray(parsed)) {
+    console.warn(`JSON array is not supported in ${id}, moving the array into the \`body\` key`)
+    parsed = {
+      body: parsed,
     }
-    return res
-  })
+  }
 
   return {
     id,
-    stem,
-    path: routePath,
+    extension: ContentFileExtension.JSON,
+    stem: id.split('.').slice(0, -1).join('.'),
     meta: {},
-    extension: id.split('.').pop()!,
-    seo: {
-      title: parsed.data.title,
-      description: parsed.data.description,
+    ...parsed,
+    body: parsed.body || parsed,
+  } as DatabaseItem
+}
+
+async function generateDocumentFromMarkdownContent(id: string, content: string): Promise<DatabaseItem> {
+  const document = await parseMarkdown(content, {
+    remark: {
+      plugins: {
+        'remark-mdc': {
+          options: {
+            autoUnwrap: true,
+          },
+        },
+      },
     },
-    ...parsed.data,
-    excerpt: parsed.excerpt,
+  })
+
+  console.log('document =>', document)
+
+  // Remove nofollow from links
+  visit(document.body, (node: Node) => (node as MDCElement).type === 'element' && (node as MDCElement).tag === 'a', (node: Node) => {
+    if ((node as MDCElement).props?.rel?.join(' ') === 'nofollow') {
+      Reflect.deleteProperty((node as MDCElement).props!, 'rel')
+    }
+  })
+
+  const body = document.body.type === 'root' ? compressTree(document.body) : document.body as never as MarkdownRoot
+
+  return {
+    id,
+    meta: {},
+    extension: ContentFileExtension.Markdown,
+    stem: id.split('.').slice(0, -1).join('.'),
     body: {
-      ...parsed.body,
-      toc: parsed.toc,
+      ...body,
+      toc: document.toc,
     },
-  }
+    ...document.data,
+  } as DatabaseItem
 }
diff --git a/src/module/src/runtime/utils/serialization.ts b/src/module/src/runtime/utils/serialization.ts
new file mode 100644
index 00000000..5f478669
--- /dev/null
+++ b/src/module/src/runtime/utils/serialization.ts
@@ -0,0 +1,34 @@
+import yaml from 'js-yaml'
+
+export const yamlToJson = (data: string) => {
+  const customSchema = yaml.DEFAULT_SCHEMA.extend({
+    implicit: [
+      new yaml.Type('tag:yaml.org,2002:timestamp', {
+        kind: 'scalar',
+        resolve: () => false,
+        construct: data => data,
+      }),
+    ],
+  })
+
+  try {
+    const json = yaml.load(data, { schema: customSchema }) as Record<string, unknown>
+    // Check if json is an object
+    return json && typeof json === 'object' ? replaceNullWithEmptyString(json) : null
+  }
+  catch {
+    return null
+  }
+}
+
+const replaceNullWithEmptyString = (obj: Record<string, unknown>): Record<string, unknown> => {
+  for (const key in obj) {
+    if (obj[key] === null) {
+      obj[key] = ''
+    }
+    else if (typeof obj[key] === 'object' && obj[key] !== null) {
+      obj[key] = replaceNullWithEmptyString(obj[key] as Record<string, unknown>)
+    }
+  }
+  return obj
+}
diff --git a/src/module/test/mocks/collections.ts b/src/module/test/mocks/collection.ts
similarity index 100%
rename from src/module/test/mocks/collections.ts
rename to src/module/test/mocks/collection.ts
diff --git a/src/module/test/utils/collections.test.ts b/src/module/test/utils/collection.test.ts
similarity index 92%
rename from src/module/test/utils/collections.test.ts
rename to src/module/test/utils/collection.test.ts
index 98475ffb..bf4e7974 100644
--- a/src/module/test/utils/collections.test.ts
+++ b/src/module/test/utils/collection.test.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest'
-import { getCollectionByFilePath, generateIdFromFsPath } from '../../src/runtime/utils/collections'
+import { getCollectionByFilePath, generateIdFromFsPath } from '../../src/runtime/utils/collection'
 import type { CollectionInfo, ResolvedCollectionSource } from '@nuxt/content'
-import { collections } from '../mocks/collections'
+import { collections } from '../mocks/collection'
 
 describe('getCollectionByFilePath', () => {
   it('should return landing collection for index.md', () => {
@@ -13,9 +13,12 @@ describe('getCollectionByFilePath', () => {
 
   it('should return docs collection for any non-index file', () => {
     const result = getCollectionByFilePath('1.getting-started/2.introduction.md', collections)
-
     expect(result).toBeDefined()
     expect(result?.name).toBe('docs')
+
+    const result2 = getCollectionByFilePath('.navigation.yml', collections)
+    expect(result2).toBeDefined()
+    expect(result2?.name).toBe('docs')
   })
 
   it('should return docs collection for nested files', () => {
@@ -31,6 +34,7 @@ describe('getCollectionByFilePath', () => {
     expect(result).toBeDefined()
     expect(result?.name).toBe('landing')
   })
+
   it('should return undefined for files not matching any pattern', () => {
     const emptyCollections: Record<string, CollectionInfo> = {}
     const result = getCollectionByFilePath('test.txt', emptyCollections)