Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Share your own snippet

Easy peasy URL Slug

By Roboto Studio

Quickly and easily validate your slug without having to work out the regex syntax

Warning

This schema is for an older version of Sanity Studio (v2), which is deprecated.

Learn how to migrate to the new Studio v3 →

Basic Slug Example

export default {
  title: "Basic Usage",
  name: "basicUsage",
  type: "document",
  fields: [
    {
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        //Change to schema title to automatically populate
        source: "title",
        slugify: (input) =>
          input
            .toLowerCase()
            //Remove spaces
            .replace(/\s+/g, "-")
            //Remove special characters
            .replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, ""),
        validation: (Rule) => Rule.required(),
      },
    },
  ],
};

Example using Sanity Plugin Better Slug

import SlugInput from "sanity-plugin-better-slug";

export default {
  title: "Sanity Plugin Better Slug Usage",
  name: "betterSlugUsage",
  type: "document",
  fields: [
    {
      name: "slug",
      title: "Slug",
      type: "slug",
      inputComponent: SlugInput, //Reference the SlugInput
      options: {
        //Change to schema title to automatically populate
        source: "name",
        //Use your URL
        basePath: "https://example.org",
        maxLength: 30,
        slugify: (input) =>
          input.toLowerCase()
          .replace(/\s+/g, "-").slice(0, 200),
          //Remove special characters
          .replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, ""),
        validation: (Rule) => Rule.required(),
      },
    },
  ],
};

A very bare bones way of ensuring your slugs are without spaces and special characters. It's also a very UX friendly way of handling this from a client side.

Contributor

Other schemas by author

Cursor Prompt

Thinking about getting started with AI? Well we're just going to share our latest and greatest prompt so you don't have to do the hard work

Portable Text Mock Content

If you're looking to mockup portable text in Storybook without a Sanity backend, this is the schema you're looking for