---
canonical_url: "https://docus.dev/en"
---
<u-page-hero>
<template v-slot:title="">

Write beautiful docs with Markdown.

</template>

<template v-slot:description="">

Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box. <br />

 Docus brings the best of the Nuxt ecosystem.

</template>

<template v-slot:links="">
<u-button size="xl" to="https://docus.dev/en/getting-started/installation" color="neutral" trailing-icon="i-lucide-arrow-right">

Get started

</u-button>

<u-button size="xl" to="https://github.com/nuxt-content/docus" color="neutral" variant="outline" icon="simple-icons-github">

Star on GitHub

</u-button>
</template>

<template v-slot:headline="">
<u-button size="sm" to="https://github.com/nuxt-content/docus/releases/tag/v5.0.0" variant="outline">

Docus v5 →

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

<u-page-section>
<u-page-grid>
<u-page-card :spotlight="true" className="group,col-span-2,lg:col-span-1" target="_blank" to="https://nuxt.com">
<floating-nuxt>



</floating-nuxt>

<template v-slot:title="">

Built with [Nuxt](https://nuxt.com)

</template>

<template v-slot:description="">

Optimized by the most famous Vue framework. Docus gives you everything you need to build fast, performant, and SEO-friendly websites.

</template>
</u-page-card>

<u-page-card :spotlight="true" className="col-span-2" target="_blank" to="https://ui.nuxt.com">
<u-color-mode-image alt="Beautiful visual powered by UI" className="w-full,h-80,object-cover,rounded-lg" dark="/landing/dark/templates-ui-pro.webp" light="/landing/light/templates-ui-pro.webp" :height="320" :width="859">



</u-color-mode-image>

<template v-slot:title="">

Powered by [Nuxt UI](https://ui.nuxt.com)

</template>

<template v-slot:description="">

Beautiful out of the box, minimal by design but highly customizable. Docus leverages Nuxt UI to give you the best docs writing experience with zero boilerplate, just focus on your content.

</template>
</u-page-card>

<u-page-card :spotlight="true" className="col-span-2" target="_blank">
<tabs>
<tabs-item className="mt-5" icon="i-lucide-eye" label="Preview">
<div className="flex,flex-col,gap-4">
<note className="my-0">

Here's some additional information for you.

</note>

<tip className="my-0">

Here's a helpful suggestion.

</tip>

<warning className="my-0">

Be careful with this action as it might have unexpected results.

</warning>

<caution className="my-0">

This action cannot be undone.

</caution>
</div>
</tabs-item>

<tabs-item className="mt-5,mb-2,text-xs,overflow-x-auto" icon="i-lucide-code" label="Code">

```mdc
::note
Here's some additional information.
::

::tip
Here's a helpful suggestion.
::

::warning
Be careful with this action as it might have unexpected results.
::

::caution
This action cannot be undone.
::
```

</tabs-item>
</tabs>

<template v-slot:title="">

Enhanced Markdown syntax by [Nuxt Content](https://content.nuxt.com)

</template>

<template v-slot:description="">

The only thing you need to take care about is writing your content. Write your pages in Markdown and extend with MDC syntax to embed Nuxt UI or custom Vue components. Structure, routing, and rendering are handled for you.

</template>
</u-page-card>

<u-page-card :spotlight="true" className="col-span-2,md:col-span-1">
<assistant-demo>



</assistant-demo>

<template v-slot:title="">

Built-in <span className="text-primary">

Assistant

</span>
</template>

<template v-slot:description="">

Let visitors ask questions about your documentation in natural language. The assistant searches your content and provides accurate answers with source citations.

</template>
</u-page-card>

<u-page-card :spotlight="true" className="col-span-2,md:col-span-1,min-h-[450px]" target="_blank">
<color-mode-switch>



</color-mode-switch>

<template v-slot:title="">

[Nuxt Color](https://color-mode.nuxtjs.org/) mode

</template>

<template v-slot:description="">

Built-in dark mode provided, no configuration required.

</template>
</u-page-card>

<u-page-card :spotlight="true" className="col-span-2" target="_blank">
<u-color-mode-image alt="Built-in navigation and full-text search" className="rounded-lg" dark="/landing/dark/command-menu.png" light="/landing/light/command-menu.png" :height="554" :width="859" format="webp" loading="lazy">



</u-color-mode-image>

<template v-slot:title="">

Built-in navigation and <span className="text-primary">

full-text search

</span>
</template>

<template v-slot:description="">

Only focus on ordering your content, Docus handles the search modal and auto-generates the side navigation for you.

</template>
</u-page-card>

<u-page-card :spotlight="true" className="col-span-2" target="_blank">
<browser-frame>
<video :controls="true" :loop="true" :playsinline="true" className="rounded-md" src="https://res.cloudinary.com/nuxt/video/upload/v1767647099/studio/studio-demo_eiofld.mp4">



</video>
</browser-frame>

<template v-slot:title="">

Edit your content in production with [Nuxt Studio](https://nuxt.studio)

</template>

<template v-slot:description="">

Write and manage your content visually, with zero Markdown knowledge required. Let your non technical colleagues collaborate on the documentation and integrate Vue components without code skills.

</template>
</u-page-card>

<u-page-card :spotlight="true" className="col-span-2,lg:col-span-1" target="_blank" to="https://image.nuxt.com/">
<div className="flex-1,flex,items-center,justify-center">
<u-color-mode-image alt="Nuxt Image visual" className="w-[30%],lg:w-[70%],my-12,lg:my-0" dark="/landing/dark/nuxt-image.svg" light="/landing/light/nuxt-image.svg">



</u-color-mode-image>
</div>

<template v-slot:title="">

[Nuxt Image](https://image.nuxt.com) optimization

</template>

<template v-slot:description="">

Docus automatically converts Markdown images to use `<NuxtImg>` .

</template>
</u-page-card>

<u-page-card :spotlight="true" className="col-span-2,lg:col-span-1" target="_blank" to="https://docus.dev/en/concepts/internationalization">
<u-color-mode-image alt="Internationalization illustration" className="w-full,my-12,lg:my-0" dark="/landing/dark/i18n.svg" light="/landing/light/i18n.svg" :height="195" :width="403">



</u-color-mode-image>

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

Internationalization

</span>

 support

</template>

<template v-slot:description="">

Built-in i18n support with automatic routing and content management. Create multi-language documentation effortlessly.

</template>
</u-page-card>

<u-page-card :spotlight="true" className="col-span-2" target="_blank" to="https://docus.dev/en/ai/mcp">
<u-color-mode-image alt="Native MCP server and AI-ready content illustration" className="w-full,h-auto,rounded-lg,translate-y-10" dark="/landing/dark/mcp.svg" light="/landing/light/mcp.svg" :height="400" :width="859">



</u-color-mode-image>

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

AI-Ready

</span>

 with native MCP

</template>

<template v-slot:description="">

Built-in Model Context Protocol server connects your documentation to AI tools like Cursor, VS Code, and Claude. Automatic generation of `llms.txt` and `llms-full.txt` files for seamless LLM integration.

</template>
</u-page-card>

<u-page-card :spotlight="true" className="col-span-2" target="_blank">

```ts [app.config.ts]
export default defineAppConfig({
        ui: {
          colors: {
            primary: 'green',
            secondary: 'sky',
          },
        },
        socials: {
          x: 'https://x.com/nuxt_js',
          nuxt: 'https://nuxt.com'
        }
})
```

<template v-slot:title="">

Customize with [Nuxt App Config](https://nuxt.com/docs/4.x/getting-started/configuration#app-configuration)

</template>

<template v-slot:description="">

Update colors, social links, header logos and component styles globally using the `app.config.ts`, no direct code modifications required.

</template>
</u-page-card>

<u-page-card :spotlight="true" className="col-span-2,lg:col-span-1">
<div className="flex-1,flex,flex-col,items-center,justify-center,py-8,text-center">
<div className="flex,flex-col,gap-3,w-full,max-w-xs">
<u-button size="lg" to="https://docus.dev/en/getting-started/introduction" color="primary" :block="true" trailing-icon="i-lucide-arrow-right">

Read Documentation

</u-button>

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

View on GitHub

</u-button>
</div>
</div>

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

Ready

</span>

 to start?

</template>

<template v-slot:description="">

Explore all the features that make Docus the perfect documentation solution.

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

## Resources for Agents

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


## Sitemap

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