This repo provides a collection of starter templates for building web applications with Directus integration.
Each template is designed to be:
- Reusable: Modular codebases that can be easily extended.
- Framework-Specific: Tailored implementations for popular frameworks like Next.js, Nuxt, SvelteKit, and Astro.
- Scalable: Suitable for small to medium projects and scalable to larger applications.
A full-featured CMS starter with pages, blog posts, dynamic forms, live preview, and visual editing.
| Framework | Source | Deploy |
|---|---|---|
| Next.js | cms/nextjs |  |
| Nuxt | cms/nuxt | |
| Astro | cms/astro | |
| SvelteKit | cms/sveltekit |
Adapter note: Astro and SvelteKit only support one deployment adapter at a time. Both starters default to Vercel. To deploy to Netlify or another provider, swap the adapter in the config before deploying — see each template's README for instructions.
The same CMS starter with built-in internationalization: locale-based routing, Directus translation integration, and a language switcher.
| Framework | Source | Deploy |
|---|---|---|
| Next.js | cms-i18n/nextjs | |
| Nuxt | cms-i18n/nuxt | |
Each framework requires your Directus URL, a server-side token, and a site URL. The token (DIRECTUS_SERVER_TOKEN)
comes from your Webmaster account and is used server-side for content access, preview, and form submissions. See the
individual template README for full setup details.
NEXT_PUBLIC_DIRECTUS_URL=https://your-project.directus.app
NEXT_PUBLIC_SITE_URL=http://localhost:3000
DIRECTUS_SERVER_TOKEN=your-webmaster-token
NEXT_PUBLIC_ENABLE_VISUAL_EDITING=true
DIRECTUS_URL=https://your-project.directus.app
NUXT_PUBLIC_SITE_URL=http://localhost:3000
DIRECTUS_SERVER_TOKEN=your-webmaster-token
NUXT_PUBLIC_ENABLE_VISUAL_EDITING=true
PUBLIC_DIRECTUS_URL=https://your-project.directus.app
PUBLIC_SITE_URL=http://localhost:3000
DIRECTUS_SERVER_TOKEN=your-webmaster-token
PUBLIC_ENABLE_VISUAL_EDITING=true
PUBLIC_DIRECTUS_URL=https://your-project.directus.app
PUBLIC_SITE_URL=http://localhost:3000
DIRECTUS_SERVER_TOKEN=your-webmaster-token
PUBLIC_ENABLE_VISUAL_EDITING=true
NEXT_PUBLIC_DIRECTUS_URL=https://your-project.directus.app
NEXT_PUBLIC_SITE_URL=http://localhost:3000
DIRECTUS_SERVER_TOKEN=your-webmaster-token
NEXT_PUBLIC_ENABLE_VISUAL_EDITING=true
DIRECTUS_URL=https://your-project.directus.app
NUXT_PUBLIC_SITE_URL=http://localhost:3000
DIRECTUS_SERVER_TOKEN=your-webmaster-token
NUXT_PUBLIC_ENABLE_VISUAL_EDITING=true
Note: A
DIRECTUS_ADMIN_TOKENis also needed locally for type generation (pnpm run generate:types). This is the token from your Admin account and should never be used at runtime or committed to version control.
-
Create a New Project:
- Visit Directus Cloud and create a new project.
- During setup, select the CMS template.
- Once started, it will take around 90 seconds for the Cloud Project to be created.
- You will receive an email with your project URL, email, and password for logging in.
-
Access Your New Project:
- Log in to your project using the URL provided in your email or from the Directus Cloud Dashboard.
-
Create accounts and generate tokens:
- Go to the Users Directory and create a Webmaster user account.
- Scroll down to the Token field, generate a static token, and save it — this is your
DIRECTUS_SERVER_TOKEN. - For local type generation, you can also generate a token on the Admin user — this is your
DIRECTUS_ADMIN_TOKEN(never exposed at runtime). - Do not forget to save the user, or you will encounter an "Invalid token" error.
-
Connect to a Frontend Template:
Use one of the one-click deploy buttons above, or clone the source and follow the setup instructions in the template's README.
Prefer to self-host? You can deploy Directus with the CMS schema pre-loaded directly to Railway.
This sets up a hosted Directus instance with the CMS template already applied. Once deployed:
- Open your Railway project and grab the public URL for your Directus service — this is your
DIRECTUS_URL. - Log in to Directus, go to the Users Directory, and create a Webmaster user.
- Generate a static token for that user — this is your
DIRECTUS_SERVER_TOKEN. - Choose a frontend starter from the table above and follow the setup instructions in its README.
Prefer to run everything locally? You can use Docker and our CLI tool to scaffold and launch a full Directus + frontend setup.
Download and install Docker: https://www.docker.com/products/docker-desktop
Open your terminal and run:
npx directus-template-cli@latest initFollow the prompts to:
- Choose a project name
- Select a backend template
- Select a frontend framework
- Decide whether to install dependencies automatically
This sets up a local project with Docker-based Directus + frontend integration.
- This will start Directus on http://localhost:8055
- On first launch, you'll be prompted to complete the admin setup
- After setup, create a Webmaster user and generate a static token for
DIRECTUS_SERVER_TOKEN - Optionally generate a token on the Admin user for
DIRECTUS_ADMIN_TOKEN(type generation only)
If you encounter CSP errors when using the Visual Editor preview, this is typically due to Content Security Policy restrictions.
For Local Docker Setup: See
cms/directus/README.md for configuration
details.
For Directus Cloud: You'll need to expose your localhost with HTTPS using a tunneling service (ngrok, localtunnel, etc.).
For complete documentation on configuring CSP for the Visual Editor, see the official Directus documentation.
Have a bug report, feature request, or question? Please open an issue rather than submitting a pull request directly.
├── cms/ # CMS starter templates (Next.js, Nuxt, Astro, SvelteKit)
├── cms-i18n/ # CMS starter templates with i18n support (Next.js, Nuxt)
├── blank/ # Blank starter template
├── _shared/ # Shared files (docker-compose, .env.example)
├── _scripts/ # Internal build/validation scripts
└── .github/ # CI workflows
Directories prefixed with _ or . are internal and excluded from the template CLI.
Run node _scripts/validate-templates.js to check all templates have the required structure and metadata.