Get help on Discord

Add preview images to Sanity array module list using `media` in preview

13 replies
Last updated: Nov 29, 2025
Hi!I have a question about array previews.
The user can choose between these modules and add content to them, but to make it more user-friendly I want to add an image of what the module looks like. (just like a simple wireframe) - any ideas how to do that?

In the picture you´ll see a few added modules, and a list of names: 
'module-1, module-2….'.
It’s in the list of names I want to add a picture.
Here’s the pageBuilder:

export default {
    name: 'pageBuilder',
    title: 'Page builder',
    type: 'object',
    fields: [
        {
            options: { collapsible: true },
            type: 'array',
            name: 'page',
            title: 'Page',
            of: [
                { type: 'module1' },
                { type: 'module2' },
                { type: 'module3' },
                { type: 'module4' },
                { type: 'module5' },
                { type: 'module6' },
                { type: 'module7' },
            ]
        }]
}
And one of the modules:

export default {
    name: 'module1',
    title: 'Module One',
    type: 'document',
    fields: [
        {
            name: 'imageLeft',
            title: 'Image left',
            type: 'mainImage'
        },
        {
            name: 'imageMiddle',
            title: 'Image middle',
            type: 'mainImage'
        },
        {
            name: 'imageRight',
            title: 'Image right',
            type: 'mainImage'
        },
        {
            name: "moduleTitle",
            title: "Module Title",
            type: "string",
        },
        {
            name: 'moduleParagraph',
            title: 'Block Text',
            type: 'restrictedBodyText'
        },
        {
            name: "general",
            title: "General Content",
            type: "generalModule",
            options: { collapsible: true },
        },
    ],
    preview: {
        select: {
            title: 'moduleTitle',
        }
    }
}
AI Update

You can absolutely add wireframe images to your array item previews! The key is to use a static image in the media property of your preview configuration. Here's how:

Adding Static Wireframe Images

For each module, you can import a static wireframe image and display it in the preview using the prepare function:

// Import your wireframe images at the top of each module file
import module1Wireframe from './wireframes/module1.png'; // or .svg

export default {
    name: 'module1',
    title: 'Module One',
    type: 'document',
    fields: [
        // ... your fields
    ],
    preview: {
        select: {
            title: 'moduleTitle',
        },
        prepare({title}) {
            return {
                title: title || 'Module One',
                subtitle: 'Three column image layout',
                media: module1Wireframe  // Your static wireframe image
            }
        }
    }
}

Using Icons as Fallback

If you want to use icons instead of images, you can import from @sanity/icons:

import { ImageIcon } from '@sanity/icons';

export default {
    name: 'module1',
    // ... fields
    preview: {
        select: {
            title: 'moduleTitle',
        },
        prepare({title}) {
            return {
                title: title || 'Module One',
                subtitle: 'Three column image layout',
                media: ImageIcon
            }
        }
    }
}

Combining Both Approaches

You can even show the actual content images when they exist, but fall back to your wireframe when the module is empty:

import module1Wireframe from './wireframes/module1.png';

export default {
    name: 'module1',
    // ... fields
    preview: {
        select: {
            title: 'moduleTitle',
            contentImage: 'imageLeft'  // Select one of the actual images
        },
        prepare({title, contentImage}) {
            return {
                title: title || 'Module One',
                subtitle: 'Three column image layout',
                media: contentImage || module1Wireframe  // Show content or wireframe
            }
        }
    }
}

The preview configuration documentation explains how the select and prepare functions work together. When users are adding modules to your page builder array, they'll now see your helpful wireframe images in the dropdown list, making it much easier to choose the right module!

Just make sure your wireframe images are imported correctly based on your project structure. SVGs work great for this since they're crisp at any size.

Show original thread
13 replies

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?