## Kickstart Astro - **Published:** 2026-03-17T11:53:06.330Z - **Updated:** 2026-04-02T11:26:33.724Z - **Tags:** astro --- If you want a Contentstack example in Astro that stays small but still handles server-style preview behavior, this kickstart is a useful one to study. The Astro kickstart looks minimal on the surface, but the interesting part is how it handles preview. It uses Astro page rendering with prerender = false and wires Contentstack Live Preview in SSR mode, which makes it behave more like the server-driven variants than the fully client-refresh ones. > This page is a practical developer guide based on the repository itself, not a replacement for official docs. The goal is to explain what this kickstart is teaching and how the code is actually working. > > ## What a kickstart is A kickstart is the smallest useful project that connects a frontend framework to Contentstack. It is not trying to be a full sample site. It is trying to give you a working baseline that keeps the key integration pieces visible: - SDK setup - content querying - preview configuration - editable field bindings That makes it especially useful when you are learning a framework-contentstack pairing for the first time. ## Why start with the Astro kickstart This kickstart is a good fit when you want to: - learn the Contentstack integration in Astro without a lot of extra abstractions - understand how preview works when the page is rendered in an SSR-style flow - keep the project small enough to inspect in one pass - grow from a single page model into a larger Astro site It is a nice reference if you want the feel of Astro with a more request-aware preview setup. ## What you get out of the box The current contentstack/kickstart-astro repository includes: - Astro - a Contentstack helper module in src/lib - server-aware page rendering with prerender = false - Live Preview initialized in SSR mode - Visual Builder editable field bindings - a seeded page content type with a sample homepage That means the repo is doing more than just “Astro plus content fetch.” It is also showing how to make the preview loop work in a server-style page render. ## How this specific kickstart works ### 1. src/lib/contentstack.ts combines the SDK and preview logic This file sets up the Contentstack Delivery SDK, maps the correct region-aware endpoints, and initializes the Live Preview utility with ssr: true. It also exposes getPage({ url, searchParams }), which does two important things: - applies livePreviewQuery(...) when preview query params are present - fetches the page entry by URL and adds editable tags in preview mode That is the heart of the Astro integration. ### 2. src/pages/index.astro reads preview state from the URL The homepage explicitly reads live_preview, content_type_uid, and entry_uid from Astro.url.searchParams, then passes those values into getPage(...). That means the page itself is the bridge between Astro’s request context and Contentstack’s preview session. If you want to understand the repo quickly, this is the key behavior to notice. ### 3. export const prerender = false is an important signal This line tells you the page is not being treated like a fully static page. That matters because the preview flow depends on the page being able to respond to request-time preview query parameters. In other words, the Astro kickstart is not just about rendering content. It is set up so preview can work in a server-aware way. ### 4. The client script only initializes the bridge The inline script on the page imports initLivePreview() and runs it in the browser. That means the browser-side piece is still needed for the editing UI and Visual Builder behavior, but the actual preview-aware content fetch stays aligned with the SSR-style flow. ## The important preview nuance This kickstart uses ssr: true for Live Preview. That changes the editing experience in a meaningful way: - Contentstack appends preview query params to the URL - the iframe reloads - Astro reads those params on the next request - the page fetches the latest draft content again So while Astro can often be discussed through the lens of static output, this kickstart is really teaching a request-aware preview pattern. ## What you are really learning from this project This repo is useful because it teaches a few practical ideas at once: - how to make Astro read preview context from the request URL - how to keep Contentstack fetch logic centralized in one helper - how SSR-style preview differs from a client-refresh loop - how to keep Visual Builder support while using an Astro page render That makes it a good baseline when you want Astro without giving up a structured editing experience. ## When to choose this one Choose the Astro kickstart when: - you want a small Astro project that already understands Contentstack preview - you want preview behavior driven by request-time query parameters - you prefer an SSR-style editing loop over a purely client-side refresh pattern - you want a minimal but practical starting point for a Contentstack-powered Astro site If you are specifically looking for the lightest client-refresh pattern, the React or Angular kickstarts are closer to that experience. ## Fastest way to try it The shortest path is: - Clone the repo. - Seed or reuse the kickstart stack. - Create a delivery token with preview enabled. - Add the Contentstack values to .env. - Enable Live Preview for the same environment. - Run npm install and npm run dev. Once it is running, open the homepage locally and then open the corresponding entry in Contentstack. In preview mode you will notice the reload-driven behavior rather than an in-place client refresh. ## A good next step after the first run After the homepage works, the most useful follow-up is adding a second Astro page and reusing the same “URL plus search params” pattern. That is the quickest way to turn this from a reference repo into a real Astro implementation.