"Error with color-list plugin in Next.js app: unknown mark type 'color'"

1 replies
Last updated: Jan 18, 2022
Help with color-list plugin please - unknown mark type "color", please specify a serializer for it in the
I have installed the color-list plugin and can see it in my Studio.
However when I run the Next.js app I get this error:

unknown mark type "color", please specify a serializer for it in the

here is my contentBlock.js schema
* This is the schema definition for the rich text fields used for
* for this blog studio. When you import it in schemas.js it can be
* reused in other parts of the studio with:
* {
* name: 'someName',
* title: 'Some title',
* type: 'blockContent'
* }
export default {
title: 'Block Content',
name: 'blockContent',
type: 'array',
of: [
title: 'Block',
type: 'block',
// Styles let you set what your user can mark up blocks with. These
// correspond with HTML tags, but you can set any title or value
// you want and decide how you want to deal with it where you want to
// use your content.
styles: [
{title: 'Normal', value: 'normal'},
{title: 'H1', value: 'h1'},
{title: 'H2', value: 'h2'},
{title: 'H3', value: 'h3'},
{title: 'H4', value: 'h4'},
{title: 'Quote', value: 'blockquote'},
lists: [{title: 'Bullet', value: 'bullet'}],
// Marks let you mark up inline text in the block editor.
marks: {
// Decorators usually describe a single property – e.g. a typographic
// preference or highlighting by editors.
decorators: [
{title: 'Strong', value: 'strong'},
{title: 'Emphasis', value: 'em'},
// Annotations can be any object structure – e.g. a link or a footnote.
annotations: [
title: 'URL',
name: 'link',
type: 'object',
fields: [
title: 'URL',
name: 'href',
type: 'url',
{name: 'color', title: 'Color', type: 'color'},
// You can add additional types here. Note that you can't use
// primitive types such as 'string' and 'number' in the same array
// as a block type.
type: 'image',
options: {hotspot: true},

I am a bit stuck. I googled and it is referencing "@sanity/block-content-to-react" but I have not touched this before and am a bit lost sorry.
Jan 17, 2022, 12:46 PM
Thanks for getting back to me.Got there in the end:

import BlockContent from '@sanity/block-content-to-react'

const color = (props) => {
  return <span style={{ color: props.mark.hex }}>{props.children}</span>

export default function SanityBlockContent({ blocks }) {

  return (

      <BlockContent blocks={blocks} serializers={{marks: {color}}} />
      <pre>{JSON.stringify(blocks, null, 2)}</pre>

Jan 18, 2022, 11:10 AM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?

Categorized in