Feature Request: Live Slug/Filename Preview in Entry Editor

[RDjarbeng]

Show live slug/filename preview when creating or editing an entry

Description

When creating a new entry in a folder collection, there is currently no way to see what the generated filename (slug) will be before saving. The slug is computed on save based on the collection's slug template (e.g. {{year}}-{{month}}-{{day}}-{{slug}}), but the author has no visibility into the result while editing.

It would be very helpful to display a live preview of the generated filename somewhere in the entry editor UI — for example, below the title field or in the editor toolbar/header area.

What

• Display a read-only (could be editable too as a preference) preview of the computed slug/filename in the entry editor, updated in real-time as the user types or modifies fields referenced in the slug template.
• The preview should apply the same slugification rules as the save logic (respecting slug.encoding, slug.clean_accents, slug.sanitize_replacement, and any template tags like {{year}}, {{month}}, {{day}}, {{slug}}, {{uuid}}, etc.).
• For existing entries, show the current filename.

Example

For a collection configured with:

slug:
  encoding: "ascii"
  clean_accents: true
  sanitize_replacement: "-"

collections:
  - name: "posts"
    folder: "_posts"
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - { label: "Title", name: "title", widget: "string" }

If the user types the title "My First Blog Post!" on April 25, 2026, the editor would show a preview like:

Filename: 2026-04-25-my-first-blog-post.md

This preview would update live as the title changes.

Why

1. Predictability : Authors often need to know the exact slug for cross-referencing, linking, or SEO purposes. Currently, the only way to find out is to save the entry and check the resulting file.
2. Avoiding duplicates : Seeing the slug before saving helps authors notice if a similar entry might already exist.
3. Debugging slug templates : When configuring custom slug templates with multiple fields, a live preview helps verify the template produces the expected output.
4. Parity with other CMS tools : Many CMS platforms (WordPress, Ghost, etc.) show a URL/slug preview while editing. This is a well-established UX pattern that content editors expect.

Suggested UX

A few possible placements ( just ideas):

• Below the title field : A subtle, greyed-out line showing Filename: 2026-04-25-my-post-title.md
• In the editor header/toolbar : Near the entry status or save button
• Collapsible metadata panel : Alongside other entry metadata like publish date

The preview could be styled as a non-editable, secondary-text element so it doesn't clutter the editing experience.

Additional Context

• The current workaround is to add an explicit slug string field to the collection's fields, but this adds an extra manual step for authors and can lead to inconsistencies.
• This feature would complement existing slug configuration options (slug.encoding, slug.clean_accents, slug.sanitize_replacement) by making their effects visible to the author in real time.

[kyoshino]

Date parts cannot be determined until the entry is saved, but we can still use the current date/time to show a preview. I think WordPress actually has a real time preview.

[kyoshino]

Done in v0.221.0.