API - Documentation & Landing Page Template
A premium dual-purpose template combining a product landing page with a full API documentation site, built with Astro and Tailwind CSS.
Description
A premium, dual-purpose template for developer-focused API products. Features a landing page with 14 sections (Hero, Trusted Brands, Features, Stats, Comparison, How It Works, Integrations, API Playground, Pricing, Testimonials, API Key Generator, Rate Limit Widget, FAQ, CTA) plus a full API documentation site with 10 sample MDX pages. Includes an interactive API playground with 8 pre-loaded mock endpoints and copy-as-code (curl/JS/Python), auto-generated sidebar grouped by category with active page highlighting, scroll-spy table of contents, client-side search with Cmd+K and keyboard navigation, multi-language code blocks (curl, JavaScript, Python, Go, Rust, PHP), API key generator demo, comparison table vs in-house/legacy tools, live rate limit visualization gauge, versioned changelog with date and tags, and an API status dashboard with uptime chart, component status, and incident history. All code examples, playground data, and documentation content are editable in a single location.
Features
- Interactive API playground with 8 mock endpoints and copy-as-code (curl
- JavaScript
- Python)
- Multi-language code blocks (curl
- JS
- Python
- Go
- Rust
- PHP)
- Auto-generated documentation sidebar grouped by category
- Scroll-spy table of contents with IntersectionObserver
- Client-side search with Cmd+K trigger and keyboard navigation
- Dark mode (system preference + manual toggle
- persisted)
- CSS-only syntax highlighting (zero runtime JS)
- One-click code copy with checkmark animation
- GDPR cookie consent with granular preferences modal
- Pluggable analytics (Google Analytics
- Plausible
- Umami)
- Fixed top navigation with mobile slide-out menu
- Back to top button with scroll threshold
- Brand logo grid with FLIP shuffle animation
- API key generator with environment and permission selectors
- Comparison table with mobile card view
- Rate limit widget with animated gauge and reset timer
- API status dashboard with uptime chart and incident history
- Versioned changelog with date and tags
- Responsive mobile-first design with proper scroll locking and drawer behavior
- SEO ready (Open Graph
- Twitter Cards
- JSON-LD
- sitemap.xml)
- Web app manifest for install prompts
- 18 total pages (1 landing + 10 doc pages + 5 utility + 1 changelog + 1 status)
- Custom 404 page
- Legal pages (Privacy
- Terms)
- Astro + Tailwind CSS + TypeScript + Lucide icons