Nuxt Studio

Docd does not ship with Nuxt Studio enabled by default, but it works well with Studio because Docd is built on top of Nuxt Content.

The Nuxt Studio module gives you a browser-based interface for editing your content directly in production, with live preview and structured editing tools for Markdown, frontmatter, and media.

The Studio editor lets you manage content entirely from your browser on your production website. There is no need for local development tools, Git commands, or terminal access. It is especially useful for content teams who want to edit and preview changes in a familiar environment.

Using Studio with Docd

If your Docd site is powered by Nuxt Content, Studio can sit on top of the same content model you are already using.

That means Studio can work with the same:

• Markdown pages in content/
• frontmatter fields used by your collections
• MDC components embedded in page content
• media and file structure already used by the site

Visual edition in production for your Nuxt Content website

Nuxt Studio provides visual editing directly in production for Nuxt Content-powered websites.

Originally offered as a standalone premium platform, Studio is now a free, open-source, and self-hostable Nuxt module. It enables your entire team, developers and non-technical editors alike, to create and update content safely without leaving your live website.

Current features

✨ TipTap Visual Editor

Rich Markdown editor with full MDC component support.

💻 Monaco Code Editor

Advanced code editor for Markdown (MDC), YAML, and JSON files if you want to edit raw code.

📝 Form-based Editor

Edit YAML, JSON, and frontmatter using auto-generated forms based on collection schemas.

🎨 Vue Component Props Editor

Visual interface to edit Vue component props directly from the editor.

🔄 Real-time Preview

Instantly preview content changes on your production website.

🔐 Multi-provider Authentication

Secure OAuth authentication with GitHub, GitLab, and Google.

🔑 Custom Authentication

Utilities to implement custom authentication flows (password, SSO, LDAP, etc.).

📝 File Management

Create, edit, rename, and delete content files in the content/ directory.

🖼 Media Management

Centralized media library with support for JPEG, PNG, GIF, WebP, AVIF, SVG, and more.

🌳 Git Integration

Commit content changes directly from production and rely on your CI/CD pipeline to deploy them.

🚀 Development Mode

Edit content and media files directly from your local filesystem using the Studio interface.

Upcoming features

📂 Collections View

Manage and navigate all content collections from a unified interface.

🖼 Media Optimization

Optimize images and media assets directly within the editor.

🤖 AI Content Assistant

Get smart, AI-powered suggestions to improve and speed up content creation.

💡 Community-driven Features

Have an idea? Share your feedback and help shape the future of Nuxt Studio.