Tina Cloud Starter is a Next.js boilerplate that pairs the TinaCMS headless CMS with a live visual editing workflow, letting developers and content editors manage Markdown- and JSON-based content through the /admin route.
What is Tina Cloud Starter?
Tina Cloud Starter (now maintained as tinacms/tina-nextjs-starter) is an open-source Next.js starter built by the TinaCMS team, designed to demonstrate visual live editing of structured website content. It uses TinaCMS for authentication, content modeling, and visual editing, with content stored as Markdown and JSON files inside a GitHub repository and queried through the Tina GraphQL API. The starter runs on Next.js with Tailwind CSS, and is deployable to Vercel or GitHub Pages.
Key Features
- Tina Headless CMS integration — provides authentication, content modeling, visual editing, and team management through app.tina.io.
- Local development workflow — runs a local GraphQL server on port 4001 with an Altair GraphQL playground for testing queries.
- GitHub-based content management — content lives as Markdown and JSON files in the repo, versioned with Git.
- Vercel deployment ready — the
/adminroute enables visual editing on the deployed site. - GitHub Pages deployment — includes a GitHub Actions workflow that builds and deploys to the
gh-pagesbranch as a static site. - TypeScript support — auto-generated TypeScript types are rebuilt when the Tina config changes.
- VS Code GraphQL extension — supports type auto-completion during development.
Who is it for?
- Next.js developers who want a pre-configured starting point for building a TinaCMS-powered site without wiring up the CMS from scratch.
- Content editors and marketers who need a visual editing interface (via
/admin) to update website content without touching code. - Teams using GitHub who want version-controlled content managed through pull requests and deployed to Vercel or GitHub Pages.
What can you do with it?
- Launch a blog or marketing site: create and edit Markdown-based pages visually, then deploy to Vercel.
- Prototype a CMS-driven project: use the local GraphQL playground and TypeScript types to model custom content quickly.
- Self-host a static site: deploy to GitHub Pages using the included Actions workflow, with content editable through the Tina admin.
How does it work?
- Install dependencies with
pnpm installand runpnpm devfor local development. - Browse the site at
http://localhost:3000and enter edit mode viahttp://localhost:3000/admin. - Create a TinaCMS project at app.tina.io, add your client ID and token to
.env, and build withpnpm buildto use the hosted content API.
FAQ
What are the requirements to run this starter?
You need Git, Node.js Active LTS, and pnpm installed locally. For live editing on a deployed site, you also need a TinaCMS account at app.tina.io.
Can I deploy to GitHub Pages?
Yes, the starter includes a GitHub Actions workflow. Enable GitHub Pages to deploy from the gh-pages branch, and set NEXT_PUBLIC_TINA_CLIENT_ID and TINA_TOKEN as repository secrets. Because GitHub Pages does not support server-side code, the site runs as a static build.
How do I log out of the admin panel?
Visit http://localhost:3000/exit-admin to log out of Tina Cloud and exit edit mode.
Where can I get help?
Check the TinaCMS documentation, join the Discord community, ask on the community forum, email support, or open an issue on the tinacms/tinacms GitHub repository.
Is this starter open source?
Yes, it is licensed under the Apache 2.0 license.
