Files
awesome-awesomeness/html/directus.md2.html
2025-07-18 23:13:11 +02:00

287 lines
13 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<p align="center">
<a href="https://directus.io"><img alt="Directus Logo" src="https://user-images.githubusercontent.com/522079/158864859-0fbeae62-9d7a-4619-b35e-f8fa5f68e0c8.png" width="1000px"></a>
</p>
<h1 id="awesome-directus-awesome">Awesome Directus <a
href="https://awesome.re"><img src="https://awesome.re/badge.svg"
alt="Awesome" /></a></h1>
<blockquote>
<p>A curated list of awesome things related to Directus</p>
</blockquote>
<p><a href="https://directus.io">Directus</a> is a real-time API and App
dashboard for managing SQL database content.</p>
<h2 id="contents">Contents</h2>
<ul>
<li><a href="#resources">Resources</a>
<ul>
<li><a href="#official">Official</a></li>
<li><a href="#community">Community</a></li>
</ul></li>
<li><a href="#integration">Integration</a></li>
<li><a href="#extensions">Extensions</a>
<ul>
<li><a href="#extension-scripts">Extension Scripts</a></li>
<li><a href="#tools">Tools</a></li>
</ul></li>
<li><a href="#articles">Articles</a>
<ul>
<li><a href="#educational">Educational</a></li>
<li><a href="#personal">Personal</a></li>
</ul></li>
<li><a href="#examples--showcases">Examples / Showcases</a></li>
</ul>
<h2 id="resources">Resources</h2>
<h3 id="official">Official</h3>
<ul>
<li><a
href="https://docs.directus.io/getting-started/introduction/">Documentation</a></li>
<li><a href="https://github.com/directus/directus">GitHub
Repository</a></li>
<li><a href="https://directus.chat">Live Discussions on Discord</a></li>
<li><a
href="https://github.com/directus/directus/discussions/categories/q-a">Community
Help Board</a></li>
<li><a href="https://www.youtube.com/c/DirectusVideos/featured">Video
Tutorials on YouTube</a></li>
<li><a href="https://github.com/directus-community">Community
Repositories</a></li>
</ul>
<h3 id="community">Community</h3>
<ul>
<li><a href="https://directusextensions.com">Directus Extensions</a> - A
searchable index of Directus extensions, themes, OSes, and more.</li>
<li><a href="https://www.youtube.com/c/DirectusBR">Portuguese YouTube
Channel</a></li>
</ul>
<h2 id="integration">Integration</h2>
<ul>
<li><a href="https://www.npmjs.com/package/@directus/sdk">Official JS
SDK</a> - The JS SDK provides an intuitive interface for the Directus
API from within a JavaScript-powered project (Browsers and
Node.js).</li>
<li><a
href="https://www.npmjs.com/package/@directus/gatsby-source-directus">Official
Gatsby Source Plugin</a> - Source plugin for pulling data into Gatsby
from a Directus API.</li>
<li><a href="https://github.com/gremo/react-directus">react-directus</a>
- A set of React components and utilities for Directus Headless
CMS.</li>
<li><a href="https://pub.dev/packages/directus">Flutter SDK</a> -
Flutter SDK to provide interface for Directus API.</li>
<li><a href="https://github.com/alantiller/directus-php-sdk">PHP SDK</a>
- PHP SDK to provide easy access to the Directus API.</li>
<li><a href="https://github.com/jacoborus/directus-lite-sdk">Lite SDK
(TypeScript)</a> - Query builder for the Directus API (Browser, Deno,
Node.js). Bring your own fetch.</li>
<li><a href="https://github.com/directus-community/nuxt-directus">Nuxt
Directus</a> - First-Class Nuxt 3 Module for connecting with an Directus
instance.</li>
<li><a href="https://nuxtus.com">Nuxtus</a> - Provides a Nuxt
boilerplate and set of tools to automatically create Nuxt pages from
Directus Collections.</li>
<li><a href="https://github.com/tdsoftpl/cool-stack">cool-stack</a> -
Template repository integrating Directus &amp; Remix into a full-stack
monorepo.</li>
</ul>
<h2 id="extensions">Extensions</h2>
<ul>
<li><a
href="https://github.com/resauce-dev/directus-image-scout?ref=awesome-directus">Image
Scout</a> - Search and select images found on a variety of royalty free
image sites (Pexels, Pixabay, Unsplash &amp; Giphy!).</li>
<li><a
href="https://github.com/dimitrov-adrian/directus-extension-editorjs-interface">Editor.js
Interface</a> - Block editor (Editor.js) interface for Directus 9.</li>
<li><a href="https://github.com/jesusgp22/directus-draw-interface">Draw
Interface</a> - Free draw interface for Directus app.</li>
<li><a
href="https://gist.github.com/ToJans/fa18e2a7363edd24be6ad8dda2dd0232">User-friendly
file paths</a> - Use the folder and file module structure to reference
to assets.</li>
<li><a
href="https://github.com/u12206050/directus-9-date-picker-interface">Date
Picker Interface</a> - An alternative Date Picker Interface to the
original Directus DateTime interface.</li>
<li><a
href="https://github.com/dimitrov-adrian/directus-extension-searchsync">Search
Sync</a> - Sync data into a search engine index, supports Algolia,
ElasticSearch &amp; MeiliSearch.</li>
<li><a
href="https://github.com/georgexchelebiev/directus-dictionary">Dictionary</a>
- Save key-value pairs as JSON blobs with a progress indicator for
completeness.</li>
<li><a
href="https://github.com/dimitrov-adrian/directus-extension-wpslug-interface">WordPress-like
Slug</a> - Slug/Permalink interface with support for pre- and
suffixes.</li>
<li><a
href="https://github.com/dimitrov-adrian/directus-extension-linkmeta">Link
Meta</a> - Stores hyperlink metadata into Directus.</li>
<li><a
href="https://github.com/dimitrov-adrian/directus-extension-group-modal-interface">Group
Modal</a> - Group interface fields into a modal that can be opened with
a button.</li>
<li><a
href="https://github.com/jacoborus/directus-extension-display-link">Display
Link</a> - Display URLs with an “open in new tab” button.</li>
<li><a href="https://github.com/harish2704/directus-sql-panel">SQL
Panel</a> - Panel component which shows result of stored SQL query as a
table.</li>
<li><a
href="https://github.com/dimitrov-adrian/directus-extension-svgmap-picker-interface">SVG
Map Picker Interface</a> - Select a value from a SVG Map box.</li>
<li><a href="https://github.com/ryntab/Directus-Mailer">Directus
Mailer</a> - An endpoint for sending emails with the Directus Nodemailer
service.</li>
<li><a
href="https://github.com/seymoe/directus-extension-vgrid-interface">Data
Grid Interface</a> - A data grid interface width
<code>@revolist/vue3-datagrid</code> for Directus 9.</li>
<li><a
href="https://github.com/seymoe/directus-extension-sparkline-display">SparkLine
Display</a> - A sparkline display with <code>apexcharts</code> for
Directus 9.</li>
<li><a
href="https://github.com/dimitrov-adrian/directus-extension-tags-m2m-interface">Tags
M2M</a> - M2M driven tags interface.</li>
<li><a
href="https://github.com/licitdev/directus-extension-sanitize-html">Sanitize
HTML</a> - Sanitize HTML inputs to Directus.</li>
<li><a href="https://github.com/Intevel/directus-logsnag">Directus
LogSnag</a> - Sending your events from Directus directly to your phone
using LogSnag.</li>
<li><a
href="https://github.com/utomic-media/directus-extension-field-actions">Field
Actions</a> - Adds copy to clipboard and open URLs action-buttons to
fields (interface + display).</li>
<li><a
href="https://github.com/maltejur/directus-extension-generate-types">Generate
Types</a> - Adds a module for generating typescript types for a Directus
JS-SDK connected to that Directus database. Also can generate Python or
OpenAPI types.</li>
<li><a
href="https://github.com/rezo-labs/directus-extension-computed-interface">Computed
Interface</a> - Perform computed value based on other fields.</li>
<li><a
href="https://github.com/hanneskuettner/directus-extension-inline-form-interface">Inline
Form Interface</a> - Edit M2O relations in an inline form contained in
the parent record.</li>
<li><a
href="https://github.com/hanneskuettner/directus-extension-group-tabs-interface">Tab
Group Interface</a> - Display groups as tab panels, as a pretty, space
saving alternative to the accordion group.</li>
<li><a
href="https://github.com/sguter90/directus-extension-woodpecker-build-status">Woodpecker
Build Status</a> - Adds status bar for <a
href="https://woodpecker-ci.org/">Woodpecker</a> pipeline build status
to Directus UI.</li>
<li><a href="https://github.com/gbicou/directus-extension-imagga">Imagga
Hook</a> - Hook for file uploads to automatically tag images with <a
href="https://imagga.com/">Imagga API</a>.</li>
<li><a href="https://github.com/gbicou/directus-extension-tiptap">Tiptap
Interface &amp; Display</a> - Tiptap rich text editor interface and
display.</li>
<li><a
href="https://github.com/u12206050/directus-extension-api-viewer-module">API
Viewer</a> - View and run API queries directly from a Module.</li>
<li><a
href="https://github.com/formfcw/directus-extension-flexible-editor">Flexible
Editor</a> - A Rich Text Editor (WYSIWYG) with JSON output, that allows
to integrate M2A relations to make it extremely flexible.</li>
<li><a
href="https://github.com/pixielabs/directus-extension-blurhash/">BlurHash</a>
- A Directus extension that generates blurhashes for uploaded
images.</li>
<li><a
href="https://github.com/Arood/directus-extension-media-ai-bundle">Media
AI Bundle</a> - Two operations to perform image description and
OCR.</li>
<li><a
href="https://github.com/programmarchy/directus-extension-copilot/">Directus
Copilot</a> - A bundle including a panel to ask data-aware questions in
a chat interface.</li>
<li><a
href="https://github.com/timio23/directus-operation-auto-translate/">OpenAI
Automatic Translation</a> - An operaiton to automatically translate new
items via OpenAI.</li>
<li><a
href="https://github.com/karamokoisrael/directus-hackathon-submission/">Machine
Learning Operations</a> - A set of extensions to train, test and use
machine learning models.</li>
<li><a
href="https://github.com/formfcw/directus-extension-tab-group">Tab
Group</a> - A group interface with a tab menu for toggling the
visibility of fields within the group.</li>
<li><a
href="https://github.com/formfcw/directus-extension-drawer-notice">Drawer
Notice</a> - A notice field that is only visible in the drawer.</li>
<li><a
href="https://github.com/formfcw/directus-extension-classified-group">Classified
Group</a> - A group to which a class can be assigned for custom
styling.</li>
<li><a
href="https://github.com/formfcw/directus-extension-tokenized-preview">Tokenized
Preview</a> - An endpoint that adds an active auth token to your preview
URL.</li>
<li><a
href="https://github.com/egidiusmengelberg/directus-extension-umami">Umami
Analytics</a> - Add Umami analytics to Directus.</li>
<li><a
href="https://github.com/utomic-media/directus-extension-auto-generate-file-transformations">Auto
generate file transformations</a> - Automatically generate selected file
transformations on upload</li>
</ul>
<h3 id="extension-scripts">Extension Scripts</h3>
<ul>
<li><a href="https://github.com/formfcw/directus-hook-library">Directus
Hook Library</a> - A collection of customizable hooks for Directus.</li>
</ul>
<h3 id="tools">Tools</h3>
<ul>
<li><a href="https://github.com/tractr/directus-sync">Directus Sync</a>
- A CLI tool for synchronizing the schema and configuration of Directus
across various environments.</li>
</ul>
<h2 id="articles">Articles</h2>
<h3 id="educational">Educational</h3>
<ul>
<li><a href="https://directus.io/guides/">Directus Guides
(Official)</a></li>
<li><a href="https://learndirectus.com/">Learn Directus</a></li>
<li><a
href="https://medium.com/@bianperotti/how-i-made-a-many-to-many-relationship-on-directus-b158ff55de7e">How
to Work With Many to Many Relationships (M2M) On Directus</a></li>
<li><a
href="https://blog.eperedo.com/2023/02/14/custom-panel-directus-chart-js">Creating
a Custom Panel in Directus With Chart.js</a></li>
</ul>
<h3 id="personal">Personal</h3>
<ul>
<li><a
href="https://medium.com/7span/no-code-backend-get-started-with-directus-7876bffdbd1d">Get
Started With Directus</a></li>
</ul>
<h2 id="examples-showcases">Examples / Showcases</h2>
<p>If youre using Directus in an open source project, youre very
welcome to link this project here.</p>
<ul>
<li><a href="https://github.com/directus/examples">Official Examples</a>
- Integration examples with Directus.</li>
<li><a
href="https://github.com/bryantgillespie/nuxt3-directus-starter">Nuxt 3
Demo</a> - Opinionated Nuxt 3 / Directus Starter with Tailwind CSS.</li>
<li><a href="https://github.com/directus-community/agency-os">Agency
OS</a> - Fully complete, opinionated agency website template featuring
Nuxt and Directus. View <a
href="https://www.agencyos.dev/">Demo</a>.</li>
<li><a href="https://github.com/luochuanyuewu/nextus">Nextus</a> - A
comprehensive, versatile and modern website template based on Nextjs and
Directus technologies. It helps you build various types of websites more
quickly. View <a href="https://nextus.vercel.app/en">Demo</a>.</li>
</ul>
<h2 id="contributing">Contributing</h2>
<p>Contributions welcome! Read the <a
href="contributing.md">contribution guidelines</a> first.</p>
<p><a
href="https://github.com/directus-community/awesome-directus">directus.md
Github</a></p>