Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Share your own snippet

Page Builder Starter

By Joshua Woods

This is a simple starting off point to allow users to organize a page

Main Component


import { defineField, defineType } from 'sanity';

export default defineType({
  name: 'page',
  title: 'Page',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: 'components',
      title: 'Components',
      type: 'array',
      of: [
        { type: 'textComponent' },
        { type: 'richTextComponent' },
        { type: 'imageComponent' },
        { type: 'linkComponent' },
      ],
    }),
  ],
});

Text field

import { defineField, defineType } from 'sanity';

export default defineType({
  name: 'textComponent',
  title: 'Text Component',
  type: 'object',
  fields: [
    defineField({
      name: 'text',
      title: 'Text',
      type: 'text',
    }),
  ],
});

Rich Text

import { defineField, defineType } from 'sanity';

export default defineType({
  name: 'richTextComponent',
  title: 'Rich Text Component',
  type: 'object',
  fields: [
    defineField({
      name: 'richText',
      title: 'Rich Text',
      type: 'array',
      of: [{ type: 'block' }],
    }),
  ],
});

Image Component

import { defineField, defineType } from 'sanity';

export default defineType({
  name: 'imageComponent',
  title: 'Image Component',
  type: 'object',
  fields: [
    defineField({
      name: 'image',
      title: 'Image',
      type: 'image',
      options: {
        hotspot: true,
      },
    }),
  ],
});

Links

import { defineField, defineType } from 'sanity';

export default defineType({
  name: 'linkComponent',
  title: 'Link Component',
  type: 'object',
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
    }),
    defineField({
      name: 'url',
      title: 'URL',
      type: 'url',
    }),
  ],
});

"This starter allows users to create a simple page. To customize the page, you can add new schemas under the 'of' array in the 'Main Component' field. This gives you the flexibility to define additional components according to your specific needs."

Contributor

Joshua Woods

Joshua a software/UX developer with a passion for creating websites and applications that focus on the human experience.

Dallas, Texas