Modern documentation made simple and powerful
TinaDocs is a complete documentation solution built with Tina CMS that combines developer-friendly tools with content creator accessibility.
Figure: Landing Page of TinaDocs
- 🔍 Fast search - Powered by Pagefind for instant content discovery
- 📊 API documentation - Generate beautiful API docs from your OpenAPI specs
- 📑 Multi-tab interfaces - Organize complex information with tabbed layouts
- 🎨 Custom theming - Make your docs match your brand
- ✏️ Visual editing - Content creators can edit directly through TinaCMS
- 📱 Responsive design - Works great on all devices
- ⚡ Performance optimized - Built with Next.js for fast load times
- Modern stack - Clean, maintainable codebase
- Developer-friendly - Easy to customize and extend
- Content creator-friendly - Non-technical team members can contribute
- SEO optimized - Built-in best practices for search visibility
The fastest way to get started with TinaDocs is using npx:
npx {{ TODO }} my-docs --template tinadocsThis command will:
- Download and set up TinaDocs in a new directory called
my-docs - Prompt you to select your preferred theme during setup
- Configure the basic project structure
- Install all necessary dependencies
When using npx, you can choose from these beautiful themes:
- Default - Clean black and white design
- Tina - TinaCMS-inspired theme with orange accents
- Blossom - Elegant pink/rose color scheme
- Lake - Professional blue color palette
- Pine - Natural green tones
- Indigo - Modern purple/indigo design
There are two ways you can use TinaDocs:
• For developers – as a launching point to develops a highly custom docs solution. TinaCMS is based on markdown. Use this code as a basis to implement custom components to be used in MDX to fit your use case. Follow the Getting Started guide below.
• Quickest experience – use as is and deploy in minutes via TinaCloud for a docs setup that you still hold all the keys and data for, and get to using right away.
💡 TinaCMS integrates tighly with GitHub, and has a powerful editorial workflow based on GitHub's branch protection features.
💡 We recommend
pnpmfor faster installs. Learn why pnpm is great for Node.js projects.
pnpm installpnpm devOpen http://localhost:3000 to see your docs in action.
- Add your docs to GitHub: Push your local repository to GitHub if you haven't already
- Create a TinaCloud account: Sign up at app.tina.io
- Link your repository: Connect your GitHub repository to TinaCloud through the dashboard
- Rename
.env.exampleto.env - Add your Tina credentials:
NEXT_PUBLIC_TINA_CLIENT_ID=<get this from app.tina.io>
TINA_TOKEN=<get this from app.tina.io>
NEXT_PUBLIC_TINA_BRANCH=<your content branch>
NEXT_PUBLIC_ENABLE_THEME_SELECTION=<dispaly theme selector>Theme Preview Mode: To enable a theme selector in the UI for previewing all themes, add:
NEXT_PUBLIC_ENABLE_THEME_SELECTION=true💡 Note: The theme selector allows you to preview different themes in real-time, but these changes are temporary and won't persist when you open a new browser window/tab. To make a theme permanent, update the
Selected Themfield in your Settings through TinaCMS.
pnpm buildTinaDocs works great with Vercel. Check out our deployment guide for detailed instructions.
TinaDocs includes fast search powered by Pagefind, which indexes your content during the build process.
To generate or update the search index, run:
pnpm build-local-pagefindThis command:
-
Builds the project
-
Generates the search index
-
Saves the index files to
public/pagefind/
The search index is automatically updated every time you run the build.
- Tina Documentation - Explore Tina's full capabilities
- Getting Started Guide - Quick setup walkthrough
- GitHub Repository - Contribute or report issues
Ready to improve your documentation? Give TinaDocs a try!
![@tina-cloud-app[bot]](https://avatars.githubusercontent.com/in/47631?s=64&v=4){kind=small}