Skip to content
On this page

Codebase Overview

The core concepts behind Directus are simple, however the problems that must be solved to honor them can be remarkably complex. We strive to design and engineer the most elegant solutions possible, so that our codebase remains accessible.


The primary Directus repository is located at directus/directus and houses the Admin App (Vue.js 3 w/ Composition API), API (Node.js), API Specification (OpenAPI), and other smaller packages used internally. Directus follows a monorepo design similar to React or Babel — this page will outline our monorepo's design and structure.

The API (/api)

Contains the Directus API (REST+GraphQL), written in Node.js. The source code is located in /api/src and the below folders are inside there.

/cliThe CLI commands and matching functions that the directus package ships with.
/controllersRoute handler controllers for the endpoints in the API.
/databaseDatabase manipulation abstraction, system migrations, and system data. Also where you'd find the main query runner.
/errorsClasses for the different errors the API is expected to throw. Used to set the HTTP status and error codes.
/middlewareVarious (express) routing middleware. Includes things like cache-checker, authenticator, etc.
/servicesInternal services. The main abstraction for interfacing with the data in the database. Both GraphQL and REST requests are "translated" to use these services as the main logic in the platform.
/typesTypeScript types that are shared between the different parts of the API.
/utilsVarious utility functions.

The Data Studio App (/app)

Contains the Directus Data Studio App, written in Vue.js 3 w/ the Composition API.

/publicAssets that are included with the app, but not bundled.
/srcApp source code.

The source code is located in /app/src and the below folders are inside there.

/assetsFiles that are included within the app. Are bundled / optimized in the build step.
/components(Base) components that are used across the platform. Contains "basic building blocks" like button, input, etc.
/composablesReusable parts of reactive logic that can be used between Vue components. Includes things reactively calculating time from now, fetching a single item, etc.
/directivesCustom Vue directives (e.g. v-tooltip).
/displaysComponents to display of data within the app.
/interfacesThe core-included interfaces that allow editing and viewing individual pieces of data.
/langTranslations abstraction, and language files. The language yaml files are maintained through Crowdin.
/layoutsThe core-included layouts that change the way items are represented inside the collection view
/modulesThe core-included modules that structure major parts the app.
/operationsOperations are steps in a flow
/panelsPanels display data in the insight dashboards
/routesThe routes in the app. Modules define their own routes, so this only includes the "system" things that don't belong to module, like login.
/storesPinia based stores used for global state tracking.
/stylesAll general styles, css-vars, mixins and themes are stored inside here. Every component has their own component styles, these are just the global styles.
/typesTypeScript types that are shared between the different parts of the App.
/utilsUtility functions used in various parts of the app.
/viewsThe (two) main views used in the app: public / private. Also contains "internal" coupled components for those two views.

Component Library

Directus comes shipped with it's own Vue Component Library and Storybook that you can use to enrich your extensions or when developing locally. These components can be used in any of the "app extensions", including Interfaces, Displays, Modules, Layouts, and Panels.

Packages (/packages)

The various sub-packages of the platform. Including the file-storage adapters, schema, specs, etc.

Package NameDescription
@directus/composablesShared Vue composables for Directus use
@directus/constantsShared constants for Directus
create-directus-extensionA small util that will scaffold a Directus extension
@directus/data-driver-postgresData abstraction for Postgres
@directus/dataData abstraction for Directus
@directus/errorsUtility functions to help creating and checking against Directus errors
@directus/extensions-sdkA toolkit to develop extensions to extend Directus
@directus/pressurePressure based rate limiter
@directus/randomSet of random-utilities for use in tests
@directus/release-notes-generatorPackage that generates release notes for Directus monorepo
@directus/schemaUtility for extracting information about the database schema
@directus/specsOpenAPI Specification of the Directus API
@directus/sdkThe JS SDK provides an intuitive interface for the Directus API from within a JavaScript-powered project (browsers and Node.js).
@directus/storage-driver-azureAzure file storage abstraction for @directus/storage
@directus/storage-driver-cloudinaryCloudinary file storage abstraction for @directus/storage
@directus/storage-driver-gcsGCS file storage abstraction for @directus/storage
@directus/storage-driver-localLocal file storage abstraction for @directus/storage
@directus/storage-driver-s3S3 file storage abstraction for @directus/storage
@directus/storageObject storage abstraction layer for Directus
@directus/storesShared Directus Studio state for use in components, extensions, and the @directus/app routes. Stores are Pinia-based stores.
@directus/tsconfigThe shared TS Config files used by the projects in the Directus ecosystem.
@directus/typesShared types for Directus
@directus/update-checkCheck if an update is available for a given package
@directus/utilsUtilities shared between the Directus packages

The JavaScript SDK (/sdk)

Contains the new Directus JavaScript SDK available as @directus/sdk package.

Tests (/tests)

Tests are maintained on a per-package base. This folder contains the platform-wide (end-to-end) tests. See Tests for more information.