---
canonical_url: "https://nuxt.studio"
---
<u-page-hero orientation="horizontal">
<browser-frame>
<video :controls="true" :loop="true" src="https://res.cloudinary.com/nuxt/video/upload/v1767647099/studio/studio-demo_eiofld.mp4" poster="/video-thumbnail.jpg">



</video>
</browser-frame>

<template v-slot:headline="">
<u-button to="https://github.com/nuxt-content/studio" variant="outline" size="sm" target="_blank" trailing-icon="i-lucide-arrow-right" className="mb-3,rounded-full">

Open Source & Self-hosted

</u-button>
</template>

<template v-slot:title="">

Edit your <span className="text-primary">

Nuxt

</span>

 website in production.

</template>

<template v-slot:description="">

Self-hosted CMS for Nuxt Content websites. Edit content visually, manage media, and publish changes directly to Git from your production site.

</template>

<template v-slot:links="">
<u-button to="https://nuxt.studio/introduction" label="Get Started" trailingIcon="i-lucide-arrow-right" size="lg">



</u-button>

<u-input-copy value="npx nuxi module add nuxt-studio">



</u-input-copy>
</template>
</u-page-hero>

<u-container className="pb-12,xl:pb-24">
<u-page-grid>
<u-page-feature icon="i-lucide-pen-tool">
<template unwrap="p" v-slot:title="">

Visual Editor

</template>

<template unwrap="p" v-slot:description="">

Notion-like editing with MDC component support. Insert Vue components and drag-and-drop blocks.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-form-input">
<template unwrap="p" v-slot:title="">

Schema-based Forms

</template>

<template unwrap="p" v-slot:description="">

Auto-generated forms for Frontmatter and YAML/JSON files based on your collection schema.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-image">
<template unwrap="p" v-slot:title="">

Media Library

</template>

<template unwrap="p" v-slot:description="">

Centralized media management. Browse folders, upload files, and insert images directly.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-git-branch">
<template unwrap="p" v-slot:title="">

Git Integration

</template>

<template unwrap="p" v-slot:description="">

Commit changes directly to GitHub or GitLab. Your CI/CD pipeline handles the rest.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-shield-check">
<template unwrap="p" v-slot:title="">

Flexible Auth

</template>

<template unwrap="p" v-slot:description="">

Secure access with GitHub, GitLab, or Google OAuth. Or implement your own auth flow.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-eye">
<template unwrap="p" v-slot:title="">

Real-time Preview

</template>

<template unwrap="p" v-slot:description="">

See changes instantly on your production website. Drafts are stored locally until published.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-languages">
<template unwrap="p" v-slot:title="">

Multi languages

</template>

<template unwrap="p" v-slot:description="">

Full i18n support for the Studio interface. Available in 25+ languages.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-server">
<template unwrap="p" v-slot:title="">

Self-hosted

</template>

<template unwrap="p" v-slot:description="">

Deploy on your own infrastructure with no external dependencies. Free forever under MIT.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-file-code">
<template unwrap="p" v-slot:title="">

Code Editor

</template>

<template unwrap="p" v-slot:description="">

Monaco editor for Markdown, MDC, YAML, and JSON files. Switch between visual and code modes.

</template>
</u-page-feature>
</u-page-grid>
</u-container>

<u-page-section>
<template v-slot:title="">

Everything you need for content editing

</template>

<template v-slot:description="">

Edit **Markdown** with **Vue** components, structure data using **YAML** and **JSON** forms, manage media assets and publish directly to **Git**. All from your live production website.

</template>
</u-page-section>

<u-page-section orientation="horizontal" :reverse="true">
<browser-frame>

![Visual Markdown Editor](https://nuxt.studio/studio/visual-markdown-editor.webp)

</browser-frame>

<template v-slot:title="">

Notion-like <span className="text-primary">

Visual Editor

</span>
</template>

<template v-slot:description="">

A powerful editor built on TipTap that enables natural content creation while automatically generating complete MDC syntax behind the scenes. Integrate interactive components directly within your content.

</template>

<template v-slot:features="">
<u-page-feature icon="i-lucide-puzzle">
<template unwrap="p" v-slot:title="">

Insert Vue components with props and slots

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-move">
<template unwrap="p" v-slot:title="">

Drag and drop content blocks

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-eye">
<template unwrap="p" v-slot:title="">

Real-time preview on your production site

</template>
</u-page-feature>
</template>

<template v-slot:links="">
<u-button to="https://nuxt.studio/content" label="Learn more about the Visual Editor" variant="subtle" color="neutral" trailingIcon="i-lucide-arrow-right" size="lg" target="_blank" icon="i-simple-icons-github">



</u-button>
</template>
</u-page-section>

<u-page-section orientation="horizontal">
<browser-frame>

![Schema-based Forms](https://nuxt.studio/studio/json-yml-forms.webp)

</browser-frame>

<template v-slot:title="">
<span className="text-primary">

Schema-based

</span>

 Forms

</template>

<template v-slot:description="">

Forms are automatically generated from your [Nuxt Content](https://content.nuxt.com) collection schema. Edit frontmatter, YAML, and JSON files with a beautiful form interface.

</template>

<template v-slot:features="">
<u-page-feature icon="i-lucide-layout-grid">
<template unwrap="p" v-slot:title="">

Auto-generated from collection schema

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-file-json">
<template unwrap="p" v-slot:title="">

YAML and JSON support

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-list">
<template unwrap="p" v-slot:title="">

Frontmatter edition

</template>
</u-page-feature>
</template>

<template v-slot:links="">
<u-button to="https://nuxt.studio/content#form-editor" label="Learn more about Forms" variant="subtle" color="neutral" trailingIcon="i-lucide-arrow-right">



</u-button>
</template>
</u-page-section>

<u-page-section orientation="horizontal" :reverse="true">
<browser-frame>

![GitHub Sync](https://nuxt.studio/studio/github-sync.webp)

</browser-frame>

<template v-slot:title="">

Commit to <span className="text-primary">

Git

</span>

 directly

</template>

<template v-slot:description="">

Publish changes directly to GitHub or GitLab from your production site. Your CI/CD pipeline automatically rebuilds and deploys the updated content.

</template>

<template v-slot:features="">
<u-page-feature icon="i-simple-icons-github">
<template unwrap="p" v-slot:title="">

GitHub and GitLab support

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-shield-check">
<template unwrap="p" v-slot:title="">

Flexible OAuth authentication

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-workflow">
<template unwrap="p" v-slot:title="">

Triggers your CI/CD pipeline

</template>
</u-page-feature>
</template>

<template v-slot:links="">
<u-button to="https://nuxt.studio/git-providers" label="Configure Git providers" variant="subtle" color="neutral" trailingIcon="i-lucide-arrow-right">



</u-button>
</template>
</u-page-section>

<u-page-section orientation="horizontal">
<browser-frame>
<video :controls="true" :loop="true" src="https://res.cloudinary.com/nuxt/video/upload/v1770661582/studio/studio-ai_bsmqs6.mp4" :muted="true">



</video>
</browser-frame>

<template v-slot:title="">
<span className="text-primary">

AI Powered

</span>

 content generation

</template>

<template v-slot:description="">

Leverage [Vercel AI Gateway](https://vercel.com/ai-gateway) to automatically generate and refine your content. The system intelligently adapts based on your project context, cursor position, active components, and overall project architecture.

</template>

<template v-slot:features="">
<u-page-feature icon="i-lucide-sparkles">
<template unwrap="p" v-slot:title="">

Built-in features (grammar check, improvements, translation...)

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-brain">
<template unwrap="p" v-slot:title="">

Contextualized autocompletion

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-plug">
<template unwrap="p" v-slot:title="">

One environment variable setup

</template>
</u-page-feature>
</template>

<template v-slot:links="">
<u-button to="https://nuxt.studio/ai" label="Learn more about AI integration" variant="subtle" color="neutral" trailingIcon="i-lucide-arrow-right">



</u-button>
</template>
</u-page-section>

<div className="relative,min-h-[400px]">
<div className="hidden,md:block">
<cta-background>



</cta-background>
</div>

<u-page-section className="relative,z-10">
<template v-slot:title="">

Start editing your Nuxt website today.

</template>

<template v-slot:links="">
<u-button to="https://nuxt.studio/introduction" label="Get Started" trailing-icon="i-lucide-arrow-right">



</u-button>

<u-button to="https://github.com/nuxt-content/studio" variant="outline" color="neutral" target="_blank" icon="i-simple-icons-github">

Star on GitHub

</u-button>
</template>
</u-page-section>
</div>

## Resources for Agents

- [API catalog: every service document this site publishes](https://nuxt.studio/.well-known/api-catalog)
- [Sitemap (XML)](https://nuxt.studio/sitemap.xml)
- [Sitemap (Markdown): every page on the site](https://nuxt.studio/sitemap.md)
- [MCP server card: MCP endpoint at https://nuxt.studio/mcp](https://nuxt.studio/.well-known/mcp/server-card.json)
- [MCP endpoint (streamable HTTP)](https://nuxt.studio/mcp)
- [llms.txt: index of the documentation for LLMs](https://nuxt.studio/llms.txt)
- [llms-full.txt: the full documentation as a single file](https://nuxt.studio/llms-full.txt)
- [OpenAPI document: every route this site serves to agents](https://nuxt.studio/openapi.json)


## Sitemap

See the full [sitemap](https://nuxt.studio/sitemap.md) for all pages.