https://github.com/nuxt-content/nuxt-studio
Edit your Markdown website, in production.
https://github.com/nuxt-content/nuxt-studio
nuxt nuxt-cms nuxt-content nuxt-studio
Last synced: 4 months ago
JSON representation
Edit your Markdown website, in production.
- Host: GitHub
- URL: https://github.com/nuxt-content/nuxt-studio
- Owner: nuxt-content
- License: mit
- Created: 2025-08-26T18:44:56.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2026-03-17T17:53:45.000Z (4 months ago)
- Last Synced: 2026-03-18T07:17:17.785Z (4 months ago)
- Topics: nuxt, nuxt-cms, nuxt-content, nuxt-studio
- Language: TypeScript
- Homepage: https://nuxt.studio
- Size: 8.78 MB
- Stars: 646
- Watchers: 5
- Forks: 100
- Open Issues: 83
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: license.md
Awesome Lists containing this project
README
# Nuxt Studio
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
Visual edition in production for your [Nuxt Content](https://content.nuxt.com) website.
Originally offered as a standalone premium platform, Studio has evolved into a free, open-source, and self-hostable Nuxt module. Enable your entire team to edit website content right in production.
https://github.com/user-attachments/assets/39bf4250-e72b-45aa-bf6d-9441a38cb2d5
**Current Features**
- 💻 **Monaco Code Editor** - Code editor for enhanced Markdown with MDC syntax, YAML, and JSON
- ✨ **TipTap Visual Editor** - Markdown editor with MDC component support (default mode)
- 📝 **Form-based Editor** - Edit YAML/JSON files and frontmatter with auto-generated forms based on collection schemas
- 🎨 **Vue Component Props Editor** - Visual interface for editing Vue component props directly in the editor
- 🧠 **AI-powered content suggestions** - Plug and play DX with the Vercel AI Gateway, let AI help you shape your content.
- 🔄 **Real-time Preview** - See your changes instantly on your production website
- 🔐 **Multi-provider Authentication** - Secure OAuth-based login with GitHub, GitLab, and Google
- 🔑 **Custom Authentication** - Utilities for implementing your own auth flow (password, SSO, LDAP)
- 📝 **File Management** - Create, edit, delete, and rename content files (`content/` directory)
- 🖼️ **Media Management** - Centralized media library with support for JPEG, PNG, GIF, WebP, AVIF, SVG, and more
- 🌳 **Git Integration** - Commit changes directly from your production website and just wait your CI/CD pipeline to deploy your changes
- 🚀 **Development Mode** - Directly edit your content files and media files in your local filesystem using the module interface
- 🌍 **25 Languages** - Full i18n support (AR, BG, BN, CS, DE, EN, ES, FA, FI, FR, ID, IT, JA, KO, NB-NO, NL, NN-NO, PL, PT-BR, RU, TH, UA, ZH, ZH-TW)
**Future Features:**
- 📂 **Collections view** - View and manage your content collections in a unified interface
- 🖼️ **Media optimization** - Optimize your media files in the editor
- 🤖 **AI Content Assistant** — Receive smart, AI-powered suggestions to enhance your content creation flow
- 💡 **Community-driven Features** — Have an idea? [Share your suggestions](https://github.com/nuxt-content/nuxt-studio/discussions) to shape the future of Nuxt Studio
### Resources
- [📖 Documentation](https://nuxt.studio/)
- [🎮 Live Demo](https://docus.dev/admin)
## Quick Setup
### 1. Install
Install the module in your Nuxt application:
```bash
npx nuxi module add nuxt-studio
```
### 2. Dev Mode
🚀 **That's all you need to enable Studio locally!**
Run your Nuxt app and you will see a floating button on bottom left for editing your content. Any file changes will be synchronized in real time with the file system.
> **Note**: The publish system is only available in production mode. Use your classical workflow (IDE, CLI, GitHub Desktop...) to publish your changes locally.
### 3. Configure Production
Add it to your `nuxt.config.ts` and configure your repository:
```ts
export default defineNuxtConfig({
modules: [
'@nuxt/content',
'nuxt-studio'
],
studio: {
// Studio admin route (default: '/_studio')
route: '/_studio',
// Git repository configuration (owner and repo are required)
repository: {
provider: 'github', // 'github' or 'gitlab'
owner: 'your-username', // your GitHub/GitLab username or organization
repo: 'your-repo', // your repository name
branch: 'main', // the branch to commit to (default: main)
}
}
})
```
### 4. Production Mode
To enable publishing directly from your production website, you need to configure:
#### Git Provider
Configure where your content is stored (GitHub or GitLab repository). See the [repository configuration](#configuration-options) above.
> [📖 Git Providers Documentation](https://nuxt.studio/git-providers)
#### Auth Provider
Configure how users authenticate to access Studio. Choose from GitHub, GitLab, Google OAuth, or custom authentication.
```bash
# Example with GitHub OAuth
STUDIO_GITHUB_CLIENT_ID=
STUDIO_GITHUB_CLIENT_SECRET=
```
> [📖 Auth Providers Documentation](https://nuxt.studio/auth-providers)
#### Deployment
Nuxt Studio requires server-side routes for authentication. Your site must be **deployed on a platform that supports SSR** using `nuxt build`.
#### Open Studio
Once deployed, navigate to your configured route (default: `/_studio`) and authenticate to start editing.
## Configuration Options
```ts
export default defineNuxtConfig({
studio: {
// Studio admin login route
route: '/_studio', // default
// Git repository configuration
repository: {
provider: 'github', // 'github' or 'gitlab' (default: 'github')
owner: 'your-username', // your GitHub/GitLab owner (required)
repo: 'your-repo', // your repository name (required)
branch: 'main', // branch to commit to (default: 'main')
rootDir: '', // subdirectory for monorepos (default: '')
private: true, // request access to private repos (default: true)
},
}
})
```
## Contributing
You can start contributing by cloning the repository and using the playground in dev mode (set `dev` option to `true`).
> If you want to contribute with production mode you must create a local GitHub OAuth App (pointing to `http://localhost:3000` as callback URL).
### Development Setup
```bash
# Install dependencies
pnpm install
# Generate type stubs
pnpm dev:prepare
# Build the app and service worker
pnpm prepack
# Terminal 1: Start the playground
pnpm dev
# Terminal 2: Start the app dev server
pnpm dev:app
# Login at http://localhost:3000/admin
```
### Project Structure
```text
studio/
├── src/
│ ├── app/ # Studio editor Vue app
│ └── module/ # Nuxt module
├── playground/ # Development playground
│ ├── docus/ # Docus example
│ └── minimal/ # Minimal example
```
### Testing
You can run a global command to test all needed check at once.
```bash
# Global verify running all needed commands
pnpm verify
```
Or run them one by one.
```bash
# Run tests
pnpm test
# Run type checking
pnpm typecheck
# Run linter
pnpm lint
```
## Roadmap
### ✅ Phase 1 (Completed)
- [x] Monaco code editor
- [x] TipTap visual editor with MDC support (default mode)
- [x] Editor mode switching (code ↔ visual/form)
- [x] Form-based editor for YAML/JSON and frontmatter (schema-based)
- [x] File operations (create, edit, delete, rename)
- [x] Media management with visual picker
- [x] Enhanced component slot editing
- [x] GitHub authentication
- [x] GitLab provider support
- [x] Google OAuth authentication
- [x] Development mode
- [x] Git integration
- [x] Real-time preview
- [x] Internationalization (25 languages)
- [x] Custom authentication utilities
- [x] Vue Component props editor (visual interface)
- [x] Span-style text formatting with toolbar button
- [x] Binding extension for component prop editing
### 🔮 Future
- [ ] Advanced conflict resolution
- [ ] Pull request generation (from a branch to the main one)
- [x] AI-powered content suggestions
- [ ] Media optimization
## Links
- 📖 [Documentation](https://content.nuxt.com/studio)
- 🐛 [Report a Bug](https://github.com/nuxt-content/nuxt-studio/issues/new)
- 💡 [Feature Request](https://github.com/nuxt-content/nuxt-studio/issues/new)
- 🗨️ [Discussions](https://github.com/nuxt-content/nuxt-studio/discussions)
- 🆇 [Twitter](https://x.com/nuxtstudio)
- 🦋 [Bluesky](https://bsky.app/profile/nuxt.com)
## License
Published under the [MIT](LICENSE) license.
[npm-version-src]: https://img.shields.io/npm/v/nuxt-studio?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/nuxt-studio
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-studio.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npm.chart.dev/nuxt-studio
[license-src]: https://img.shields.io/npm/l/nuxt-studio.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/nuxt-studio