Directus Inline M2M Interface

A powerful inline interface for Directus that allows editing of Many-to-Many (M2M) relationships directly within their parent's form. Features accordion-style cards, drag-and-drop sorting, and comprehensive CRUD operations.


Features

- ✅ Many-to-Many (M2M) Support with accordion-style cards
- ✅ Drag-and-drop reordering (when sortField is defined)
- ✅ Nested forms support for complex relationships
- ✅ Item limit with "Show more" functionality
- ✅ Status indicators (New, Modified, Deleted)
- ✅ Undo delete for existing items
- ✅ Create new items or link existing items from related collection
- ✅ Full CRUD operations on junction and related items
- ✅ Permission-aware - respects Directus roles and permissions

!Screenshot of the interface (dark)

Installation

$3

``bash
npm install directus-extension-inline-m2m
`

Usage

1. In your Directus Data Model, create or edit a Many-to-Many (M2M) field
2. In the Interface section, select Inline M2M
3. Configure the options (see below)
4. Save and start editing related items inline!

Options

$3

Allows users to create new items in the related collection directly from the parent form.

$3

Allows users to link existing items from the related collection.

$3

Customize how items are displayed in the accordion header using Directus template syntax (e.g., {{title}} - {{status}}`).

$3

Number of items to display initially. Additional items can be revealed with "Show more" button.

$3

Allow linking the same related item multiple times.

$3

Filter which items can be selected when linking existing items.

Screenshots

!Screenshot of the interface (light)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Credits

- Inspired by directus-extension-inline-form-interface by Hannes Küttner and the UI/UX approach of directus-expandable-blocks by smartlabsAT.