---
title: "Directus — Free Framer plugin · Best of Framer"
description: "Free Framer plugin · by Directus · CMS. Directus collection so you can sync content in both directions."
canonical: "https://framer.elliotli.dev/plugin/directus"
---

[Home](/)/[Plugins](/plugins)/[CMS](/plugins/category/cms)/Directus

# Directus

Sync Directus with Framer CMS

[View on Framer](https://framer.com/marketplace/plugins/directus/?via=elliot-li)

![Directus preview image 1](https://framer.elliotli.dev/og/plugin/directus/3ed4cba8c2df347b/1600x1200.jpg)

## Summary

Directus collection so you can sync content in both directions.

## Description

### What it does

The Directus Framer plugin connects a Framer CMS collection to a Directus collection so you can sync content in both directions. Pull content from Directus into Framer, or push edits you make in Framer back to Directus, without leaving your project. Each Framer collection has its own saved connection and field mapping.

### Requirements

\- A **regular** (user-created) Framer CMS collection. Managed collections are not accessible to plugins.

\- A Directus instance (cloud or self-hosted) and an API access token with read/write access to the collections you want to sync. Directus turns your database into a shared platform where developers, content teams, and AI all work on the same live data.

### Getting started

1\. In Framer, create or open a regular CMS collection (Add data → Collection).

2\. Open the Directus plugin from that collection.

3\. Enter your Directus URL and access token, then click **Connect**.

4\. Select an existing Directus collection, or choose **Create new** to create one from your Framer fields.

5\. Map fields: choose which field is the slug, which is the ID (for matching items), and adjust types as needed. Click **Configure Collection**.

6\. Run **Sync from Directus** to pull items in, or **Sync to Directus** to push Framer items out.

On later opens, the plugin restores your saved config; use **Reconfigure** on the sync screen to change the field mapping.

### Field types

The plugin maps Directus types to Framer types with sensible defaults (e.g. text → string, integer → number, datetime → date, image relation → image, rich text → formatted text, many-to-one → collection reference). You can change any type in the mapping screen. Enum/dropdown fields in Directus sync as plain strings. JSON and array (gallery) fields are not synced and appear as disabled rows. Only many-to-one relations are supported as collection references; one-to-many and many-to-many are excluded.

### Collection references

A collection reference links an item to another Framer collection (e.g. article → author). For Directus many-to-one fields you can enable a collection reference by selecting the related Framer collection and the field in that collection that holds the Directus ID used for lookup.

### Syncing

\- **Sync from Directus:** Fetches items from Directus, converts them to Framer items, and adds or updates by matching slug/ID. Does not clear the collection—only adds or updates. Duplicate slugs in Directus cause later items to be skipped (reported in the UI).

\- **Sync to Directus:** Sends Framer items to Directus, creating or updating by slug. Edits in Framer can be pushed back with this action.

### Conflicts

If the same item was changed in both Framer and Directus since the last sync, the plugin can detect conflicts. With **Always overwrite** unchecked, conflicting items are listed and you choose **Use Framer** or **Use Directus** per item. With **Always overwrite** checked, the source side wins for every item and no conflict screen is shown.

### Restrictions

\- Only regular Framer CMS collections. No managed collections.

\- Only many-to-one Directus relations as collection references.

\- JSON and array (gallery) fields are not synced.

\- Enum/dropdown sync as plain text.

\- The plugin does not delete items. Sync only adds or updates; removing an item on one side does not remove it on the other.

## Rank history [How rankings work →](/terms#rankings)

-   All · #1045

## Details

- **Author**: Directus
- **Published**: 2026-03-03
- **Updated**: 2026-03-03
- **Added**: 2026-02-26
- **Categories**: CMS

## More across types

-   [Bend Video Carousel](/component/bend-video-carousel) — Axis Supply · $15 — Bend Video Carousel is an interactive video carousel for Framer that combines smooth movement with a curved, dimensional layout.
-   [CMS Archway Video](/component/cms-archway-video) — Axis Supply · Free — CMS Archway Video is a cinematic video carousel for Framer that combines continuously moving video cards with a distinctive arched shape.
-   [Reveal Nav CMS](/component/reveal-nav-cms) — TOC Studio · Free — CMS-connected hover nav menu

## More like this

-   [Savepoint](/plugin/savepoint) — Syauqizaidan Khairan Khalaf · Free — Undo for your Framer CMS
-   [Store Locator](/plugin/store-locator) — Framefic · Free — Interactive Maps, Nearby Stores
-   [FlowSlider Pro](/plugin/flowslider-pro) — Junseo Ham · Free — CMS Slider & Carousel Engine
-   [CMS Video Downloader](/plugin/cms-video-downloader) — Builders Hub · Free — Download CMS Videos