Must Have Directus 9 Extensions

A very powerful feature of Directus 9 the ability to be extended. I've come across some really useful extensions and have collected them all here

Must Have Directus 9 Extensions

A very powerful feature of Directus 9 the ability to be extended. In my travels, I've come across some really useful extensions and have collected them all here.

Editor.js Text Editor

This extension inports the editor.js interface as a text editor in Directus. The data type must be JSON and saves the content in JSON format. This works very well with the Directus API.

GitHub - dimitrov-adrian/directus-extension-editorjs-interface: Block editor (Editor.js) interface for Directus 9
Block editor (Editor.js) interface for Directus 9. Contribute to dimitrov-adrian/directus-extension-editorjs-interface development by creating an account on GitHub.

Actions for URLs

Add clipboard action or open links in a new tab. The copy feature can be used on any string.

GitHub - utomic-media/directus-extension-field-actions: A directus interface + display allowing custom actions like copy to clipboard and open URL’s while clicking on appended / prepended buttons or the value itself (if readonly))
A directus interface + display allowing custom actions like copy to clipboard and open URL's while clicking on appended / prepended buttons or the value itself (if readonly)) - GitHub - utomic-...

M2M Tags

Much like the existing tags inferface in Directus, this one links to a table of existing tags with a junction table (M2M) and can create new ones.

preview of tags in action
GitHub - dimitrov-adrian/directus-extension-tags-m2m-interface: M2M driven tagging interface for Directus 9
M2M driven tagging interface for Directus 9. Contribute to dimitrov-adrian/directus-extension-tags-m2m-interface development by creating an account on GitHub.

ElasticSearch

Using ElasticSearch, this extension sync content from Directus into ElasticSearch. This also supports MeiliSearch and Algolia.

GitHub - dimitrov-adrian/directus-extension-searchsync: Simple Directus 9 extension that sync content with remote search engine.
Simple Directus 9 extension that sync content with remote search engine. - GitHub - dimitrov-adrian/directus-extension-searchsync: Simple Directus 9 extension that sync content with remote search e...

Masked Input

Enforce a template for an input field and provide a guide while typing.

GitHub - dimitrov-adrian/directus-extension-masked-interface: Masked input interface extension for Directus 9
Masked input interface extension for Directus 9. Contribute to dimitrov-adrian/directus-extension-masked-interface development by creating an account on GitHub.

Create a Page URL/Slug

Creates a permalink from an input field.

GitHub - dimitrov-adrian/directus-extension-wpslug-interface: WordPress alike slug interface for Directus 9
WordPress alike slug interface for Directus 9. Contribute to dimitrov-adrian/directus-extension-wpslug-interface development by creating an account on GitHub.

Fetches metadata from a link. This field requires a JSON data type and will store the metadata as JSON. This works really well with the Directus API.

GitHub - dimitrov-adrian/directus-extension-linkmeta: Directus 9 extension that stores link metadata using Open Graph, JSON+LD, oEmbed or HTML metadata
Directus 9 extension that stores link metadata using Open Graph, JSON+LD, oEmbed or HTML metadata - GitHub - dimitrov-adrian/directus-extension-linkmeta: Directus 9 extension that stores link metad...

This is a display extension to change your URL output to clickable links or a copy to clipboard.

GitHub - jacoborus/directus-extension-display-link: Display URLs with an open in new tab icon link in Directus 9
Display URLs with an open in new tab icon link in Directus 9 - GitHub - jacoborus/directus-extension-display-link: Display URLs with an open in new tab icon link in Directus 9

SVG Map Selector

This one is quite creative. You can any SVG image and attach data-value to different parts to make the selectable. Make sure to include some css such as .choice, :hover and .active for interaction.

GitHub - dimitrov-adrian/directus-extension-svgmap-picker-interface: Select a value from a SVG Map box
Select a value from a SVG Map box. Contribute to dimitrov-adrian/directus-extension-svgmap-picker-interface development by creating an account on GitHub.

Group Model Dialog

Use a button to open up a dialog that contains the contents of the group. A great way to hide advanced configuration.

GitHub - dimitrov-adrian/directus-extension-group-modal-interface: Group fields into modal dialog, accessible via button.
Group fields into modal dialog, accessible via button. - GitHub - dimitrov-adrian/directus-extension-group-modal-interface: Group fields into modal dialog, accessible via button.

API Viewer Module

This extensions is a module that gernerates API documentation based on your collections.

GitHub - u12206050/directus-extension-api-viewer-module: A module for displaying your Directus api documentation directly within the App
A module for displaying your Directus api documentation directly within the App - GitHub - u12206050/directus-extension-api-viewer-module: A module for displaying your Directus api documentation di...

Installing an Extension

These extensions include instructions on how you can install them into you project folder. The manual approach requires you to compile the src folder into a single index.js file. Then you copy the index file into the extensions folder. This must go in the relevant extension type folder (interface, display, layout etc) inside a new folder with the name of the extension.

For Example
/extensions/interface/extension-name/index.js

Restart Directus to apply the changes.

By continuing to use our website, you consent to use essential cookies. We also use optional tracking cookies which help us gather statistics to improve our services. Do you consent to these cookies?

I Consent Do not track