Roboto Studio
The Sanity & Next.js experts
Roboto is located at London
Portable Text Mock Content
If you're looking to mockup portable text in Storybook without a Sanity backend, this is the schema you're looking for
Example of long-form portable text
[
{
"style": "h1",
"_key": "29f9dbb23fb2",
"markDefs": [],
"children": [
{
"_type": "span",
"marks": [],
"text": "Heading 1: The Quick Brown Fox",
"_key": "8265eebd35020"
}
],
"_type": "block"
},
{
"_key": "dd1fc094160b",
"markDefs": [],
"children": [
{
"_type": "span",
"marks": [
"em"
],
"text": "The quick brown fox",
"_key": "0908efdd99b50"
},
{
"_type": "span",
"marks": [],
"text": " jumps over the lazy dog. This fox, unlike any other, was quick and nimble. Known for its agility, it's become a legend in the animal kingdom. No dog, no matter how lazy or energetic, could catch this exceptional creature.",
"_key": "0908efdd99b51"
}
],
"_type": "block",
"style": "normal"
},
{
"style": "normal",
"_key": "6857aa85327d",
"listItem": "number",
"markDefs": [],
"children": [
{
"text": "Agility",
"_key": "ebf00b3675970",
"_type": "span",
"marks": []
}
],
"level": 1,
"_type": "block"
},
{
"listItem": "number",
"markDefs": [],
"children": [
{
"_type": "span",
"marks": [],
"text": "Speed",
"_key": "a0b5d9c6c2f80"
}
],
"level": 1,
"_type": "block",
"style": "normal",
"_key": "cbc48a46640b"
},
{
"markDefs": [],
"children": [
{
"_type": "span",
"marks": [],
"text": "Cunning",
"_key": "646207e0b57c0"
}
],
"level": 1,
"_type": "block",
"style": "normal",
"_key": "6217aa5155ef",
"listItem": "number"
},
{
"markDefs": [],
"children": [
{
"_type": "span",
"marks": [],
"text": "Heading 2: Why the Fox Jumps",
"_key": "9d7b10d8f0320"
}
],
"_type": "block",
"style": "h2",
"_key": "5c827927e96d"
},
{
"_key": "c6e8053f2e1e",
"markDefs": [],
"children": [
{
"_type": "span",
"marks": [],
"text": "The fox ",
"_key": "13ea411a043f0"
},
{
"_type": "span",
"marks": [
"strong"
],
"text": "jumps",
"_key": "13ea411a043f1"
},
{
"_key": "13ea411a043f2",
"_type": "span",
"marks": [],
"text": " not only for joy but also for survival. In a forest teeming with predators and obstacles, agility is key. This brown fox has developed a technique that makes it almost untouchable. Old techniques are now obsolete."
}
],
"_type": "block",
"style": "normal"
},
{
"_key": "5bae8a78ef1a",
"listItem": "bullet",
"markDefs": [],
"children": [
{
"_type": "span",
"marks": [],
"text": "Survival Instinct",
"_key": "62f68e3225370"
}
],
"level": 1,
"_type": "block",
"style": "normal"
},
{
"style": "normal",
"_key": "cb5d65bd358d",
"listItem": "bullet",
"markDefs": [],
"children": [
{
"marks": [],
"text": "Quick Reflexes",
"_key": "f07b211a84ff0",
"_type": "span"
}
],
"level": 1,
"_type": "block"
},
{
"children": [
{
"_type": "span",
"marks": [],
"text": "Forest Navigation",
"_key": "a025130989310"
}
],
"level": 1,
"_type": "block",
"style": "normal",
"_key": "1e9f6fee0881",
"listItem": "bullet",
"markDefs": []
},
{
"style": "h3",
"_key": "7047d4630373",
"markDefs": [],
"children": [
{
"text": "Heading 3: The Lazy Dog's Perspective",
"_key": "b2b3cbd785820",
"_type": "span",
"marks": []
}
],
"_type": "block"
},
{
"_key": "ea85b1d0c229",
"markDefs": [],
"children": [
{
"marks": [],
"text": "From the dog's viewpoint, the jumping fox is a puzzle. Despite many attempts to catch the fox, the dog ends up tired and defeated. Yet, it admires the fox's agility and wonders if it could ever keep up. The dog's goals are ",
"_key": "b1dc940b8c190",
"_type": "span"
},
{
"_key": "b1dc940b8c191",
"_type": "span",
"marks": [
"strong"
],
"text": "underlined"
},
{
"_key": "b1dc940b8c192",
"_type": "span",
"marks": [],
"text": " by its failures."
}
],
"_type": "block",
"style": "normal"
},
{
"markDefs": [],
"children": [
{
"text": "Heading 4: The Forest Environment",
"_key": "2bbbfafb4a070",
"_type": "span",
"marks": []
}
],
"_type": "block",
"style": "h4",
"_key": "6573b2d276f5"
},
{
"children": [
{
"_type": "span",
"marks": [],
"text": "The forest is the arena for this daily chase. With its complex terrain, it offers the perfect backdrop for the fox's acrobatic displays. It's also home to other animals that occasionally join in on the action.",
"_key": "418b206efe4b0"
}
],
"_type": "block",
"style": "normal",
"_key": "4196876de9d3",
"markDefs": []
},
{
"style": "h5",
"_key": "62d457f7506c",
"markDefs": [],
"children": [
{
"_type": "span",
"marks": [],
"text": "Heading 5: The Chase Continues",
"_key": "27ead75dff6f0"
}
],
"_type": "block"
},
{
"style": "normal",
"_key": "f3d6cc410056",
"markDefs": [],
"children": [
{
"_type": "span",
"marks": [],
"text": "The chase is an ongoing saga. Each day, as the sun rises, the fox prepares for another adventure. And each day, the lazy dog contemplates whether to join the chase or continue its laid-back lifestyle.",
"_key": "3bd5da6bde330"
}
],
"_type": "block"
},
{
"children": [
{
"text": "Heading 6: A Never-Ending Story",
"_key": "2a144d97ce3c0",
"_type": "span",
"marks": []
}
],
"_type": "block",
"style": "h6",
"_key": "2bf0ec69722a",
"markDefs": []
},
{
"_type": "block",
"style": "normal",
"_key": "e8ff3adb21f1",
"markDefs": [],
"children": [
{
"_type": "span",
"marks": [],
"text": "In the grand scheme of things, the fox and the dog are part of an eternal dance. A dance that will continue for generations to come, reminding us of the beauty and complexity of nature itself.",
"_key": "1cb5f82dd7d30"
}
]
}
]Example of short-form portable text
[
{
"children": [
{
"_type": "span",
"marks": [],
"text": "This is ",
"_key": "ed2730102aae0"
},
{
"_type": "span",
"marks": [
"em"
],
"text": "my",
"_key": "c9ceeeb1ced2"
},
{
"_type": "span",
"marks": [],
"text": " ",
"_key": "0a3d1cecdbe4"
},
{
"marks": [
"strong"
],
"text": "Portable Text",
"_key": "8c89525da353",
"_type": "span"
},
{
"marks": [],
"text": ". There are many like it, but this one is mine. My Portable Text is my best friend. It is ",
"_key": "f2dbf182ea47",
"_type": "span"
},
{
"marks": [
"strong"
],
"text": "my life",
"_key": "f66e6364fae1",
"_type": "span"
},
{
"_type": "span",
"marks": [],
"text": ". I must master it as I must master my life. Without me, my Portable Text is useless. Without my Portable Text, I am useless. I must format my Portable Text ",
"_key": "431d4fc98edd"
},
{
"_type": "span",
"marks": [
"em"
],
"text": "true",
"_key": "4a856762b4f9"
},
{
"_type": "span",
"marks": [],
"text": ". I must write better than the competition who is trying to outpace me. I must outclass them before they outclass me. I will. ",
"_key": "96f73b5fcb1a"
},
{
"_type": "span",
"marks": [
"strong"
],
"text": "My Portable Text",
"_key": "abd421921950"
},
{
"text": " and I know that what counts in web development is not the tags we write, the noise of our commits, or the hype we make. We know that it's the content that counts. We will deliver.",
"_key": "05f171cb1c12",
"_type": "span",
"marks": []
}
],
"_type": "block",
"style": "normal",
"_key": "2dc7fbf7b5a8",
"markDefs": []
}
]When building Storybook components in isolation, we've always been stuck with what to do with portable text inside of components.
It's fairly simple if you're using a tool like Tailwind CSS with prose, but you may want to tune your typography granularly in other circumstances.
Above there are two versions
- Long-form
- This is used for something like a blog, feel free to take any part of it out, and swap it around. It includes all different heading styles from <h1> to <h6>, and includes bold, italics, unordered list and ordered list.
- Short-form
- This is what you would use for an example of portable text within a hero, or image + text block.
Contributors
Jono Alford
Founder @ Roboto Studio - The Sanity & Next.js experts
Jono is located at London
Hrithik Prasad
Sr. Full Stack Developer at Roboto Studio
Hrithik is located at India
Other schemas by authors
Cursor Prompt
Thinking about getting started with AI? Well we're just going to share our latest and greatest prompt so you don't have to do the hard work
Sanity & Formspark Form Generator
On the fly form generation with Sanity & Formspark
GROQ Readability Helper 🤓
Less is more - We're breaking down some of the core helpers we use when building our websites
The best Next.js & Sanity <Image/> Component
Okay, well it might be at least in the top 3. Using getDimensions and optimising the hell out of your images, check out this snippet