Jamstack live preview tooling (a Next.js Conf reaction list)
Tags: webdev, jamstack, nextjs
Published: 2021-06-16 14:36:20

---
title: Jamstack live preview tooling (a Next.js Conf reaction list)
description:  "What's around in 2021"
published: true
date: 2021-06-15 16:00:00 UTC
tags: webdev,jamstack,nextjs
canonical_url: https://katiekodes.com/jamstack-live-previews/
---

Vercel announced [Next.js Live](https://nextjs.org/live), real-time previews with live collaborative editing at [Next.js conf](https://nextjs.org/conf).

This seemed like a good time to list all the options I’ve explored over the past year.

<!--more-->

## Next.js Live

The [landing page](https://nextjs.org/live) is hot pink, purple, and intense sky blue. Who cares about the product? Their landing page wins.

Okay, for real, I’m guessing this is a VSCode-based `localhost`-in-the-cloud product like I covered in “[Stackbit can teach you web development](https://dev.to/katiekodes/stackbit-can-teach-you-web-development-3blh),” and I’ll bet there are a lot more coming from a glut of companies. I wouldn’t be surprised if it’s **standard within a year** for Jamstack tooling.

_(Way to date my post and make it possibly age like milk.)_

The main value-add I’m seeing from the landing page is whatever front-end special sauce Vercel added to their preview renders for doodling on the preview.

![Screenshot of Next.js live doodling](https://nextjs.org/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fstatic%2Flive%2Fbrowser.f5aa736f88c19b45aa423f7b1c0ca58f.png&w=3840&q=75)

## Stackbit Studio

In April, [Stackbit added VSCode](https://www.stackbit.com/blog/vs-code-experience-to-stackbit-editor/) to a product whose bread and butter has always been a `localhost`-in-the-cloud product.

Stackbit’s value-add front-end special sauce, added to their preview renders, has, of course, always been the ability to type onto the page and edit content.

{% youtube NU7zHKSX-nU %}

They also did a nifty thing w/ the VSCode editor where you can click parts of the preview render and [jump to](https://dev.to/katiekodes/stackbit-can-teach-you-web-development-3blh) the line of [SSG](https://dev.to/katiekodes/what-is-a-static-site-generator-350o) code most directly responsible for it.

## Gatsby Cloud Preview

It’s been a while since I looked into Gatsby Cloud. They’ve changed their plans since I blogged about their preview-URLs-without-a-full-branch-rebuild feature, but when I did, one problem was that [the links weren’t stable](https://katiekodes.com/gatsby-sanity-deploy/#preview-urls-disappear), and that you didn’t really have another business reason to be in the tooling where you’d grab a fresh link the way you would in, say, a VSCode-editor interface like Next.js Live or Stackbit. I’d be really surprised if Gatsby _didn’t_ throw a VSCode embed into some sort of tool just to keep up with the Joneses against Next.js.

![Screencap of Gatsby Preview next to Sanity Studio](https://katiekodes.com/images/screenshots/screenshot-gatsby-sanity-2020-07/65-live-editing-animated.gif)

## Netlify Deploy Previews

I haven’t played w/ [Deploy Previews](https://www.netlify.com/products/deploy-previews/) … does anyone know if they’re live _(as in `localhost`-in-the-cloud, not “I’ll rebuild a preview site when you commit an update to a feature branch”)_ previews? Or if they’re just a comment-doodling system laid on top of feature-branch built sites?