[!WARNING] This repository is unmaintained and without support. Please take a look at the framework guides in our documentation for step-by-step tutorials on combining Directus and your favorite frameworks.

Directus Examples

Directus Website Directus Website License Directus Discord Server

These frontend examples showcase how to integrate Directus JavaScript SDK, GraphQL, or official Directus plugins/modules with other frameworks in order to use Directus as the data source.

โ„น These examples were created for demonstration purposes. They are not intended to be production ready, but PRs that address this and any other issues are always welcome!

๐Ÿ“Œ Prerequisites

These examples are frontend only, you will still need a Directus instance running to use them, this can be a Cloud instance, self hosted, or locally by first running the provided Directus project running first before proceeding with examples.

๐Ÿ”Œ Integrations

Logo Framework Blog Example
Angular v13 source [1]
Astro v1.0 source
Blitz v0.45.4 source
Eleventy v1 source
Gatsby v5 source
รฎles v0.7 source
Next.js v13 source
Nuxt.js v2 source
Nuxt.js v3 source
React v17 source [1]
Remix v1 source
Svelte v3 source [1]
SvelteKit beta source
Vue v3 source [1]

[1]: These additionally uses full read permissions on articles & directus_users in Public role for simplicity sake.

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes