Skip to content

Helpers

The Sanity Structure Tool provides a set of helper functions that are strictly typed to your project's specific configuration.

These helpers are generated by a factory function (structureToolPlugin), ensuring that your custom roles and workspaces are fully available via IntelliSense and validated at compile-time.

The Factory Pattern

When you initialize the plugin, you receive a helpers object that is pre-bound to your types, which you then use to define your structure list items:

ts
import { structureToolPlugin } from 'sanity-plugin-structure-tool';

export const { helpers } = structureToolPlugin({
  // 1. Define your project-specific roles and workspaces
  roles: ['administrator', 'editor', 'viewer'],
  workspaces: ['production', 'staging'],
});
ts
helpers.listing('post', {
  // Roles and Workspaces are now strictly typed!
  roles: ['administrator'],
  workspaces: ['production'],
});

helpers.children

  • Shorthand Signature: (title: string, children: ListItem[], params?: CoreParams) => ChildrenOutput
  • Object Signature: (params: ChildrenParams) => ChildrenOutput
  • Examples: See Examples

Creates a nested list structure (folder).

ts
{
  title: 'Settings',
  children: [
    {
      schemaType: 'generalSettings',
      singleton: true,
    },
    {
      schemaType: 'apiSettings',
      singleton: true,
    },
  ],
}
ts
helpers.children('Settings', [
  helpers.singleton('generalSettings'),
  helpers.singleton('apiSettings'),
]);
ts
helpers.children({
  title: 'Settings',
  children: [helpers.singleton('generalSettings'), helpers.singleton('apiSettings')],
});

helpers.component

  • Shorthand Signature: (title: string, component: ComponentType, params?: CoreParams) => ComponentOutput
  • Object Signature: (params: ComponentParams) => ComponentOutput
  • Examples: See Examples

Renders a custom React component as the pane content.

ts
{
  title: 'Dashboard',
  component: MyDashboard,
}
ts
helpers.component('Dashboard', MyDashboard);
ts
helpers.component({
  title: 'Dashboard',
  component: MyDashboard,
});

helpers.divider

  • Shorthand Signature: (title?: string, params?: CoreParams) => DividerOutput
  • Object Signature: (params?: DividerParams) => DividerOutput
  • Examples: See Examples

Renders a visual separator in the desk list.

ts
{
  title: 'Content Section',
  isDivider: true,
}
ts
helpers.divider('Content Section');
ts
helpers.divider({
  title: 'Content Section',
});

helpers.filters

  • Type: (params: FiltersParams) => FiltersOutput
  • Examples: See Examples

Creates a filtered list (e.g., "Drafts", "Published").

ts
{
  title: 'Published Posts',
  filter: '_type == "post" && !(_id in path("drafts.**"))',
}
ts
helpers.filters({
  title: 'Published Posts',
  filter: '_type == "post" && !(_id in path("drafts.**"))',
});

helpers.listing

  • Shorthand Signature: (schemaType: string, params?: CoreParams) => ListingOutput
  • Object Signature: (params: ListingParams) => ListingOutput
  • Examples: See Examples

Used to define a standard document list.

ts
{
  title: 'All Authors',
  schemaType: 'author',
  icon: UserIcon,
}
ts
helpers.listing('author', {
  title: 'All Authors',
});
ts
helpers.listing({
  title: 'All Authors',
  schemaType: 'author',
  icon: UserIcon,
});

helpers.raw

  • Shorthand Signature: (raw: (S: StructureBuilder, context: any) => any, params?: CoreParams) => RawOutput
  • Object Signature: (params: RawParams) => RawOutput
  • Examples: See Examples

The "Escape Hatch" to use the native Sanity Structure Builder API.

ts
{
  raw: (S) => S.listItem().title('Advanced').child(...),
}
ts
helpers.raw((S) => S.listItem().title('Advanced').child(...))
ts
helpers.raw({
  raw: (S) => S.listItem().title('Advanced').child(...)
})

helpers.singleton

  • Shorthand Signature: (schemaType: string, params?: CoreParams) => SingletonOutput
  • Object Signature: (params: SingletonParams) => SingletonOutput
  • Examples: See Examples

Used for singleton documents (documents that only have one instance).

ts
{
  title: 'Global Settings',
  schemaType: 'settings',
  singleton: true,
}
ts
helpers.singleton('settings', {
  title: 'Global Settings',
});
ts
helpers.singleton({
  title: 'Global Settings',
  schemaType: 'settings',
});

Why a Factory Pattern?

By using a factory function (structureToolPlugin) to generate your helpers, we ensure that:

  1. Context is preserved: Helpers are pre-bound and know the specific "shape" of your structure.
  2. No generic "string" types: Roles and Workspaces are treated as literal unions, not just broad strings.
  3. Refactoring is easy: If you change a role name in your configuration, TypeScript will immediately highlight all the helpers that need to be updated.

Usage via Callbacks (No Imports)

If you do not want to import the generated helpers object in every structure file, both defineListItems and defineListItem support a callback function that passes the bound helpers as an argument. This is especially useful for modular structures:

ts
import { defineListItems } from './index';

export default defineListItems(({ helpers }) => [
  helpers.divider('General'),
  helpers.listing('author'),
  helpers.singleton('settings'),
]);

Advantages of Helpers

Using the built-in helpers offers several key advantages:

  1. Readability: The syntax is often more expressive and closer to natural language.
  2. Type Safety: Every helper is strictly typed to ensure you provide the correct parameters for each item type.
  3. Type Intelligence: If you configured roles or workspaces in your setup, they will be available as autocomplete options within the helper parameters.
  4. Shorthand Syntax: Many helpers allow you to pass the schemaType or title as the first argument, reducing boilerplate.

Released under the MIT License.