Get help on Discord

Sanity CMS Preview with 11ty Serverless: Does it support real-time updates?

5 replies
Last updated: Dec 19, 2022
Does anyone know if the CMS preview works on 11ty using the Serverless plug-in and if so does it work “as you type”? I've seen a few references online where people mention it working but I've yet to find an actual example of how to do this. Trying to decide whether to convert an old Gatsby site to NextJS or 11ty and the instant preview is a requirement.
AI Update

I understand you're evaluating 11ty vs Next.js for your Gatsby site migration with "as you type" preview as a key requirement. Let me give you the straight answer about 11ty with Sanity.

The short version: While you can technically set up preview with 11ty using its Serverless plugin, you won't get true "as you type" real-time preview out of the box like you would with Next.js. The 11ty Serverless plugin is designed for on-demand rendering (like for dynamic routes), but it doesn't have the same built-in preview infrastructure that frameworks like Next.js provide.

Why 11ty is challenging for real-time preview:

The 11ty Serverless plugin is primarily built for on-demand page generation on platforms like Netlify, but it's not designed specifically for CMS preview workflows. You'd need to:

  1. Create a serverless function that rebuilds pages on-demand
  2. Set up a separate preview route that fetches draft content from Sanity
  3. Implement some kind of polling or webhook system to trigger rebuilds
  4. Handle authentication for draft content access

This is all possible, but you're essentially building a custom preview system from scratch. You won't get the smooth "as you type" experience without significant custom development.

Why Next.js gives you what you need:

Sanity has first-class support for Next.js with Live Preview and Visual Editing that gives you exactly the "as you type" experience you're looking for. The Presentation Tool provides:

  • True real-time updates as editors type, powered by Sanity's Live Content API
  • No manual refresh needed - changes appear instantly in the preview iframe
  • Click-to-edit overlays - editors can click elements in the preview to jump to the right field
  • Built-in draft handling - automatic access to unpublished content

The setup is well-documented, supported, and works with both Next.js App Router and Pages Router.

My recommendation:

If instant preview is a hard requirement (and it sounds like it is), go with Next.js. You'll save yourself weeks of custom development trying to recreate what already exists. The Sanity + Next.js integration is battle-tested and gives you the exact "as you type" experience you need.

If you have other reasons for preferring 11ty (like static-first architecture or build simplicity), you could potentially use 11ty for your production builds and Next.js just for the preview environment, but that adds complexity.

The reality is that 11ty is an excellent static site generator, but it's not designed for the kind of real-time preview workflows that modern headless CMS setups require. Next.js (or Remix, Nuxt, SvelteKit) will give you a much better experience for this use case.

Show original thread
5 replies
I've been investigating this myself.• You
can do 11ty previews using Serverless in Sanity. • The most basic version is to just load the serverless page in an iFrame.
• The iFrame can be reloaded manually (clunky); or every time Sanity autosaves new data (better but not great).
• You can't do as you type changes easily as your templates would need away of connecting to the API and updating themselves without a page reload.

Other possible options for getting live updates (as you type) to work:• Run a v2.0 dev server in the cloud and using it's DOM diffing feature to update the page as the API data changes.
• Have code within your (serverless) templates that enable elements on the page to update their own DOM when the data changes. Then use something like
https://www.sanity.io/docs/js-client#listening-to-queries to update that data.
I created a little 11ty demo here which does half of what you need.If you visit 
/post-1/
you get the prebuilt page, if you visit 
/preview/post-1/
you get the serverless version of the page. The serverless version would update with the latest updates from the API and hence you get a (nearly) live preview. You can use https://www.sanity.io/plugins/iframe-pane to display it in your studio.---
Currently the data in this project is just stubbed out and not fetching from Sanity directly, but I assume you know how to write a GROQ query to fetch it.
---
You have to be careful to translate your GROQ query result in to the format that 11ty expects. For instance returning a list of post from Sanity would likely be in an Array. But for the serverless pagination to work, the posts need to be in an object.
This is all a terrible explanation. Sorry.I should probably write a blog post.
Thanks Darrell. That’s really helpful. Let me know if you end up doing a blog post but this is enough for me to evaluate if it’s going to be good enough for the current admins updating the site.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?