Slug

URL-safe identifier that auto-generates from the entry title. Use for page URLs, permalinks, and any field that becomes part of a URL path.

Usage#

typescript
slug: { label: 'Slug', format: 'slug', required: true },

Options#

Auto-generation#

The slug auto-fills from the source field (the entryTitle field by default) as you type. Once you manually edit the slug, auto-sync stops. Click Regenerate from title to re-sync.

Override the source field with slugSource:

typescript
fields: {
  headline: { label: 'Headline', format: 'string', entryTitle: true },
  slug: { label: 'URL Slug', format: 'slug', slugSource: 'headline' },
}

Validation#

• Slugs are normalized to kebab-case: lowercase letters, numbers, and hyphens only (a-z, 0-9, -).
• Unique within the collection — two entries cannot share the same slug. If a duplicate is detected, Save fails and the field shows an error.

Example: Blog with clean URLs#

Schema:

typescript
// cms/octocms.config.ts
post: {
  label: 'Post',
  hasMany: true,
  fields: {
    title: { label: 'Title', format: 'string', entryTitle: true, required: true },
    slug: { label: 'Slug', format: 'slug', required: true },
    body: { label: 'Body', format: 'markdown' },
  },
},

Dynamic route:

tsx
// src/app/blog/[slug]/page.tsx
import { query } from 'cms/__generated__/query';

export async function generateStaticParams() {
  const posts = await query('post').toArray();
  return posts.map((p) => ({ slug: p.fields.slug }));
}

export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await query('post').filter({ slug: params.slug }).first();
  if (!post) return null;

  return <article><h1>{post.fields.title}</h1></article>;
}

Storage#

Plain string in the entry JSON:

json
{ "slug": "getting-started-with-octocms" }

Query result#

Returned as-is — string. Use in URL generation, generateStaticParams, and route filters.