Skip to main content
Our docs redesign is live!
react.svg

Kickstart React

•
5 min read
react

If you want the simplest possible Contentstack integration in a React app, this kickstart is a strong place to begin.

The React kickstart is a small Vite app that already has the Contentstack Delivery SDK, Live Preview, and Visual Builder support wired in. That makes it useful for developers who want to understand the integration without also having to sort out framework-specific backend behavior.

This page is a practical developer guide based on the repository itself, not a replacement for official docs. The value here is understanding how the project is structured and what patterns you can reuse in your own app.

What a kickstart is

A kickstart is the smallest useful project that connects a frontend framework to Contentstack. It is intentionally light on abstraction, so the important parts stay visible:

  • SDK setup
  • content fetching
  • preview configuration
  • editable field bindings for Visual Builder

That is the main reason to use one. You are learning from a working integration without having to dig through a larger application first.

Why start with the React kickstart

This kickstart is a good fit when you want to:

  • learn the core Contentstack flow in a plain React setup
  • start from Vite instead of a heavier framework stack
  • understand Live Preview without also handling server-rendering concerns
  • grow a small React app from a minimal but correct baseline

If you want the most direct “React plus Contentstack” example in this set, this is probably it.

What you get out of the box

The current contentstack/kickstart-react repository includes:

  • React 19
  • Vite
  • a single contentstack helper module
  • Live Preview support
  • Visual Builder editable field bindings
  • a seeded page content type with a sample homepage
  • a simple page renderer with rich text, images, and modular blocks

In practice, that means you can seed a stack, add your environment variables, run the app, and see Contentstack content rendered locally almost immediately.

How this specific kickstart works

1. src/lib/contentstack.ts owns the integration setup

This file does most of the important work:

  • creates the Contentstack Delivery SDK stack
  • maps region-aware delivery and preview endpoints
  • enables preview when VITE_CONTENTSTACK_PREVIEW=true
  • initializes the Live Preview utility with ssr: false
  • exposes a getPage(url) helper that fetches a page entry by URL

If you want the fastest mental model of the app, start here.

2. src/App.tsx keeps the page loop very small

The main React component holds the current page entry in state and wires a getContent() function around the homepage query.

It then initializes Live Preview and subscribes to ContentstackLivePreview.onEntryChange(...), so content edits trigger a refresh of the page data.

That makes this version feel immediate while you are editing. It is the client-refresh pattern in a very compact form.

3. The rendered content model is intentionally simple

The page renders the same core pieces you have now seen in other kickstarts:

  • title
  • description
  • hero image
  • rich text
  • modular blocks with alternating layouts

That is deliberate. The project is trying to teach the integration pattern, not hide it inside a design system.

The important preview nuance

This kickstart initializes Live Preview with ssr: false.

That matters because it tells you how preview updates happen:

  • Contentstack sends a change event
  • the Live Preview SDK receives it in the browser
  • the app re-fetches the content
  • the UI updates without a full page reload

That makes this kickstart especially good for learning the basic preview loop in a client-first app.

What you are really learning from this project

Even though the app is small, it teaches a few solid patterns:

  • keep the SDK setup in one file
  • query content by URL instead of hardcoding entry IDs into the component tree
  • let the preview system re-fetch content through a small callback
  • bind editable tags directly onto rendered elements

That makes the repo a useful baseline if you want to turn a simple React app into a Contentstack-powered site without adding a lot of architecture up front.

When to choose this one

Choose the React kickstart when:

  • you want the clearest client-side Contentstack example in React
  • you prefer Vite over a framework with built-in routing or SSR
  • you want a very small codebase you can fully understand quickly
  • you want the editor experience to update in place without page reloads

If you need server-aware preview flows or SSR-style rendering, one of the SSR-oriented kickstarts will be a better comparison point.

Fastest way to try it

The shortest path is:

  1. Clone the repo.
  2. Seed or reuse the kickstart stack.
  3. Create a delivery token with preview enabled.
  4. Add the Contentstack values to .env.
  5. Enable Live Preview for the same environment.
  6. Run npm install and npm run dev.

Once it is running, open the homepage locally and then open the matching entry in Contentstack. That is where the project starts to make sense quickly.

A good next step after the first run

After the homepage works, the most useful next move is adding a second route or entry type and keeping the same getPage pattern. That gives you a clean path from “minimal example” to “real React site” without changing the core integration shape.