Watch a live product demo 👀 See how Sanity powers richer commerce experiences

Explainer Needed: What is a Mark, Decorator and Serializer?

2 replies
Last updated: Apr 2, 2021
Hello, I don't understand the following concepts? Can someone please explain?
1. What is a mark/custom mark?
2. What is a decorator? Where is a decorator used and what is it's purpose?
3. What is the difference between a mark and a decorator?
4. What is a serializer? What is the purpose of a serializer?
5. Do I have to write a serializer everytime I add a new decorator? If yes, then how do I write that serializer?
6. Let's say I have a component called OnePost.js where I render a single blog post. In the blog post body I have a code block and also some highlighted text. As far as I understand, I have to write two serializers? How do I write two serializers?
Apr 2, 2021, 4:18 PM
Of course!
1.
mark/custom mark is how you are definitely a custom decorator (see what a decorator is in #2). This usually is adding an emphasis, or strong to your text. So making it either italic or bold). They can also be made custom. See more on that in #2. 2. A decorator is styling your text. For example: making it
strong. Taking it a step further, you can customize those decorators and style it to look like code or highlighted. Be sure to look at the example code here under Decorators.3. The difference between the two is a mark is any type of decorator or functionality you can give to text. A decorator is defining that style you want to give in the mark. I’m going to walk through the code
here under Properties. If you look, you’ll see “cbe9d12c6af9” under children --> in the 3rd span. If you scroll down, you’ll see
markDefs
. And you’ll see “cbe9d12c6af9" again. Those are linking the span and the markDefs together. And then the markDefs has an
href
with a link. So now that span linking to that markDefs with the link makes that text in the span, clickable, and linking to that particular link. The text that is linked is “annotated” and you’ll see that all within the 3rd span.4. A serializer is where the content is pulled from lots of “blocks” and make into a more readable format. For example. In that code we were just looking over, we have 4 spans with 4 “text” spots. So those 4 blocks of content are smashed together to make it readable for the user. So those four would say this: “I am strong and annotated” with a bold on strong and a link on annotated.
5. The decorator is for the span, the serializer takes all the spans and makes them one. So no, only one serializer for your content. But depending on how you want your content “serialized” is which package you use. For example,
block-content-to-react
is the Serializer for taking your blocks of spans, making them readable, and pushing to a React frontend. You’ll see the helpers here for different ways to serializes your data.6. You’ll only need one serializer for that. If all the content (text, images, highlighted text, and code block) all live in the same rich text editor. The rich text editor is where the blog post content would live, meaning the code blocks and such.
Apr 2, 2021, 7:37 PM
After writing all these answers down, I have decided I’m going to write a blog post on this content. I’m going to take these questions you asked, write it up, and share it with the community. That way, others who have these same questions can find the answers. We really appreciate you asking! I will also make sure to share the blog post with you. I will have specific code blocks and examples in it. That will help even further in understanding.
Apr 2, 2021, 7:39 PM

Sanity– build remarkable experiences at scale

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

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
- Template

Official(made by Sanity team)

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen
Go to Clean Next.js + Sanity app

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing