Astro + TinaCMS Setup Guide

TinaCMS runs side-by-side with Astro, with first-class visual editing that needs no React in your page tree. It ships as @tinacms/astro, a vanilla-Astro rich-text renderer plus a one-line integration.

Getting Started

There are 2 ways to set up TinaCMS with Astro.

• Option 1: Scaffold from the starter template (best for new projects).
• Option 2: Add TinaCMS to an existing Astro site with tinacms init.

Examples use pnpm. On npm or yarn, swap the commands: pnpm dev becomes npm run dev or yarn dev; pnpm add x becomes npm install x or yarn add x.

Option 1: Scaffold from the starter template

npx create-tina-app@latest --template tina-astro-starter

Enter a project name when prompted. Then move into that folder and start the dev server:

cd your-project-name      # the folder you just created
pnpm dev

Leave the dev server running. Open http://localhost:4321/admin/index.html, pick a post, and edit. Visual editing is already wired, nothing else to do. (4321 is Astro's default port; use whatever your terminal prints.)

Option 2: Add TinaCMS to an existing Astro site

From your site's root:

cd your-astro-site       # your existing site
npx @tinacms/cli@latest init

Answer the prompts:

init adds TinaCMS to an existing site. Run it in an empty folder and it stops and points you to Option 1.

init installs @tinacms/astro + an SSR adapter, wraps your dev / build scripts, and adds new files: a ready-to-edit demo at /tinacms-demo, your tina/ config, and one sample collection. It won't overwrite your content, and it leaves a customized astro.config alone (an empty or default config gets the Tina wiring).

Start the dev server:

pnpm dev

Leave it running. In a browser, open:

• http://localhost:4321/tinacms-demo shows the demo hero. (Different port in your terminal? Use that one.)
• http://localhost:4321/admin/index.html#/~/tinacms-demo opens the editor. Paste the whole URL (#/~/ included). Click the headline or a button: it should highlight and open a form in the sidebar to edit live.

Did clicking open an editable field?

• ✅ Yes (the field highlighted and a form opened). init wired your config for you. The demo works and also builds and deploys as-is. Next: make your existing pages editable (so far only /tinacms-demo is editable).
• ❌ No (the page shows but clicking does nothing, or pnpm build later fails with [NoAdapterInstalled]). Your astro.config already had content, so init left it untouched. Open astro.config.mjs: if integrations has no tina(), that's the cause. Wire it in Enabling Visual Editing below, then restart.

Modeling Your Content

Define your collections in tina/config.ts. Each field maps to both the editor UI and your content files. init seeds one collection to start from. Full reference: Content modeling.

Running TinaCMS

From your project's root, start the dev server:

cd your-project          # your project folder
pnpm dev

pnpm dev runs TinaCMS and Astro together (it calls tinacms dev -c "astro dev"). The admin lives at:

http://localhost:4321/admin/index.html

Custom port: run pnpm exec tinacms dev -c "astro dev --port 8080", then use that port in the admin URL. Errors? See Common Errors.

You should see the TinaCMS admin, be able to select a post, save, and watch changes persist to your local content files.

Enabling Visual Editing

Existing Astro sites only. Skip this if you scaffolded from the starter (Option 1, tina-astro-starter): visual editing is already wired there. You need it only when init left your existing astro.config untouched (the ❌ case above) or you're wiring up an existing site by hand.

From your existing site's root, install the package and an SSR adapter:

cd your-astro-site       # your existing site
pnpm add @tinacms/astro tinacms
pnpm add -D @tinacms/cli
pnpm add @astrojs/node          # or @astrojs/vercel / netlify / cloudflare

@astrojs/node is the safe default for local editing. Match it to your host (Vercel, Netlify, Cloudflare) when you deploy.

Add the Tina integration and an SSR adapter to astro.config.mjs. If you already have an integrations array or an adapter, keep them and just append tina().

Not sure how to merge it? Copy the version init printed in your terminal, or compare your file against the snippet below and keep your existing integrations and adapter.

import { defineConfig } from 'astro/config';
import tina from '@tinacms/astro/integration';
import { tinaAdminDevRedirect } from '@tinacms/astro/vite';
import node from '@astrojs/node';

export default defineConfig({
  output: 'server',
  adapter: node({ mode: 'standalone' }),       // or your existing adapter (Vercel, Netlify, ...)
  integrations: [tina()],                      // append tina() to your existing array
  vite: {
    plugins: [tinaAdminDevRedirect()], // lets /admin work in dev
    // Optional: only needed for SSR builds, not fully static sites.
    ssr: { noExternal: ['@tinacms/astro', '@tinacms/bridge'] },
  },
});

Then stop and restart the dev server (Astro doesn't reload config changes):

# Ctrl-C, then:
pnpm dev

Why output: 'server' and an adapter? The editor refetches each region from an on-demand route. output: 'server' is simplest; output: 'static' also works if every editable region is wrapped in <TinaIsland>. See Static-site editing.

Make your existing Astro pages editable

Right after init, /tinacms-demo is the only page wired for Tina editing. It's a working template for the rest of your site: copy the same pattern into your existing pages and components. (An island is just an editable section of a page.) Each editable page wires these five things, all scaffolded for the demo:

1. A field in your schema (tina/config.ts): whatever you want to edit.
2. A data loader: wrap the query in requestWithMetadata().
3. An island registry entry for the region.
4. The per-island endpoint: src/pages/tina-island/[name].ts (handles every region; keep its export const prerender = false).
5. <TinaIsland> and tinaField(): wrap the region and stamp the clickable elements. (Import TinaMarkdown from @tinacms/astro/TinaMarkdown.astro, the subpath, or Astro won't compile it.)

Full walkthrough with code for each: Visual Editing Setup → Astro. It has the exact file names and patterns to follow when you move from the demo to your real pages.

Project Structure

init (and the starter) organize visual editing around these files:

• tina/config.ts: your collections (schema); generates the typed client.
• src/lib/tina/data.ts: per-collection fetchers, each piped through requestWithMetadata().
• src/lib/tina/islands.ts: the registry of editable regions.
• src/pages/tina-island/[name].ts: the on-demand endpoint the bridge refetches, via experimental_createIslandRoute(islands).
• src/components/tina/*.astro: Astro renderers using <TinaMarkdown> and tinaField().
• astro.config.mjs: registers tina(); the middleware injects the bridge automatically.

See Visual Editing Setup → Astro for the full architecture.

Next Steps

• Visual Editing Setup → Astro: the integration, per-island refetch, and custom MDX embeds
• Migrating from React-based Visual Editing: existing sites on the old client:tina path
• Content modeling · Data fetching · Deploy your site

Questions? Join the TinaCMS Discord.

See Also

• Next.js setup guide: Using TinaCMS with Next.js
• Hugo setup guide: Using TinaCMS with Hugo
• Self-hosting options: Host TinaCMS on your own infrastructure