Scribe Component Showcase

Callouts

Five types for every situation. Each with its own icon and color scheme.

Code Block

Syntax highlighting for 30+ languages with a copy button, language label, and optional filename header.

import Scribe from "scribe-docs";

const docs = new Scribe({
  name: "My API",
  version: "2.0",
  theme: {
    primaryColor: "#6366f1",
    darkMode: true,
  },
});

// Register your API endpoints
docs.endpoint("POST", "/users", {
  description: "Create a new user",
  bodyParams: [
    { name: "email", type: "string", required: true },
    { name: "role", type: '"admin" | "member"' },
  ],
});

docs.build();

from scribe import Scribe

app = Scribe(
    name="My API",
    version="2.0",
    base_url="https://api.example.com",
)

@app.endpoint("POST", "/users")
def create_user(email: str, role: str = "member"):
    """Create a new user account."""
    return {"id": "usr_01J8X...", "email": email, "role": role}

# Install Scribe and create your docs
git clone https://github.com/RapierCraft/Scribe.git my-docs
cd my-docs && npm install
npm run dev

# Open http://localhost:3000/docs

Code Tabs

Multi-language code examples in a single tabbed container. Perfect for showing the same API call in different languages.

curl -X POST https://api.example.com/v1/payments \
  -H "Authorization: Bearer sk_live_..." \
  -H "Content-Type: application/json" \
  -d '{
    "amount": 2000,
    "currency": "usd",
    "customer": "cus_abc123"
  }'

API Endpoint

Structured API documentation with method badges, parameter tables, multi-language request examples, and response status switching.

curl -X POST https://api.example.com/v1/payments \
  -H "Authorization: Bearer sk_live_..." \
  -H "Content-Type: application/json" \
  -d '{"amount": 2000, "currency": "usd"}'

{
  "id": "pay_01HXZ7KBPM2QGQAZ5JRPEY8AX",
  "object": "payment",
  "amount": 2000,
  "currency": "usd",
  "status": "requires_payment_method",
  "client_secret": "pay_01HXZ7..._secret_QZKpHnHF",
  "created_at": "2026-03-21T10:00:00Z"
}

{
  "id": "pay_01HXZ7KBPM2QGQAZ5JRPEY8AX",
  "object": "payment",
  "amount": 2000,
  "currency": "usd",
  "status": "succeeded",
  "customer": "cus_abc123",
  "created_at": "2026-03-21T10:00:00Z"
}

{
  "id": "pay_01HXZ7KBPM2QGQAZ5JRPEY8AX",
  "status": "cancelled",
  "cancelled_at": "2026-03-21T10:05:00Z"
}

Steps

Numbered step-by-step instructions with connector lines. Each step supports a title, description, and optional embedded content.

npm install @acme/sdk
# or
pip install acme-sdk

ACME_API_KEY=sk_live_your_key_here
ACME_WEBHOOK_SECRET=whsec_your_secret_here

import { Acme } from "@acme/sdk";

const acme = new Acme(process.env.ACME_API_KEY);

const payment = await acme.payments.create({
  amount: 2000,
  currency: "usd",
  description: "Premium subscription",
});

console.log(payment.client_secret);

app.post("/webhooks/acme", async (req, res) => {
  const event = acme.webhooks.verify(
    req.body,
    req.headers["acme-signature"],
  );

  if (event.type === "payment.succeeded") {
    await fulfillOrder(event.data.id);
  }

  res.json({ received: true });
});

Cards

Navigation cards with icons, descriptions, badges, and hover animations. Great for landing pages and section indexes.

Three-column layout

Typography

All standard Markdown elements are pre-styled through the MDX component system.

Inline code

Use inline code for variable names, function calls like createPayment(), or HTTP methods like POST /v1/payments.

Lists

• Unordered lists use disc markers
• They support inline code and bold text
• Nested content renders cleanly at any depth

1. Ordered lists use decimal numbering
2. Perfect for sequential instructions
3. Each item aligns with consistent spacing

Blockquote

“The best API documentation is the one developers actually read.”
— Every developer advocate, ever.

Table