{"id":13399823,"url":"https://github.com/directus-labs/examples","last_synced_at":"2025-09-30T10:30:42.045Z","repository":{"id":37175239,"uuid":"417136561","full_name":"directus-labs/examples","owner":"directus-labs","description":"Integration Examples with Directus","archived":true,"fork":false,"pushed_at":"2024-01-18T13:23:49.000Z","size":20978,"stargazers_count":259,"open_issues_count":16,"forks_count":111,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-01-11T23:16:00.514Z","etag":null,"topics":["angular","astro","blitz","blog","directus","eleventy","examples","gatsby","iles","nextjs","nuxt","react","remix","svelte","vue"],"latest_commit_sha":null,"homepage":"https://directus.io/guides","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/directus-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-10-14T13:14:17.000Z","updated_at":"2024-12-23T21:22:33.000Z","dependencies_parsed_at":"2024-01-10T15:18:27.889Z","dependency_job_id":"0f9a9375-3199-473d-8eb0-099e8fdd11fc","html_url":"https://github.com/directus-labs/examples","commit_stats":null,"previous_names":["directus-labs/examples","directus/examples"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/directus-labs%2Fexamples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/directus-labs%2Fexamples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/directus-labs%2Fexamples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/directus-labs%2Fexamples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/directus-labs","download_url":"https://codeload.github.com/directus-labs/examples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234724889,"owners_count":18877279,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","astro","blitz","blog","directus","eleventy","examples","gatsby","iles","nextjs","nuxt","react","remix","svelte","vue"],"created_at":"2024-07-30T19:00:43.492Z","updated_at":"2025-09-30T10:30:35.782Z","avatar_url":"https://github.com/directus-labs.png","language":"CSS","readme":"\u003e [!WARNING]\n\u003e This repository is unmaintained and without support.\n\u003e Please take a look at the [framework guides](https://docs.directus.io/guides/frameworks) in our documentation for step-by-step tutorials on combining Directus and your favorite frameworks.\n\n\u003ch1 align=\"center\"\u003eDirectus Examples\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://directus.io\"\u003e\u003cimg src=\"https://img.shields.io/static/v1?style=flat-square\u0026logo=Directus\u0026logoColor=white\u0026label=Directus\u0026message=directus.io\u0026color=4466ff\" alt=\"Directus Website\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://docs.directus.io\"\u003e\u003cimg src=\"https://img.shields.io/static/v1?style=flat-square\u0026label=Docs\u0026message=docs.directus.io\u0026color=05ba8f\" alt=\"Directus Website\" /\u003e\u003c/a\u003e\n    \u003ca href=\"./LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/static/v1?style=flat-square\u0026label=License\u0026message=MIT\u0026color=62a4e2\" alt=\"License\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://directus.chat\"\u003e\u003cimg src=\"https://img.shields.io/static/v1?style=flat-square\u0026logo=Discord\u0026logoColor=white\u0026label=Discord\u0026message=Join%20us\u0026color=5865f2\" alt=\"Directus Discord Server\" /\u003e\u003c/a\u003e\n \u003c/p\u003e\n\nThese frontend examples showcase how to integrate [Directus JavaScript SDK](https://docs.directus.io/reference/sdk), GraphQL, or official Directus plugins/modules with other frameworks in order to use [Directus](https://github.com/directus/directus) as the data source.\n\n\u003e ℹ 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!\n\n## 📌 Prerequisites\n\nThese examples are frontend only, you will still need a Directus instance running to use them, this can be a [Cloud](https://directus.cloud/) instance, self hosted, or locally by first running the provided [Directus project](./directus) running first before proceeding with examples.\n\n## 🔌 Integrations\n\n|                                                                      Logo                                                                      | Framework                                                |           Blog Example            |\n| :--------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------- | :-------------------------------: |\n|                                              \u003cimg height=\"36\" src=\"./shared/logo/angular.svg\" /\u003e                                               | **[Angular `v13`](https://github.com/angular/angular)**  | [source](/angular) \u003csup\u003e[1]\u003c/sup\u003e |\n|  \u003cimg height=\"32\" src=\"./shared/logo/astro.svg#gh-light-mode-only\" /\u003e\u003cimg height=\"32\" src=\"./shared/logo/astro-dark.svg#gh-dark-mode-only\" /\u003e  | **[Astro `v1.0`](https://github.com/withastro/astro)**   |         [source](/astro)          |\n|                                               \u003cimg height=\"32\" src=\"./shared/logo/blitz.svg\" /\u003e                                                | **[Blitz `v0.45.4`](https://github.com/blitz-js/blitz)** |         [source](/blitz)          |\n|                                              \u003cimg height=\"32\" src=\"./shared/logo/eleventy.svg\" /\u003e                                              | **[Eleventy `v1`](https://github.com/11ty/eleventy)**    |        [source](/eleventy)        |\n|                                               \u003cimg height=\"32\" src=\"./shared/logo/gatsby.svg\" /\u003e                                               | **[Gatsby `v5`](https://github.com/gatsbyjs/gatsby)**    |         [source](/gatsby)         |\n|                                                \u003cimg height=\"34\" src=\"./shared/logo/iles.svg\" /\u003e                                                | **[îles `v0.7`](https://github.com/ElMassimo/iles)**     |          [source](/iles)          |\n| \u003cimg height=\"32\" src=\"./shared/logo/nextjs.svg#gh-light-mode-only\" /\u003e\u003cimg height=\"32\" src=\"./shared/logo/nextjs-dark.svg#gh-dark-mode-only\" /\u003e | **[Next.js `v13`](https://github.com/vercel/next.js)**   |         [source](/nextjs)         |\n|                                              \u003cimg height=\"28\" src=\"./shared/logo/nuxtjs2.svg\" /\u003e                                               | **[Nuxt.js `v2`](https://github.com/nuxt/nuxt.js)**      |         [source](/nuxtjs)         |\n|                                               \u003cimg height=\"36\" src=\"./shared/logo/nuxtjs.svg\" /\u003e                                               | **[Nuxt.js `v3`](https://github.com/nuxt/nuxt.js)**      |         [source](/nuxt3)          |\n|                                               \u003cimg height=\"40\" src=\"./shared/logo/react.svg\" /\u003e                                                | **[React `v17`](https://github.com/facebook/react)**     |  [source](/react) \u003csup\u003e[1]\u003c/sup\u003e  |\n|  \u003cimg height=\"32\" src=\"./shared/logo/remix.svg#gh-light-mode-only\" /\u003e\u003cimg height=\"32\" src=\"./shared/logo/remix-dark.svg#gh-dark-mode-only\" /\u003e  | **[Remix `v1`](https://github.com/remix-run/remix)**     |         [source](/remix)          |\n|                                               \u003cimg height=\"32\" src=\"./shared/logo/svelte.svg\" /\u003e                                               | **[Svelte `v3`](https://github.com/sveltejs/svelte)**    | [source](/svelte) \u003csup\u003e[1]\u003c/sup\u003e  |\n|                                               \u003cimg height=\"32\" src=\"./shared/logo/svelte.svg\" /\u003e                                               | **[SvelteKit `beta`](https://github.com/sveltejs/kit)**  |       [source](/sveltekit)        |\n|                                                \u003cimg height=\"32\" src=\"./shared/logo/vue.svg\" /\u003e                                                 | **[Vue `v3`](https://github.com/vuejs/core)**            |   [source](/vue) \u003csup\u003e[1]\u003c/sup\u003e   |\n\n_[1]: These additionally uses full read permissions on `articles` \u0026 `directus_users` in Public role for simplicity sake._\n\n## 🔗 Links\n\n- ✨ Official Website — [https://directus.io](https://directus.io)\n- 📘 Documentation — [https://docs.directus.io](https://docs.directus.io)\n- 👥 Community — [GitHub discussions](https://github.com/directus/directus/discussions)\n- 🎬 Youtube — [Video tutorials](https://www.youtube.com/c/DirectusVideos)\n- 🐦 Twitter — [@directus](https://twitter.com/directus)\n- 💬 Chat — [Discord server](https://directus.chat)\n","funding_links":[],"categories":["CSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirectus-labs%2Fexamples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdirectus-labs%2Fexamples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirectus-labs%2Fexamples/lists"}