A modern, professional API documentation template built with VitePress, Vue 3, and Scalar. This starter provides everything you need to create beautiful, interactive API documentation with multi-language support and best-in-class developer experience.
📖 Also available in Portuguese: README.pt-br.md
Get your API documentation up and running in minutes.
Latest release: v0.1.0
- Node.js (>=18.0.0)
- pnpm (>=8.15.5) - recommended for optimal performance
# Clone the repository
git clone https://github.com/rafactx/api-docs-starter.git
cd api-docs-starter
# Install dependencies
pnpm installStart the development server with hot-reloading:
pnpm run devVisit http://localhost:5173 to see your documentation.
Generate a static version for deployment:
pnpm run buildPreview the production build locally:
pnpm run preview.
├── docs/ # VitePress Documentation
│ ├── .vitepress/ # VitePress configuration & theme
│ │ ├── components/ # Custom Vue components
│ │ │ ├── ApiCard.vue # API feature cards
│ │ │ ├── HeroSection.vue # Landing page hero
│ │ │ ├── ScalarApi.vue # Interactive API reference
│ │ │ └── SpotlightBackground.vue # Animated background
│ │ ├── theme/ # Global styles and theme files
│ │ │ ├── fonts.css # Font loading and configuration
│ │ │ ├── style.css # Global styles
│ │ │ ├── sidebar.css # Sidebar customization
│ │ │ ├── api-docs-responsive.css # Mobile optimizations
│ │ │ └── theme.css # Color palette and variables
│ │ ├── config.ts # Main VitePress configuration
│ │ └── index.ts # Theme entry point
│ ├── public/ # Static assets
│ │ ├── openapi.json # OpenAPI specification (English)
│ │ ├── openapi-pt-br.json # OpenAPI specification (Portuguese)
│ │ ├── openapi-es.json # OpenAPI specification (Spanish)
│ │ ├── openapi-fr.json # OpenAPI specification (French)
│ │ ├── logo-light.svg # Light theme logo
│ │ └── logo-dark.svg # Dark theme logo
│ ├── en/ # English content
│ ├── es/ # Spanish content
│ ├── fr/ # French content
│ ├── pt/ # Portuguese content
│ └── index.md # Language redirection
├── .github/ # GitHub templates and workflows
├── .gitignore # Git exclusions
├── LICENSE # MIT License
├── CHANGELOG.md # Version history and changes
├── CODE_OF_CONDUCT.md # Community guidelines
├── CONTRIBUTING.md # Contribution guidelines
├── SECURITY.md # Security policy
├── package.json # Dependencies and scripts
├── tsconfig.json # TypeScript configuration
└── vite.config.ts # Vite build configuration
- Apple-inspired UI with clean, professional aesthetics
- Dark/Light theme with seamless switching
- Responsive design optimized for all devices
- Smooth animations and micro-interactions
- 4 languages: English, Portuguese, Spanish, French
- Automatic language detection based on browser preferences
- Language switcher with flag indicators
- Localized OpenAPI specifications for each language
- Scalar integration for interactive API testing
- Live endpoint testing directly in documentation
- Code examples in multiple programming languages
- Comprehensive schema documentation
- Code splitting for optimal loading
- Lazy loading for components and images
- Optimized builds with tree shaking
- Progressive Web App ready
- Vercel Analytics for visitor tracking and insights
- Speed Insights for performance monitoring
- TypeScript for type safety
- Hot module replacement for rapid development
- ESLint + Prettier for code quality
- Comprehensive tooling out of the box
Update the theme colors in docs/.vitepress/theme/theme.css:
:root {
/* Update these variables with your brand colors */
--vp-c-brand: #3b82f6;
--vp-c-brand-light: #60a5fa;
--vp-c-brand-dark: #2563eb;
}Replace the default logos in docs/public/:
logo-light.svg- Light theme logologo-dark.svg- Dark theme logo
Customize the API specification in docs/public/openapi.json:
- Update the
infosection with your API details - Add your API endpoints and schemas
- Translate for other languages if needed
Add your documentation pages in the respective language folders:
docs/en/- English documentationdocs/pt/- Portuguese documentationdocs/es/- Spanish documentationdocs/fr/- French documentation
Update the sidebar and navigation in docs/.vitepress/config.ts:
sidebar: [
{
text: 'API Guide',
items: [
{ text: '🚀 Introduction', link: '/en/intro' },
{ text: '🔐 Authentication', link: '/en/authentication' },
// Add your pages here
]
}
]The build output is static and can be deployed to any static hosting service:
# Build for production
pnpm run build
# The static files are in docs/.vitepress/dist- Connect your repository to Vercel
- Set the build command to
pnpm run build - Set the output directory to
docs/.vitepress/dist
Analytics & Monitoring: This template includes Vercel Analytics and Speed Insights out of the box. Once deployed, you'll automatically start collecting visitor data and performance metrics in your Vercel dashboard.
- Netlify: Build command
pnpm run build, Publish directorydocs/.vitepress/dist - GitHub Pages: Use the
gh-pagesbranch - AWS S3: Upload the
docs/.vitepress/distfolder
We welcome contributions! Please see our Contributing Guidelines for details.
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes
- Run quality checks:
pnpm run lint && pnpm run format - Commit your changes:
git commit -m 'feat: add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- VitePress - Static Site Generator
- Vue.js - Progressive JavaScript Framework
- Scalar - Interactive API Reference
- TailwindCSS - Utility-First CSS Framework
- 📧 Email: [email protected]
- 🐛 Issues: GitHub Issues
- 💬 Discussions: GitHub Discussions
Made with care by rafactx and contributors
