The silent bug in every Sanity page builder—and how to fix it
Every Sanity marketing site ends up with a page builder: an array of sections, an insert menu, a render loop mapping block._type to a component. You’ve built it. I’ve built it. We’ve all built the same thing—and every one ships with the same bug. You add a new section, wire it into the schema, add a renderer, update the map, and adjust the GROQ projection. Then you forget one step. The section renders blank in production, or never shows up in the insert menu, or fetches no fields because the projection is missing. No error. No red. Just a blank space where content should be.
The hidden cost of “add a section”
In a typical Sanity + Next.js setup, “add a section” involves at least five touchpoints: schema definition, GROQ projection, React component, renderer map entry, and TypeScript union. Miss the GROQ projection and the block arrives empty. Skip the renderer map and it silently skips rendering. Update the union manually and TypeScript may shrug because the hand-maintained list is now out of sync. Three different failure modes, all quiet, all revealed only in production.
The real problem isn’t the bug—it’s the plumbing
Only the component is truly unique to your site—its spacing, tokens, and brand. The other four steps 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 nearly identical across every project you’ve built. Yet it lives in your repo, hand-rolled and drifting, for the fifth time.
Co-locate type, query, and render to stop the drift
The fix is to co-locate the section’s type, GROQ query, and renderer in a single declaration. Define each section as an object that includes its type name, projection fields, and component. Then derive both the render loop and the GROQ projection from the same list of sections. The combined projection is generated automatically, so the query can’t drift from the schema. Miss a field in the component and the error appears at build time, not in production. The pattern is the point; packages like @maciejtrzcinski/sanity-page-builder-core simply package the convenience.
Source: DEV Community. AI-assisted editorial synthesis — TechnoExpress.