Extensions Overview

Extend Directus with custom functionality

Directus is built to be modular and extensible. You can create custom extensions to add new functionality to both the API and admin app.

Extension Types

Interfaces

Custom field input components

Layouts

Custom ways to view collection items

Displays

Custom field display components

Panels

Custom dashboard panel types

Modules

Full custom pages and navigation

Operations

Custom flow operation types

Hooks

Server-side event hooks

Endpoints

Custom API endpoints

Creating Extensions

Use the create-directus-extension package to scaffold new extensions:

npm init directus-extension

This interactive CLI will guide you through creating an extension.

Extension Structure

All extensions follow a similar structure:

my-extension/
├── src/
│   └── index.ts
├── package.json
└── README.md

Installing Extensions

Local Extensions

Place extensions in the extensions folder:

project/
├── extensions/
│   ├── interfaces/
│   │   └── my-interface/
│   ├── modules/
│   │   └── my-module/
│   └── hooks/
│       └── my-hook/

Extension Packages

Install from npm:

npm install directus-extension-name

Configure in your environment:

EXTENSIONS_AUTO_RELOAD=true

Extension Marketplace

Browse and install extensions directly from the admin app:

Settings > Extensions > Marketplace

Development

Hot Reload

Enable automatic reloading during development:

EXTENSIONS_AUTO_RELOAD=true

Building

Build your extension:

npm run build

Testing

Link your extension for local testing:

cd my-extension
npm link

cd /path/to/directus
npm link my-extension

Next Steps

Extensions SDK

Start building your first extension