DEV Community: Maciej Trzciński 🌱🇵🇱

Every Sanity page builder has the same bug

Maciej Trzciński 🌱🇵🇱 — Mon, 29 Jun 2026 15:47:38 +0000

Every Sanity marketing site ends up with a page builder. An array of sections, an insert menu, a render loop that maps block._type to a component. You've built it. I've built it. We've all built the same thing.

And every one of them ships with the same bug.

You add a new section. You wire it into the schema. You add a renderer. You add a component. You add the type. And then — because there are five places to touch and you're a human — you forget one. The section renders blank in production. Or it never shows up in the insert menu. Or it fetches no fields because you missed the GROQ projection, so it renders as nothing at all. No error. No red. Just a hole on the page where a section should be.

The annoying part isn't the bug. It's that you'll hit it again on the next project, in exactly the same way, because you rewrote the whole thing from scratch — again.

The section tax

Here's what "add a section" actually costs in a typical Sanity + Next.js page builder:

Schema — a new *Section object type, registered in your schema index.
GROQ — a new conditional in the page-builder projection so the block's fields actually come down.
Component — the React component that renders it.
Renderer map — an entry mapping _type → component.
Types — the block variant in whatever union your frontend renders.

Miss #2 and the block arrives empty. Miss #4 and it silently skips. Miss #5 and TypeScript shrugs because your union is hand-maintained and now lies. Three different failure modes, all of them quiet, all of them "works on my machine until it doesn't."

Now look at those five places and ask: which of them is actually unique to your site?

The component is. It's welded to your design system — your spacing, your tokens, your brand. Nobody can reuse it and nobody should.

The other four are plumbing. "Look up _type in a map, call the renderer, keep the map in sync with the schema and the query." That code is byte-for-byte the same idea on every project you've ever built. So why is it living in your repo, hand-rolled, drifting, for the fifth time?

Extract the plumbing, keep the sections

The split that works: your sections stay yours, and the generic dispatcher becomes a dependency you don't think about. That's the whole bet behind the two packages I pulled out of doing this one too many times — @maciejtrzcinski/sanity-page-builder-core (frontend) and @maciejtrzcinski/sanity-plugin-section-builder (Studio).

But forget the packages for a second — the pattern is the point. They're just the convenient version of it.

One source of truth per section

The drift happens because a section's type, its GROQ query, and its render live in three different files. Co-locate them and they can't drift:

const defineSection = createSectionFactory<PageBuilderBlock, RenderContext, ReactNode>()

const hero = defineSection({
  type: 'heroSection',
  query: `title, subtitle, ctaHref`,
  render: (block) => <Hero {...block} />,
})

Type, query, renderer — in one object. Now you can't add a renderer and forget the projection, because they're the same declaration.

Build the render loop and the GROQ from the same list

const pb = createPageBuilderFromSections([hero, /* … */], { strict: true })

pb.renderBlock   // dispatch a block to its renderer
pb.query         // `_type == "heroSection" => { title, subtitle, ctaHref }, …`

The combined GROQ projection is derived from your sections, not typed out by hand next to them. The thing that used to silently fall out of sync is now generated from the same source as the renderers. That's the entire class of "section renders blank because I forgot the query" — gone.

strict: true means a block whose _type has no renderer throws instead of silently skipping. Forgetting to register a section becomes loud.

Make the compiler enforce parity

The dispatcher is generic over your block union, so the renderer map is a mapped type over block._type. The compiler enforces exactly one correctly-typed renderer per variant — each renderer receives the narrowed block, no casts. Add a section to the union, forget its renderer, and the build goes red before you ever ship the blank.

And for the parts a type system can't see (the registered schema types, the runtime GROQ string), there's one assertion you drop in a test:

assertPageBuilderIntegrity({ renderers, registeredTypes, query: pageBuilderFields })

It fails loudly the moment your renderer map, your registered sections, and your projection drift apart. The five-places bug becomes a failing test in CI instead of a hole on a live page.

The core is dependency-free, by the way — the node type is a generic parameter, so it doesn't drag React or Sanity in. You can read the whole thing in one sitting. That's deliberate: it's plumbing, it should be boring and small.

The other half: a Studio that doesn't suck to use

The render loop is the frontend. The other recurring tax is the Studio side — the insert menu that's just a list of type names, and the components: { preview: … } block you copy-paste into every single section schema so editors get a thumbnail.

The plugin attaches previews globally and auto-detects your sections:

// sanity.config.ts
plugins: [sectionBuilder(SECTIONS)]

// your page document
fields: [sectionField(SECTIONS, { group: 'content' })]

Drop in a *Section type and it's picked up automatically. Previews resolve by filename convention — name a section heroSection, drop hero-section.png in your previews folder, and it shows up in the array editor, the edit pane, and the native insert-menu grid. No per-schema wiring, no hand-maintained map. Your editors get a visual grid; you delete code.

The shape, end to end

Two sources of truth — the section list on each side — and the packages do the wiring between them:

Studio
  sectionBuilder(SECTIONS)   → thumbnails everywhere
  sectionField(SECTIONS)     → the page-builder array + insert grid

Frontend
  defineSection({ type, query, render }) × N
  createPageBuilderFromSections(...)  → renderBlock + combined GROQ

I put a full working version up so you don't have to take my word for it: a minimal Next.js + Sanity app, five sections (Hero, Feature Cards, Quote, FAQ, CTA Banner), a /[...slug] catch-all route, plus the stuff every real marketing site needs anyway — CMS-driven SEO metadata, Open Graph, JSON-LD, sitemap/robots, ISR + Live caching, and a revalidation webhook. Clone it, pnpm seed, and you've got a page builder running in a few minutes.

→ github.com/maciejtrzcinski/sanity-page-builder-example

The point

You're going to build a page builder on your next Sanity marketing site. You already know how — that's the problem. Knowing how means rewriting the same drift-prone plumbing for the fifth time and re-discovering the same silent bug.

Keep your sections. They're the part that's actually yours. Let the boring dispatcher be a dependency that fails loudly when you forget a wire, instead of a hand-rolled thing that fails quietly in front of a client.

If you try it, tell me where it breaks — issues and PRs welcome, and a star helps other people find it.

Store text inside variables instead of inline.

Maciej Trzciński 🌱🇵🇱 — Mon, 29 Nov 2021 09:37:59 +0000

Why does text stored inside variables give you flexibility and control?

Before I wrote this article, I’ve tried a couple of times to write down my thoughts. Let me explain first what I called inline:

<CopyText.Heading tag="h2">
  Lorem Ipsum dolores set.
</CopyText.Heading>

This example showed you what I meant as an inline text.

Let’s go straight forward to the point:
When you are a programmer, and you have been writing the code. One of the most important parts is clarity of your own code. The clarity sometimes defines if you’re engaged.

I wrote some rules how our code could be more efficient by using vars instead of pure text.

Firstly, when you got the message from the marketing team with new needs, you as a programmer gonna replace the text manually. Trust me, it isn’t easy to find text covered by components. Since I have been using const instead of inline text, my life become easier.

const title = `Title`;
const description = `Description`;

// component 
<Component>
  <Title>{title}</Title>
  <Description>{description}</Description>
</Component>

Secondly, client or even you during the project lifecycle can decide to use API to manage the page. When you got all text stored inside variables, the change is easy-peasy to the implementation.

// old variables
const title = `Title`;
const description = `Description`;

// new API
const { title, description } = API();

// component 
<Component>
  <Title>{title}</Title>
  <Description>{description}</Description>
</Component>

Thirdly, in some cases, the structure requires displaying column of the same components with different content. It’s easier to use map and display each component in simple way, than copying one by one - this solution reduce code and complexity.

const data = [
  {
    title: `Title`,
    description: 'Description',
  },
  {
    title: `Title`,
    description: `Description`,
  },
  {
    title: `Title`,
    description: `Description`,
  },
];

// component 
<Parent>
  {data.map(({ title, description}) => (
    <Component>
      <Title>{title}</Title>
      <Description>{description}</Description>
    </Component>
  ))}
</Parent>

Key takeaways:

const variable is easier to find and replace
const variable reduce complexity of components

4 amazing web tools for prototyping.

Maciej Trzciński 🌱🇵🇱 — Thu, 20 May 2021 12:00:32 +0000

Today I'm going to show you 4 amazing tools to save you time when you prototyping.

1. Placeholder.com

This is amazing placeholder tool for images. You can generate what size you want, color, format and text content🤳🏼.

Example:

If you visit this URL https://via.placeholder.com/728x90.png/0000FF/FFFFFF?text=Hello,+How+are+you?, you receive exactly the same image.

Please go to the Placeholder.com and look at the documentation.

2. iHateRegex

There are two types of people, who are familiar with Regex and who aren't.

99% of programmers aren't familiar in 100%, for me this page is really helpful on daily programming.

3. {JSON} Placeholder

This a great tool when you don't have API, and you want to test some part of code, or you are just learning and you don't want to write your own backend.

Example:


fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

Output:


{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

4. ngrok

Another great tool is ngrok, where using one command you can preview your work.

Example of usage:

ngrok http 80

Cover photo by Nick Fewings on Unsplash

Have you heard of the download html attribute?

Maciej Trzciński 🌱🇵🇱 — Thu, 11 Feb 2021 11:30:45 +0000

The download attribute specifies that the target will be downloaded after a user clicks.
Also, when you set value to download, the file after download will have this name, in my particular example the file will named Awesome-Company.pdf after download.

/**
*  download - this is information for breowser that the link will download file
*  value - here you can set name for file
**/
<a href="/uploads/company-info.pdf" download="Awesome-Company" />

If you like this article, follow me on Twitter @MaciejDEV

HTML autocomplete "one-time-code".

Maciej Trzciński 🌱🇵🇱 — Wed, 10 Feb 2021 15:54:06 +0000

Using only html autocomplete (autocomplete="one-time-code") you can autofill inputs using security codes sent by SMS providers.

<input
  type="text"
  name="auth-token"
  inputmode="numeric"
  pattern="[0-9]*"
  autocomplete="one-time-code"
/>

If you like this article, follow me on Twitter @MaciejDEV

Do you have some kind of Pull Request Score in your company?

Maciej Trzciński 🌱🇵🇱 — Sun, 20 Dec 2020 13:25:13 +0000

I meant some kind of score, how good is your PR (how many bugs have)

For example:

Reviewer found 3 bugs in PR, then PR author lose 3 points from overall score. (Like motivation system)

Common JavaScript Tips

Maciej Trzciński 🌱🇵🇱 — Sat, 19 Dec 2020 16:09:12 +0000

Bellow, I will explain you some popular JavaScript mistakes

Use const/let instead of var

Replace old fashioned var with new const, that will guarantee you better condition of your code.

// bad

var a = ‘foo’

var b = ‘bar’

// good

const a = ‘foo’

const b = ‘bar’

If you really need to change variable use let, it’s like var but let has block range, var has functional range.

What is block variable?

Block variable you can read only in defined block of code where was defined.


for(let i = 0; i < 10; i++) { 

  let j = 10

  console.log(j)

  //variable j range

}

console.log(j) //ReferenceError: i is not defined

Functional variable you can read inside whole function not only in the code block.


for(let i = 0; i < 10; i++) { 

  var j = 10

  console.log(j) // 10

}

console.log(j) //10

Both let and const are in block range.

Use Template Literals

Manually joining string with + it’s terrible, it’s bad for refactoring and code readability. The best way for joining words is Template Literals.

If you earlier joined words like that, read this chapter.

const name = ‘Maciej’

console.log(‘Hello ‘+ name + ‘, wave’)

Now I’ll compare the old method with Template Literals.

const name = ‘Maciej’

console.log(`Hello ${name}, wave`)

It’s more clear, right?

In Template Literals you can easily add new lines with only just enter button.

const name = ‘Maciej’

console.log(`Hello ${name}

,wave`)

Copy array with spread operator

I think every one of us sometimes must copy the array, but only half of us know about spread operator.

const array = [1,2,3,4,5]

//bad

const newArray = []

for(let i = 0; i < array.length; i++){

  newArray[i] = array[i]

}

//good

const newArray = [...array]

Reference on MDN

Conditional operators

Every one of us sometimes must or want to use conditional operators from some reasons, sometimes you want to save a couple of lines or make the code cleaner.

const a = 0

let b = 0

!a ? b = 1 : b = 2

Like you see on the above snippet, this is not perfect code it's looks weird.

Below you will see easier way.

b = !a ? 1 : 2

Tadam! Looks better, right?

Thanks for reading 🙏

Changelog:

07/22/2020

Added:

Use const/let instead of var
Use Template Literals
Copy array with spread operator
Conditional operator

If you like this article, please follow me on Twitter @MaciejDEV

Photo by NeONBRAND on Unsplash

100vh problem with iOS Safari

Maciej Trzciński 🌱🇵🇱 — Sun, 13 Dec 2020 11:19:03 +0000

The web content it's outside the viewport although we used 100vh (the red opacity box with 100vh text).

.section {
    height: 100vh; // bad approach 
}

The problem you have been receiving after adding the height: 100vh to mobile resolutions. It happens due to the calculation method which Safari and Chrome are using. Mobile devices calc browser viewport as (top bar + document + bottom bar) = 100vh. I had a hard time with 100vh when the page have to have a section filled the whole screen. After a couple of hours, I've found the solutions that I show you.

They are two solutions, the first needs JavaScript and CSS, the second solution required only CSS.

1. JS & CSS solution

Let’s get started first with the JS file:

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

appHeight function has sets new style property var(--app-height) including current window height, --app-height it is necessary for next steps.

:root {
   --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    height: var(--app-height);
}

In the previous step I've created the reference --app-height, wrapping in the var() I've received CSS variable var(--app-height). This variable is allowed to read values created by JS.

2. CSS solution (not recommend)

The last, but not the least solution is --webkit-fill-available, this solution works only on Apple devices, it won't solve the problem on Android devices. I don't recommend this solution, but it's worth showing.

height: 100%;
height: -webkit-fill-available;

Thank you for your attention! I’ll appreciate your feedback.

If you like this article, follow me on Twitter @MaciejDEV

How to sort an array of strings with non-latin letters?

Maciej Trzciński 🌱🇵🇱 — Sat, 12 Dec 2020 13:28:36 +0000

JavaScript has a native sort method, you can do it with array.sort(), it will sort the array alphabetically. Also, you can provide your custom sorting functionality.

But if you want to order an array of non-ASCII character like [‘ą’, ‘ę’, ‘ó’, ‘ż’, ‘ź’, ‘e’], you will receive a [“e”, “ó”, “ą”, “ę”, “ź”, “ż”]. That happened because sort function works only with the English alphabet.

Fortunately, there are two ways to overcome this behavior localeCompare and Intl.Collator provided by ECMAScript Internationalization API.

Using `localeCompare()`

Using `Intl.Collator()`

So when you are working with arrays of strings in a language different from English, remember to use these methods to avoid unexpected sorting.

Thank you for your time!

Why Object.is() is better than ‘==’ and ‘===’ ?

Maciej Trzciński 🌱🇵🇱 — Sat, 12 Dec 2020 13:22:47 +0000

Everybody who used JavaScript knows that JS is loosely typed and comparing with ‘==’ gives unexpected results.

So if we use triple equals operator ‘===’, we got a more strict result, but it is also not yet perfect:

For help us in this case we use ES6 ‘Object.is()’, it is more precision than ‘===’ and moreover it behaves well in some special cases:

Compare table:

Polyfill:

If you like this article, follow me on Twitter @MaciejDEV

Why you should motivate your Pull Request?

Maciej Trzciński 🌱🇵🇱 — Sat, 12 Dec 2020 13:14:08 +0000

Every programmer uses GitHub or another Git repository, If you didn’t use Git repository, read about it. A good PR description is a clue in communication. You don’t want to spend a couple of hours at PR for only understanding your colleague code. Another good example is when you back to the issue after a few days or weeks, this description will let you back to your work in a few minutes, not hours.
Here it’s my recommendation for the PR description.

## Description
This PR will resolve nested lists compiled from markdown. Solution description
## Solution description
In the HtmlRender component I imported a new component `List` where I implemented methods and CSS for the nested list, in the past, we did not have any implementation for List. I discussed with our Designer [here it’s the link for this conversation] and we added square dots for the list, and small numbers for the ordered list. In the List component, I created two methods: one for unordered lists named unorderedList and orderedList for ordered lists.
## Jira ticket
https://[team].atlassian.net/jira/software/projects/[project]/boards/selectedIssue=[issue]
## Did you test this issue on all browsers?
[x] Chrome
[x] FireFox
[x] Edge
[x] Safari
[x] Mobile Safari/Chrome
[x] Tablet Safari/Chrome

Description

At this place, the author of Pull Request should describe in a few words problem, what an author wants to resolve in this PR. You should type max 2/3 paragraphs. It must be short but valuable. It’s no place for essays, reviewers, another colleague or you must easily understand what did you want to resolve here.
For example:

This PR will resolve nested lists compiled from markdown.Solution description

Solution description

This is a place where you should describe your steps, what you added, changed, or removed. Solution description is like a journal where you will describe your steps or explain your idea.
Example:

In the HtmlRender component I imported a new component `List` where I implemented methods and CSS for the nested list. In the past, we did not have any implementation for List. I discussed with our Designer [here it’s the link for this conversation] and we added square dots for the list, and small numbers for the ordered list. In the List component, I created two methods: one for unordered lists named unorderedList and orderedList for ordered lists.

Jira ticket

Here add a link to the ticket, if you don’t have Jira add to another one service.

Did you test this issue on all browsers?

This is a place for a checklist. If you don’t test on the web, add another list.

Thank you for your attention! I’ll appreciate your feedback.

DEV Community: Maciej Trzciński 🌱🇵🇱

Every Sanity page builder has the same bug

The section tax

Extract the plumbing, keep the sections

One source of truth per section

Build the render loop and the GROQ from the same list

Make the compiler enforce parity

The other half: a Studio that doesn't suck to use

The shape, end to end

The point

Store text inside variables instead of inline.

4 amazing web tools for prototyping.

1. Placeholder.com

2. iHateRegex

3. {JSON} Placeholder

4. ngrok

Have you heard of the download html attribute?

HTML autocomplete "one-time-code".

Do you have some kind of Pull Request Score in your company?

Common JavaScript Tips

Use const/let instead of var

Use Template Literals

Copy array with spread operator

Conditional operators

100vh problem with iOS Safari

1. JS & CSS solution

2. CSS solution (not recommend)

How to sort an array of strings with non-latin letters?

Using localeCompare()

Using Intl.Collator()

Why Object.is() is better than ‘==’ and ‘===’ ?

Compare table:

Polyfill:

Why you should motivate your Pull Request?

Description

Solution description

Jira ticket

Did you test this issue on all browsers?

Using `localeCompare()`

Using `Intl.Collator()`