Tutorials

This is a collection of step-by-step guides and practical examples to help you get the most out of our platform. Whether you're a beginner or an experienced user, our tutorials are designed to provide you with the knowledge and skills you need to succeed.

Getting Started

Create Reusable Blocks with Many-to-Any Relationships

Learn how to data model for multiple, repeating sections of content.

Fetch Data from Directus in Android with Kotlin

Learn how to integrate Directus in your Android app with Kotlin.

Fetch Data from Directus in iOS with Swift

Learn how to integrate Directus in your iOS app with Swift.

Fetch Data from Directus with Angular

Learn how to integrate Directus in your Angular web application.

Fetch Data from Directus with Astro

Learn how to integrate Directus in your Astro web application.

Fetch Data from Directus with Django

Learn how to integrate Directus in your Django web application.

Fetch Data from Directus with Eleventy 3

Learn how to integrate Directus in your 11ty web application.

Fetch Data from Directus with Flask

Learn how to integrate Directus in your Flask web application.

Fetch Data from Directus with Flutter

Learn how to integrate Directus in your Flutter app with Dart.

Fetch Data from Directus with Laravel

Learn how to integrate Directus in your Laravel web application.

Fetch Data from Directus with Next.js

Learn how to integrate Directus in your Next.js web application.

Fetch Data from Directus with Nuxt

Learn how to integrate Directus in your Nuxt web application.

Fetch Data from Directus with SolidStart

Learn how to integrate Directus in your SolidStart web application.

Fetch Data from Directus with Spring Boot

Learn how to integrate Directus in your Spring Boot web application.

Fetch Data from Directus with SvelteKit

Learn how to integrate Directus in your SvelteKit web application.

Implement Directus Auth with iOS

Learn how to register, login, and protect content in your iOS app.

Implement Directus Auth with Next.js

Learn how to register, login, and protect content in your Next.js application.

Implement Directus Auth with SvelteKit

Learn how to register, login, and protect content in your SvelteKit app.

Implement Multilingual Content with Directus and SvelteKit

Learn how to handle internationalization in your SvelteKit application.

Set Up Live Preview with Next.js

Learn how to confgure Live Preview with Next.js' draft mode.

Set Up Live Preview with Nuxt

Learn how to create a Nuxt preview plugin to configure Live Preview.
See all Getting Started tutorials

Projects

Build a Multi-User Chat with JavaScript and Directus Realtime

Learn how to send and receive data over a realtime connection with JavaScript.

Build a Multi-User Chat with React and Directus Realtime

Learn how to send and receive data over a realtime connection in React applications.

Build a Multi-User Chat with Vue.js and Directus Realtime

Learn how to send and receive data over a realtime connection in a Vue.js application.

Build a Notebook Chrome Extension with Directus Auth

Learn to build and integrate a Chrome Extension with Directus Auth.

Build a Testimonial Widget with SvelteKit and Directus

Learn how to set up a testimonial widget using SvelteKit and Directus.

Build a User Feedback Widget with Vue.js

Learn how we built our docs feedback widget with Directus.

Build a Video Streaming App with SvelteKit and Directus

Learn how to store and retrieve video metadata, and then build a streaming application.

Build an Ecommerce Platform with Next.js, Stripe, and Directus Automate

Learn to integrate Stripe with Directus Automate to build an e-commerce website.

Build an Hotel Booking Platform with Next.js, Stripe, and Directus Automate

Learn to build a hotel booking site with dynamic availability and payments via Stripe.

Build Directus Garden - A Passive Collaborative Event Booth Demo

Learn how we built our engagement platform for live in-person events with P5.js.

Build the Leap Week Registration and Referral System

Learn how we built our referral-based ticketing and raffle system with AI-generated rabbitars.

Building AIVenture - An AI-Powered Game with Directus

Learn the advanced techniques used with Directus Automate to build a game.

How I Built an AI Open Source Santa Roast App with Directus and Nuxt

Bryant breaks down how he built an AI-powered app that roasts developers based on their GitHub contributions.

Integrate Directus with ESP32 Hardware Sensors

Learn how to integrate Directus with IoT systems by reading and publishing sensor data.

Use Directus as a Baby Health Tracker with Owlet and OpsGenie

Learn how to integrate Directus with hardware sensors and incident repsonse systems.
See all Projects tutorials

Tips & Tricks

Advanced Types with the Directus SDK

Learn how to more-easily work with types and the Directus SDK.

Build a Monitoring Pipeline For Flows And Extensions

Learn how to set up complex pipelines to monitor automations and extensions.

Implement Pagination and Infinite Scrolling in Next.js

Learn various techniques to load paginated data in your Next.js application.

Importing Files in Directus Automate

Learn how to use the Request URL operation to import files in Directus Automate.

Preview Files in Live Preview with Google Docs Previews

Learn how to use Google Gview to preview many file formats in Directus Editor.

Search Engine Optimization Best Practices

Learn some best practices for enabling SEO in your projects using Directus.
See all Tips & Tricks tutorials

Migration

Migrate from Notion to Directus

Learn how to migrate data from Notion databases to Directus.

Migrate from Nuxt Content to Directus

Learn how to move from a flat-file CMS to Directus.

Migrate from WordPress to Directus

Learn how to migrate posts and images to Directus, with tips on plugins.

Promoting Changes Between Environments in Directus

Learn the options to migrate schema and data between Directus projects.
See all Migration tutorials

Extensions

All about extensions

Check Permissions in a Custom Endpoint

Learn how to use internal Directus permissions when creating a custom endpoint.

Create Collection Items in Custom Panels

Learn how to use built-in interfaces and composables to create new collections.

Create New Customers in Stripe in a Custom Hook

Learn how to use the Stripe SDK to create data when actions occur in Directus.

Display External API Data From Vonage In Custom Panels

Learn how to display records from external systems in Directus Insights.

Display External Weather API Data In Custom Panels

Learn how to display external data in panels with a bundle and endpoint.

Format Dates in a Custom Display Extension

Learn how to build a custom display to format data in Directus.

Implement Navigation in Multipage Custom Modules

Learn how to navigate between multiple pages in module extensions.

Integrate Algolia Indexing with Custom Hooks

Learn how to maintain an Algolia index when data is created, updated, and deleted.

Integrate Elasticsearch Indexing with Custom Hooks

Learn how to maintain an Elasticsearch index when data is created, updated, and deleted.

Integrate Meilisearch Indexing with Custom Hooks

Learn how to maintain an Meilisearch index when data is created, updated, and deleted.

Monitor and Error Track with Sentry in Custom Hooks

Learn how to integrate Sentry error tracking in both your API and Data Studio.

Proxy an External API in a Custom Endpoint Extension

Learn how to make external APIs available via Directus in a custom endpoint.

Read Collection Data in Custom Layouts

Learn how to build your first layout with data from a collection.

Send SMS Messages with Twilio in Custom Operations

Learn how to build a custom operation that uses the Twilio SDK.

Send SMS Messages with Twilio in Custom Panels

Learn how to build a form inside a panel extension and use external APIs.

Summarize Relational Items in a Custom Display Extension

Learn how to work with relational data in display extensions.

Understand Available Slots in Custom Modules

Learn about all of the slots available in your custom modules.

Use Dynamic Values in Custom Email Templates

Learn how to inject dynamic data into liquid templates.

Use npm Packages in Custom Operations

Learn how to expose an npm package as an operation in Directus Automate.

Validate Phone Numbers with Twilio in a Custom Hook

Learn how to prevent an item from saving if it has an invalid phone number.
See all Extensions tutorials

Self-Hosting

Configure Okta as a Single Sign-On Provider

Learn how to set up Okta SSO with the SAML authentication mechanism.

Deploy Directus to an Ubuntu Server

Learn how to deploy Directus on a Docker container on an Ubuntu server.

Deploy Directus to AWS EC2

Learn how to deploy a Directus to AWS EC2, with a RDS database and a S3 storage bucket.

Deploy Directus to Azure Web Apps

Learn how to deploy Directus on a Docker container on Azure.

Deploy Directus to Digital Ocean

Learn how to deploy Directus on the Digital Ocean App Platform.

Deploy Directus to Google Cloud Platform

Learn how to deploy Directus on GCP with a Cloud SQL database and Cloud Storage Bucket.
See all Self-Hosting tutorials

Workflows

Build Content Approval Workflows with Custom Permissions

Learn how to configure roles and permissions for complex automations.

Combine Live Preview and Content Versioning with Next.js

Learn how to set up Live Preview with different content versions in your Next.js application.

Create GitHub Issues with Directus Automate

Learn how to integrate GitHub with Directus Automate to create new issues.

Detect High-Risk Phone Numbers with Vonage and Directus Automate

Learn how to integrate Vonage's Number Insights API with Directus Automate to validate numbers.

Enrich User Data with Clearbit and Directus Automate

Learn how to integrate Clearbit data enrichment with Directus Automate.

Generate Images with DALL•E and Directus Automate

Learn how to integrate OpenAI's Dall•E models with Directus Automate.

Generate Social Posts with GPT-4 and Directus Automate

Learn how to integrate OpenAI's GPT-4 model with Directus Automate.

Generate Transcripts with Deepgram and Directus Automate

Learn how to integrate Deepgram's Speech-to-Text API with Directus Automate.

Integrating Multilingual Content with Directus and Crowdin

Learn how to localize content in Directus using Crowdin's connector with Directus.

Schedule Future Content with Directus Automate

Learn how to set content to be scheduled on a future date with Directs Automate.

Tag Images with Clarifai and Directus Automate

Learn how to integrate Clarifai's image recognition APIs with Directus Automate.

Trigger Netlify Site Builds with Directus Automate

Learn how to trigger new Netlify website builds through Directus Automate.

Trigger Vercel Site Builds with Directus Automate

Learn how to trigger new Vercel website builds through Directus Automate.
See all Workflows tutorials