The official documentation website for Treblle, the API Intelligence Platform that helps engineering and product teams build, ship, and understand their REST APIs in one place.
Treblle is your comprehensive API Intelligence Platform, empowering you to build, manage, and truly understand APIs confidently. Whether you're a solo developer with a few APIs, a fast-growing startup, or an enterprise with thousands of APIs, Treblle gives you complete visibility, intelligence, and control across your entire API estate.
- Real-time API Monitoring - Monitor API performance, errors, and usage patterns
- Comprehensive Analytics - Gain insights into API consumption and performance metrics
- Multi-language SDKs - Support for Node.js, PHP, Python, Java, Go, .NET, and Ruby
- API Gateway Integrations - Works with AWS API Gateway, Azure, Kong, and more
- Security & Governance - Built-in security monitoring and compliance features
This documentation site is built with modern web technologies:
- Next.js 15 - React framework for production
- Nextra - Static site generator for documentation
- TypeScript - Type-safe JavaScript
- PandaCSS - CSS-in-JS styling system
- Pagefind - Static search functionality
- Node.js 18.17 or later
- pnpm (recommended) or npm/yarn
-
Clone the repository
git clone https://github.com/Treblle/treblle-documentation.git cd treblle-documentation -
Install dependencies
pnpm install
-
Generate PandaCSS styles
pnpm prepare
-
Start the development server
pnpm dev
-
Open your browser
Visit http://localhost:3000 to see the documentation site.
treblle-documentation/
├── app/ # Next.js 13+ app directory
│ ├── docs/ # Documentation pages
│ ├── layout.tsx # Root layout component
│ └── page.mdx # Homepage content
├── components/ # Reusable React components
├── public/ # Static assets
│ └── _pagefind/ # Generated search index
├── styled-system/ # Generated PandaCSS files
├── styles/ # Custom styles and fonts
├── theme/ # PandaCSS theme configuration
├── next.config.ts # Next.js configuration
├── panda.config.ts # PandaCSS configuration
└── package.json # Dependencies and scripts
| Script | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build for production |
pnpm start |
Start production server |
pnpm lint |
Run ESLint |
pnpm typecheck |
Run TypeScript compiler |
pnpm format:check |
Check code formatting |
pnpm format:fix |
Fix code formatting |
pnpm prepare |
Generate PandaCSS styles |
-
Create MDX files in the
app/docs/directory -
Add frontmatter with title and description:
--- title: "Your Page Title" description: "Page description for SEO" --- # Your Content Here
The documentation supports React components within MDX. All components listed below can be used directly in any .mdx page file. You do not need to import them — they are available globally.
This section is for the marketing and content team. Below is a complete guide to every component you can use when writing documentation pages.
Use these to draw attention to important information inline in your content.
A blue info box. Use for helpful context or extra detail.
<NoteCard>
Treblle automatically masks sensitive fields like passwords and tokens before they leave your server.
</NoteCard>A green box. Use for best-practice tips or shortcuts.
<TipCard>
Randomly select an endpoint for each request to get a more accurate performance benchmark.
</TipCard>A red/orange warning box. Use for important warnings or destructive actions.
<CautionCard>
Deleting an API project is permanent and cannot be undone.
</CautionCard>Use this instead of plain Markdown images. Renders with rounded corners and proper spacing.
| Prop | Required | Description |
|---|---|---|
src |
Yes | Path to image (e.g. /platform/requests/listview.png) |
alt |
Yes | Descriptive text for accessibility |
<ImageCard src="/platform/requests/listview.png" alt="List View of Requests" />Embeds a YouTube video in a responsive 16:9 player.
| Prop | Required | Description |
|---|---|---|
postId |
Yes | The YouTube video ID (the part after ?v= in the URL) |
<YoutubeEmbed postId="dQw4w9WgXcQ" />A two-column table — left column for the term/title (30%), right for the description (70%).
| Prop | Required | Description |
|---|---|---|
title |
No | Header for the left column |
description |
No | Header for the right column |
<InfoTable title="Field" description="What it means">
<InfoTable.Row title="HTTP Method" description="The type of request: GET, POST, PUT, DELETE" />
<InfoTable.Row title="Response Code" description="The status code returned (e.g. 200, 404)" />
<InfoTable.Row title="Load Time" description="How long the request took in milliseconds" />
</InfoTable>An interactive checklist users can tick off. Great for setup guides or verification steps.
Each <Checklist.item> needs a unique id.
<Checklist>
<Checklist.item id="install">Install the Treblle SDK</Checklist.item>
<Checklist.item id="key">Add your API key to the config</Checklist.item>
<Checklist.item id="test">Send a test request</Checklist.item>
</Checklist>Expandable question-and-answer sections. Each FAQItem shows the answer when clicked.
<FAQ>
<FAQItem question="Does Treblle slow down my API?">
No. Treblle operates asynchronously and has zero impact on API response times.
</FAQItem>
<FAQItem question="Which frameworks are supported?">
Treblle supports Node.js, PHP, Python, Java, Go, .NET, Ruby, and more.
</FAQItem>
</FAQ>A responsive card grid for listing integrations, SDKs, or related links.
<IntegrationCards>
<IntegrationCards.Card
title="Node.js SDK"
link="/integrate-treblle/integrations/node"
linkTitle="View Docs"
>
Add Treblle to your Express or Fastify app in minutes.
</IntegrationCards.Card>
<IntegrationCards.Card
title="Laravel SDK"
link="/integrate-treblle/integrations/laravel"
linkTitle="View Docs"
>
Native Laravel middleware for automatic API logging.
</IntegrationCards.Card>
</IntegrationCards>| Prop | Required | Description |
|---|---|---|
title |
No | Card heading |
link |
No | URL to link to |
linkTitle |
No | Text label for the link |
children |
No | Short description inside the card |
Adds automatic previous/next page navigation at the bottom of a page. No props needed — it reads the page structure automatically.
Place this at the very end of any page:
<PaginationCards />Every page must start with a frontmatter block (between --- lines). This controls the page title, browser tab title, and SEO description.
---
title: "Your Page Title"
metaTitle: "Your Page Title - Treblle Documentation"
description: "A short 1-2 sentence description for search engines."
---| Field | Required | Description |
|---|---|---|
title |
Yes | Shown as the H1 heading on the page |
metaTitle |
Yes | Shown in the browser tab and search results |
description |
Yes | Used by search engines (keep under 160 characters) |
Use PandaCSS utilities for styling:
import { css } from "~styled-system/css";
const styles = css({
backgroundColor: "blue.50",
padding: "4",
borderRadius: "lg",
});The site includes static search powered by Pagefind. The search index is automatically generated during the build process and included in the public/_pagefind/ directory.
The site uses PandaCSS for styling with a custom theme configuration:
- Colors: Defined in
theme/colors.ts - Typography: Configured in
theme/text-styles.ts - Tokens: Design tokens in
theme/tokens.ts - Fonts: Google Fonts integration in
styles/fonts.ts
This project is optimized for deployment on Vercel:
- Push your changes to GitHub
- Connect your repository to Vercel
- Deploy automatically on every push to main
# Build the project
pnpm build
# Start production server
pnpm startWe welcome contributions to improve the Treblle documentation!
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature - Make your changes
- Test locally:
pnpm dev - Submit a pull request
- Follow the existing code style (ESLint + Prettier configured)
- Write clear commit messages
- Test your changes thoroughly
- Update documentation as needed