@gearbox-built/sanity-admin-message

Display formatted messages in the Sanity Studio admin interface.

This is a Sanity Studio v3 plugin that supports React 18 and React 19.

Features

• Display formatted messages in the admin interface
• Support for HTML content rendering
• Customizable card and text styling via @sanity/ui props
• TypeScript support with full type definitions
• React 18 and React 19 compatible

Installation

npm install @gearbox-built/sanity-admin-message

Usage

1. Add the plugin to your Sanity config

Add it as a plugin in sanity.config.ts (or .js):

import {defineConfig} from 'sanity'
import adminMessagePlugin from '@gearbox-built/sanity-admin-message'

export default defineConfig({
  //...
  plugins: [adminMessagePlugin()],
})

2. Use in your schema

Use the message type in your schema fields:

import {defineField, defineType} from 'sanity'

export default defineType({
  name: 'myDocument',
  type: 'document',
  fields: [
    defineField({
      name: 'importantNote',
      type: 'message',
      options: {
        message: '<strong>Important:</strong> This field is required for publication.',
      },
    }),
    // Your other fields...
  ],
})

Configuration Options

The message field type accepts the following options:

{
  message: string // HTML content to display
  card?: CardProps // Optional: @sanity/ui Card component props
  text?: TextProps // Optional: @sanity/ui Text component props
}

Example with custom styling

defineField({
  name: 'warningMessage',
  type: 'message',
  options: {
    message: '<p>⚠️ Changes to this field will affect live content immediately.</p>',
    card: {
      padding: [3, 4],
      radius: 3,
      tone: 'caution',
    },
    text: {
      size: 1,
      weight: 'semibold',
    },
  },
})

React Version Support

This plugin supports both React 18 and React 19:

• React 18: Fully supported
• React 19: Fully supported

Peer dependency: react ^18.0.0 || ^19.0.0

TypeScript

This plugin is written in TypeScript and includes full type definitions. Type checking is performed with TypeScript 5.7.2.

Development

Build

yarn build

Watch Mode

yarn watch

Testing in Sanity Studio

This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.

See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.

License

MIT © Gearbox Built