Skip to content
👀 Our most exciting product launch yet 🚀 Join us May 8th for Sanity Connect
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

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