Awesome Directus

A curated list of awesome things related to Directus

Directus is a real-time API and App dashboard for managing SQL database content.

Contents

• Resources
• Integration
• Extensions
• Articles
• Examples / Showcases

Resources

Offical

• Documentation
• GitHub Repository
• Live Discussions on Discord
• Community Help Board
• Video Tutorials on YouTube
• Community Repositories

Community

• Portuguese YouTube Channel

Integration

• Offical JS SDK - The JS SDK provides an intuitive interface for the Directus API from within a JavaScript-powered project (Browsers and Node.js).
• Offical Gatsby Source Plugin - Source plugin for pulling data into Gatsby from a Directus API.
• react-directus - A set of React components and utilities for Directus Headless CMS.
• Flutter SDK - Flutter SDK to provide interface for Directus API.
• PHP SDK - PHP SDK to provide easy access to the Directus API.
• Lite SDK (TypeScript) - Query builder for the Directus API (Browser, Deno, Node.js). Bring your own fetch.
• Nuxt Directus - First-Class Nuxt 3 Module for connecting with an Directus instance.
• Nuxtus - Provides a Nuxt boilerplate and set of tools to automatically create Nuxt pages from Directus Collections.
• cool-stack - Template repository integrating Directus & Remix into a full-stack monorepo.

Extensions

• Image Scout - Search and select images found on a variety of royalty free image sites (Pexels, Pixabay, Unsplash & Giphy!).
• Editor.js Interface - Block editor (Editor.js) interface for Directus 9.
• Draw Interface - Free draw interface for Directus app.
• User-friendly file paths - Use the folder and file module structure to reference to assets.
• Date Picker Interface - An alternative Date Picker Interface to the original Directus DateTime interface.
• Search Sync - Sync data into a search engine index, supports Algolia, ElasticSearch & MeiliSearch.
• Dictionary - Save key-value pairs as JSON blobs with a progress indicator for completeness.
• WordPress-like Slug - Slug/Permalink interface with support for pre- and suffixes.
• Link Meta - Stores hyperlink metadata into Directus.
• Group Modal - Group interface fields into a modal that can be opened with a button.
• Display Link - Display URLs with an "open in new tab" button.
• SQL Panel - Panel component which shows result of stored SQL query as a table.
• Websocket Subscribe - An extension to subscribe to Directus updates over a websocket.
• SVG Map Picker Interface - Select a value from a SVG Map box.
• Directus Mailer - An endpoint for sending emails with the Directus Nodemailer service.
• Data Grid Interface - A data grid interface width @revolist/vue3-datagrid for Directus 9.
• SparkLine Display - A sparkline display with apexcharts for Directus 9.
• Tags M2M - M2M driven tags interface.
• Sanitize HTML - Sanitize HTML inputs to Directus.
• Directus LogSnag - Sending your events from Directus directly to your phone using LogSnag.
• Field Actions - Adds copy to clipboard and open URL's action-buttons to fields (interface + display).
• Generate Types - Adds a module for generating typescript types for a Directus JS-SDK connected to that Directus database. Also can generate Python or OpenAPI types.
• Computed Interface - Perform computed value based on other fields.
• Inline Form Interface - Edit M2O relations in an inline form contained in the parent record.
• Tab Group Interface - Display groups as tab panels, as a pretty, space saving alternative to the accordion group.
• Woodpecker Build Status - Adds status bar for Woodpecker pipeline build status to Directus UI.
• Imagga Hook - Hook for file uploads to automatically tag images with Imagga API.
• Tiptap Interface & Display - Tiptap rich text editor interface and display.
• API Viewer - View and run API queries directly from a Module.
• Flexible Editor - A Rich Text Editor (WYSIWYG) with JSON output, that allows to integrate M2A relations to make it extremely flexible.
• BlurHash - A Directus extension that generates blurhashes for uploaded images.

Articles

Educational

• Directus Guides (Official)
• Learn Directus
• How to Work With Many to Many Relationships (M2M) On Directus
• Creating a Custom Panel in Directus With Chart.js

Personal

• Get Started With Directus

Examples / Showcases

If you're using Directus in an open source project, you're very welcome to link this project here.

• Official Examples - Integration examples with Directus.
• Nuxt 3 Demo - Opinionated Nuxt 3 / Directus Starter with Tailwind CSS.
• Agency OS - Fully complete, opinionated agency website template featuring Nuxt and Directus. View Demo.
• Nextus - A comprehensive, versatile and modern website template based on Nextjs and Directus technologies. It helps you build various types of websites more quickly. View Demo.

Contributing

Contributions welcome! Read the contribution guidelines first.