or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli.mdcomposables.mdextensions.mdindex.mdutilities.md
tile.json

cli.mddocs/

CLI Commands

Command-line interface for extension development workflow including creating, building, validating, and linking extensions. The CLI is available through the directus-extension binary.

Capabilities

Create Command

Scaffold a new Directus extension with proper project structure and templates.

directus-extension create <type> <name> [options]

# Options:
# --no-install          Skip dependency installation after creating extension
# -l, --language <lang> Specify the language to use (javascript, typescript)

# Arguments:
# <type>                Extension type (display, endpoint, hook, interface, layout, module, operation, panel, theme, bundle)
# <name>                Extension name

Supported Extension Types:

  • display - Custom field display components
  • endpoint - Custom API endpoints
  • hook - Server-side event hooks
  • interface - Custom field input components
  • layout - Custom collection layouts
  • module - Custom admin modules
  • operation - Custom workflow operations
  • panel - Custom dashboard panels
  • theme - Custom admin themes
  • bundle - Multi-extension bundles containing multiple components

Usage Examples:

# Create a TypeScript display extension
directus-extension create display my-custom-display -l typescript

# Create a JavaScript interface extension without installing dependencies
directus-extension create interface my-input --no-install -l javascript

# Create a module extension (defaults to TypeScript with dependency installation)
directus-extension create module analytics-dashboard

# Create an endpoint extension
directus-extension create endpoint custom-api

# Create a theme extension
directus-extension create theme dark-theme

# Create a bundle extension (multiple components)
directus-extension create bundle my-extension-pack

Build Command

Bundle a Directus extension to a single entrypoint for production deployment.

directus-extension build [options]

# Options:
# -t, --type <type>     Specify the extension type instead of reading from package manifest
# -i, --input <file>    Specify the entrypoint instead of reading from package manifest
# -o, --output <file>   Specify the output file instead of reading from package manifest
# -w, --watch           Watch and rebuild on changes
# --no-minify           Disable minification
# --sourcemap           Include source maps in output

Usage Examples:

# Build extension using package.json configuration
directus-extension build

# Build with custom input and output
directus-extension build -i src/index.ts -o dist/extension.js

# Build in watch mode for development
directus-extension build --watch

# Build without minification and with source maps
directus-extension build --no-minify --sourcemap

# Override extension type detection
directus-extension build -t display

Add Command

Add entries to an existing Directus extension, useful for bundle extensions that contain multiple components.

directus-extension add [options]

# Options:
# --no-install    Skip dependency (re)installation after adding extension

Usage Examples:

# Add new entries to existing extension
directus-extension add

# Add entries without reinstalling dependencies
directus-extension add --no-install

Validate Command

Validate the extension against Directus extension requirements and best practices.

directus-extension validate [options]

# Options:
# -c, --check <check>   Check a specific extension requirement
# -v, --verbose         Print the full validation report

Usage Examples:

# Validate all extension requirements
directus-extension validate

# Validate with detailed output
directus-extension validate --verbose

# Check specific requirement
directus-extension validate --check manifest

Link Command

Create a symlink to the extension in the Directus extensions folder for local development.

directus-extension link <path>

# Arguments:
# <path>    Path to the extension folder of Directus instance

Usage Example:

# Link extension to local Directus instance
directus-extension link /path/to/directus/extensions

# Link to Directus installed in parent directory
directus-extension link ../my-directus-app/extensions

Version Command

Display the current version of the Extensions SDK.

directus-extension --version
directus-extension -v

Help Command

Display help information for commands.

directus-extension --help
directus-extension <command> --help

Build Configuration

The build command uses Rollup with optimized configurations for different extension types. The build system automatically handles:

  • TypeScript compilation using esbuild for fast builds
  • Vue Single File Component processing
  • CSS/Sass processing with automatic extraction
  • Code minification using Terser (can be disabled)
  • Source map generation (optional)
  • Module resolution with Node.js resolution algorithm
  • CommonJS/ESM compatibility for dependencies

Configuration Files

The CLI can read configuration from several sources:

  1. Package.json manifest - Standard location for extension metadata
  2. Extension config file - Custom build configuration
  3. Command line options - Override defaults and config files

Package.json Example:

{
  "name": "my-extension",
  "directus:extension": {
    "type": "display",
    "path": "dist/index.js",
    "source": "src/index.ts",
    "host": "^10.0.0"
  },
  "scripts": {
    "build": "directus-extension build",
    "dev": "directus-extension build --watch"
  }
}

Extension Templates

The CLI includes templates for all extension types in both JavaScript and TypeScript:

  • Display templates - Basic display component with options
  • Interface templates - Input component with validation
  • Layout templates - Collection layout with sidebar and actions
  • Module templates - Navigation module with routing
  • Panel templates - Dashboard panel with configuration
  • Hook templates - Server-side event handlers
  • Endpoint templates - API route handlers
  • Operation templates - Workflow operation handlers
  • Theme templates - CSS custom properties and rules

Each template includes:

  • Proper TypeScript types and interfaces
  • Example component implementations
  • Configuration options and validation
  • Documentation comments and examples
  • Package.json with correct dependencies and scripts