A powerful Directus extension that automatically generates URL-friendly slugs from other fields in your collection. Perfect for creating SEO-friendly URLs, blog posts, articles, and any content that needs clean, readable URLs.

npm install directus-slug-generator

1. Copy the extension to your Directus extensions directory
2. Install dependencies: npm install
3. Build the extension: npm run build
4. Restart Directus
5. Configure the interface in your collection fields

# Install the latest version
npm install directus-slug-generator

# Clone or download the extension
git clone https://github.com/markosiilak/directus-slug-generator.git
cd directus-slug-generator

# Install dependencies
npm install

# Build the extension
npm run build

# Copy to your Directus extensions directory
cp -r . /path/to/your/directus/extensions/interfaces/slug-generator/

1. Download the latest release from GitHub Releases
2. Extract to your Directus extensions directory
3. Install dependencies and build

1. Go to your Directus admin panel
2. Navigate to Settings → Data Model
3. Select your collection (e.g., "Articles")
4. Add a new field (e.g., "slug")
5. Set the interface to "Slug Generator"

{
  "select_field": "title",
  "generation_mode": "slug",            // "slug" | "uuid"
  "auto": true,                          // Auto-generate on mount/changes
  "required": true,
  "separator": "-",
  "lowercase": true,
  "placeholder": "Enter a slug or url...",
  "custom_empty_message": null,
  "custom_format_message": null,
  "custom_unique_message": null,
  "allow_duplicates": false,             // If false, checks uniqueness in the collection
  "auto_update_mode": "change",         // "disabled" | "change" | "blur" | "focus" | "realtime"
  "preserve_existing": false,            // Keep existing value when source changes
  "update_delay": 100,
  "show_preview_link": true,
  "preview_base_url": "https://example.com",
  "preview_open_in_new_tab": true
}

• 🔄 Automatic generation from any source field
• 🆔 UUID mode: generate RFC4122 v4 values when desired
• ⚡ Auto-update with multiple trigger modes
• 💾 Preserve existing value on source changes
• 🔗 Preview link rendering with configurable base URL and target
• 📅 Date awareness when the source is a date-like field
• 🌍 Transliteration for Cyrillic, German/Nordic, and broader Latin characters
• ✅ Validation for URL/slug format and optional uniqueness check

// Collection: blog_posts
// Fields: title, slug, content, published_date

{
  "select_field": "title",
  "auto": true,
  "auto_update_mode": "change",
  "separator": "-",
  "lowercase": true
}

// Input: "My Amazing Blog Post!"
// Output: "my-amazing-blog-post"

{
  "generation_mode": "uuid",
  "auto": true,
  "allow_duplicates": true
}

{
  "show_preview_link": true,
  "preview_base_url": "https://example.com/blog",
  "preview_open_in_new_tab": true
}

// Collection: products
// Fields: name, slug, category, price

{
  "source_field": "name",
  "auto_update": true,
  "update_mode": "change",
  "separator": "-",
  "lowercase": true,
  "preserve_existing": true
}

// Input: "iPhone 15 Pro Max"
// Output: "iphone-15-pro-max"

See the JSON block above for all available options and defaults.

Built-in transliteration covers:

• Cyrillic (Russian)
• German/Nordic (ä→ae, ö→oe, ü→ue, ß→ss, å→a, æ→ae, ø→o)
• Broad Latin accents (á, ç, ñ, etc.)

{
  "transliteration": {
    "custom_rules": {
      "&": "and",
      "©": "copyright",
      "®": "registered"
    }
  }
}

• Format: Accepts full URLs (http/https) or slugs. For URLs, dots/colons/slashes are preserved and cleaned. For slugs, letters, numbers, hyphens and slashes are allowed and normalized.
• Uniqueness: If allow_duplicates is false, the value is checked for uniqueness in the current collection (excluding the current item by primary key).
• Draft bypass: If your item status is draft, validation is skipped until publishing.

# Clone the repository
git clone https://github.com/markosiilak/directus-slug-generator.git
cd directus-slug-generator

# Install dependencies
npm install

# Build for development
npm run build

# Watch for changes
npm run dev

# Run tests
npm test

# Build optimized version
npm run build

# Build with source maps
npm run build:dev

• Built for Directus
• Inspired by modern URL practices
• Thanks to the Directus community for feedback and contributions

Made with ❤️ by Marko Siilak