QoL Improvements: New `defineModule` Helper and Richer Module Previews

Two small quality of life improvements have landed recently in SanityPress: a defineModule helper for developers writing module schemas, and richer array item previews in the Studio for editors managing page content. Neither is a major feature—they’re the kind of change that makes everyday work a bit less error-prone and a bit more informative.

On the schema side, every module had to manually wire up an attributes field of type module-attributes, an options group to house it, the hidden and uid values in preview.select and prepare(), and a components.preview pointing at the shared preview component. That’s roughly 15 lines that had to be exactly right in every module. Easy to omit, and not loud when wrong.

defineModule()#

defineModule is a wrapper around Sanity’s defineType() that handles all of that automatically. Pass it your fields and any custom groups as usual, and it takes care of the rest:

import defineModule from '@/sanity/schemaTypes/fragments/define-module'

export default defineModule({
  name: 'hero-banner',
  title: 'Hero banner',
  type: 'object',
  icon: SomeIcon,
  groups: [{ name: 'content', default: true }],
  fields: [
    // your fields here
  ],
  // ...
})

The options group is appended automatically. The attributes field is prepended and assigned to it. The preview.select is extended to include attributes, and prepare() is wrapped to pull hidden and uid out. The components.preview is set to the shared modulePreview component.

All existing SanityPress module schemas now use this new defineModule helper function. The /new-module skill has also been updated to scaffold new modules with it by default, so the pattern is enforced going forward without any extra thought.

Richer module previews#

The modulePreview component that defineModule sets on every module got two new additions: a UID badge and a hidden indicator.

When a module has a uid set, a small #uid badge appears right-aligned in the array item row. When a module is marked hidden, an eye-closed icon shows in its place. Both pull from module-attributes, the same uid that becomes the HTML id attribute for anchor links, and the same hidden flag that suppresses the module on the frontend.

The implementation uses Sanity’s custom preview component API: extend PreviewProps with your extra props, call renderDefault(props) to keep the schema’s own preview intact, and layer in your additions.

Sanity’s guide on creating richer array item previews covers the full pattern in detail.

Start building with SanityPress#

defineModule and the updated module previews ship with SanityPress—a production-ready starter built on Sanity, Next.js, and Tailwind. If you’re building on it, every new module you scaffold gets the right structure and the right Studio experience out of the box.

Get started with SanityPress today.