Developers Page

Add to a project

Pro item: the CLI needs a Pro account. See plans

Usage

// app/(marketing)/developers/page.tsx
"use client"

import Link from "next/link"
import { DevelopersPage } from "@/components/templates/developers-page"

export default function DevelopersRoute() {
  return (
    <DevelopersPage
      linkComponent={Link}
      onCreateKey={async () => {
        const response = await fetch("/api/keys", { method: "POST", body: JSON.stringify({ mode: "test" }) })
        if (!response.ok) throw new Error("Could not create a key")
        const { secret } = (await response.json()) as { secret: string }
        return secret
      }}
    />
  )
}

Props

• snippetsdefault "DEVELOPERS_SNIPPETS"
  DevelopersSnippet[]

  The editor tabs: { value, label, filename, language, method?, install, code }; install feeds the hero pill.

• responsedefault "DEVELOPERS_RESPONSE"
  string

  The JSON in the response pane.

• surfacesdefault "DEVELOPERS_SURFACES"
  DevelopersSurface[]

  API surface cards: { id, title, description, meta?, href, visual } with visual rest, graphql, webhooks, oauth, sdks or cli.

• endpointGroupsdefault "DEVELOPERS_ENDPOINT_GROUPS"
  DevelopersEndpointGroup[]

  The explorer's filter tabs: { value, label }; the first one is the starting filter, value all matches every endpoint.

• endpointsdefault "DEVELOPERS_ENDPOINTS"
  DevelopersEndpoint[]

  { method, path, description, group, scope?, href } rows of the endpoint explorer.

• terminaldefault "DEVELOPERS_TERMINAL"
  DevelopersTerminalLine[]

  The CLI terminal: { kind: comment | command | output | success | event | blank, text?, status?, time? }.

• statsdefault "DEVELOPERS_STATS"
  DevelopersStat[]

  { id, value, decimals?, prefix?, suffix?, label, description? } figures; the one with id latency ticks live.

• rateLimitsdefault "DEVELOPERS_RATE_LIMITS"
  DevelopersRateLimit[]

  { plan, perMinute, burst, webhooks } rows; perMinute 0 reads as Custom.

• regionsdefault "DEVELOPERS_REGIONS"
  DevelopersRegion[]

  { id, name, latency } median latency per region under the uptime bars.

• changelogdefault "DEVELOPERS_CHANGELOG"
  DevelopersChangelogEntry[]

  { version, date, kind, title, description, href } API releases, newest first.

• communitydefault "DEVELOPERS_COMMUNITY"
  DevelopersCommunityLink[]

  { id, icon: github | discord | calendar, title, description, meta, action, href } cards.

• labelsdefault "DEFAULT_DEVELOPERS_PAGE_LABELS"
  Partial<DevelopersPageLabels>

  Every visible string: the hero, editor, section headings, CLI steps, explorer, limits and CTA copy.

• designdefault "classic"
  "classic" | "bold" | "minimal"

  The whole page's look. classic follows the layout props; bold: a pill header, a split hero with heavy type beside the editor, rounder cards, an inverted CLI band, an image band CTA and a wordmark footer; minimal: a transparent header, no grid or glow, code that follows the page theme, flat outlined cards, no gray bands, a plain CTA and a simple footer. ctaProps, headerProps and footerProps still win.

• heroLayoutdefault "centered"
  "centered" | "split"

  centered: the copy over a wide editor with request and response side by side; split: copy left, editor right. Applies to the classic design.

• codeThemedefault "dark"
  "dark" | "auto"

  dark keeps the editor and terminal dark in both themes; auto lets them follow the page. Applies to the classic and bold designs.

• defaultLanguagedefault "typescript"
  string

  The snippet tab on load (a snippet value).

• language
  string

  The active snippet tab, controlled.

• onLanguageChange
  (language: string) => void

  Called with the snippet value when a tab is picked.

• showSurfacesdefault true
  boolean

  The API surface cards.

• showTerminaldefault true
  boolean

  The CLI section with the terminal.

• showEndpointsdefault true
  boolean

  The endpoint explorer.

• showReliabilitydefault true
  boolean

  The numbers, uptime bars and rate limits.

• showCommunitydefault true
  boolean

  The API changelog and community cards.

• showCtadefault true
  boolean

  The closing call to action.

• alternatedefault true
  boolean

  Gray bands on every other visible section. Applies to the classic and bold designs.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Accents: the announcement badge, the glow behind the editor, the drawn visuals, step numbers and the terminal prompt.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Get an API key, the header's Get started and the closing band; brand is the marketing orange.

• headerdefault true
  boolean

  The marketing header; off inside a site layout.

• footerdefault true
  boolean

  The marketing footer with its newsletter form.

• headerProps
  Partial<MarketingHeaderProps>

  Passed to MarketingHeader.

• footerProps
  Partial<MarketingFooterProps>

  Passed to MarketingFooter.

• ctaProps
  Partial<CtaSectionProps>

  Overrides for the closing CtaSection (variant, hrefs, checklist...).

• onCreateKey
  () => (string | void | Promise<string | void>)

  The hero's Get an API key. The button spins while a promise runs; resolve with the key to show it once with a copy button, reject to show an error. Without it the page waits 900 ms and shows a test key.

• onSubscribe
  (email: string) => (void | Promise<unknown>)

  The footer newsletter; a rejected promise shows an error. Without it the form waits 900 ms and confirms.

• animateIndefault true
  boolean

  The hero rises in, the terminal plays its lines and the latency ticks; false keeps the page still and complete (thumbnails). Reduced motion always does.

• localedefault "en-US"
  string

  Intl locale for the numbers, rate limits and changelog dates.

• linkComponentdefault "<a>"
  (props: LinkComponentProps) => ReactNode

  The router link for every link on the page (next/link in an app).

• className
  string

  Classes for the root.

• classNames
  Partial<Record<DevelopersPageSlot, string>>

  Classes for header, hero, editor, surfaces, surface, terminal, endpoints, reliability, community, cta and footer.

Parts