Easy peasy URL Slug

Studio v2

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

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

Roboto Studio

The best editorial experiences on the web