tina-astro

This is a TinaCMS starter project.

This project is still under development

Edit your site visually in the browser, ship it as fast static HTML.

Getting started

Create the project:

pnpm dlx create-tina-app@latest --template tina-astro-starter

Install dependencies:

[!NOTE]
Which package manager is best for Node.js? The right one makes a real difference to your workflow. We recommend pnpm for its speed and efficient dependency handling — this SSW rule explains why.

pnpm install

Start the dev server, then edit visually at localhost:4321/admin/:

pnpm dev

Figure: Homepage UI

Features

• Visual editing via @tinacms/astro — a vanilla-JS bridge, with no React in the page tree
• Tailwind CSS v4 block builder: Hero, CTA, Features, Stats, Testimonial, Callout, Content, Split, and Video
• Light/dark theme toggle with a Tina-ember space theme
• Markdown and MDX with <TinaMarkdown> rich-text rendering
• Collections for Pages, Blog, and global Config
• Astro view transitions, SEO meta, OpenGraph, sitemap, and RSS
• Icons via astro-icon and the Tabler set

A note on React

react and react-dom@^18.3.1 are pinned in devDependencies for the TinaCMS admin UI build only — the site itself ships zero React. Without the pin, pnpm resolves react@19 against react-dom@18 and the admin crashes on init. This is tracked in tinacms#6985; remove the pin once that lands.

Want to learn more?

Read the TinaCMS documentation and the Astro documentation, or come and say hello in the TinaCMS Discord server.