Easy peasy URL Slug

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

This recipe 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.