# Developers Page > A developer platform page: a code editor hero with language tabs, API surfaces, a live CLI terminal, endpoint explorer, uptime and limits. - Type: React template (Templates) - Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing) - Version: 1.0.0 - Install: `npx wingo-ui@latest add developers-page` - Docs: https://wingo-ui.com/templates/developers-page ## Interaction The hero rises in once on mount. Get an API key spins for a moment, then shows a test key once with a copy button; the install pill copies its command and follows the selected language. In the code editor the TypeScript, Python, Go and cURL tabs swap the request (arrow keys move between tabs), the copy button copies the snippet, and Run sends a pretend request: the response dims, then comes back with a fresh latency that is announced to screen readers. Long lines scroll sideways inside the code panes, never the page, and each pane is focusable for keyboard scrolling. Every API surface card is one link. The CLI terminal plays its lines in sequence the first time it scrolls into view (deploy, then live webhook events) and the replay button runs it again; reduced motion and animateIn={false} show it complete. The endpoint explorer filters by resource with pill tabs and by text with the search field (press / to focus it); rows link to the reference and an empty result offers to clear the filters. The p95 latency ticks while on screen, the 90-day uptime bars show a tooltip per day, and the changelog entries and community cards are single links. The editor and terminal stay dark in both themes unless codeTheme is auto. ## Installation ```bash npx wingo-ui@latest add developers-page ``` Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates. With shadcn: `npx shadcn@latest add @wingo-ui/developers-page` (needs the @wingo-ui registry with your API key in components.json) Files: - `components/templates/developers-page.tsx` - `components/templates/developers-page-data.ts` npm dependencies: `npm i lucide-react motion` Wingo UI dependencies (installed automatically): - [Marketing Section](https://wingo-ui.com/components/marketing-section) ([Markdown](https://wingo-ui.com/components/marketing-section.md)) - [Marketing Header](https://wingo-ui.com/components/marketing-header) ([Markdown](https://wingo-ui.com/components/marketing-header.md)) - [Marketing Footer](https://wingo-ui.com/components/marketing-footer) ([Markdown](https://wingo-ui.com/components/marketing-footer.md)) - [CTA Section](https://wingo-ui.com/components/cta-section) ([Markdown](https://wingo-ui.com/components/cta-section.md)) - [Animated Counter](https://wingo-ui.com/components/animated-counter) ([Markdown](https://wingo-ui.com/components/animated-counter.md)) - [Badge](https://wingo-ui.com/components/badge) ([Markdown](https://wingo-ui.com/components/badge.md)) - [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md)) - [Copy Button](https://wingo-ui.com/components/copy-button) ([Markdown](https://wingo-ui.com/components/copy-button.md)) - [Search Input](https://wingo-ui.com/components/search-input) ([Markdown](https://wingo-ui.com/components/search-input.md)) - [Tabs](https://wingo-ui.com/components/tabs) ([Markdown](https://wingo-ui.com/components/tabs.md)) - [Tracker](https://wingo-ui.com/components/tracker) ([Markdown](https://wingo-ui.com/components/tracker.md)) - [useControllableState](https://wingo-ui.com/components/use-controllable-state) ([Markdown](https://wingo-ui.com/components/use-controllable-state.md)) - [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md)) - [Navigation](https://wingo-ui.com/components/navigation) ([Markdown](https://wingo-ui.com/components/navigation.md)) - [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md)) - [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md)) ## Usage ```tsx // app/(marketing)/developers/page.tsx "use client" import Link from "next/link" import { DevelopersPage } from "@/components/templates/developers-page" export default function DevelopersRoute() { return ( { 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 | Prop | Type | Default | Description | | --- | --- | --- | --- | | `snippets?` | `DevelopersSnippet[]` | `"DEVELOPERS_SNIPPETS"` | The editor tabs: { value, label, filename, language, method?, install, code }; install feeds the hero pill. | | `response?` | `string` | `"DEVELOPERS_RESPONSE"` | The JSON in the response pane. | | `surfaces?` | `DevelopersSurface[]` | `"DEVELOPERS_SURFACES"` | API surface cards: { id, title, description, meta?, href, visual } with visual rest, graphql, webhooks, oauth, sdks or cli. | | `endpointGroups?` | `DevelopersEndpointGroup[]` | `"DEVELOPERS_ENDPOINT_GROUPS"` | The explorer's filter tabs: { value, label }; the first one is the starting filter, value all matches every endpoint. | | `endpoints?` | `DevelopersEndpoint[]` | `"DEVELOPERS_ENDPOINTS"` | { method, path, description, group, scope?, href } rows of the endpoint explorer. | | `terminal?` | `DevelopersTerminalLine[]` | `"DEVELOPERS_TERMINAL"` | The CLI terminal: { kind: comment \| command \| output \| success \| event \| blank, text?, status?, time? }. | | `stats?` | `DevelopersStat[]` | `"DEVELOPERS_STATS"` | { id, value, decimals?, prefix?, suffix?, label, description? } figures; the one with id latency ticks live. | | `rateLimits?` | `DevelopersRateLimit[]` | `"DEVELOPERS_RATE_LIMITS"` | { plan, perMinute, burst, webhooks } rows; perMinute 0 reads as Custom. | | `regions?` | `DevelopersRegion[]` | `"DEVELOPERS_REGIONS"` | { id, name, latency } median latency per region under the uptime bars. | | `changelog?` | `DevelopersChangelogEntry[]` | `"DEVELOPERS_CHANGELOG"` | { version, date, kind, title, description, href } API releases, newest first. | | `community?` | `DevelopersCommunityLink[]` | `"DEVELOPERS_COMMUNITY"` | { id, icon: github \| discord \| calendar, title, description, meta, action, href } cards. | | `labels?` | `Partial` | `"DEFAULT_DEVELOPERS_PAGE_LABELS"` | Every visible string: the hero, editor, section headings, CLI steps, explorer, limits and CTA copy. | | `design?` | `"classic" \| "bold" \| "minimal"` | `"classic"` | 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. | | `heroLayout?` | `"centered" \| "split"` | `"centered"` | centered: the copy over a wide editor with request and response side by side; split: copy left, editor right. Applies to the classic design. | | `codeTheme?` | `"dark" \| "auto"` | `"dark"` | dark keeps the editor and terminal dark in both themes; auto lets them follow the page. Applies to the classic and bold designs. | | `defaultLanguage?` | `string` | `"typescript"` | 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. | | `showSurfaces?` | `boolean` | `true` | The API surface cards. | | `showTerminal?` | `boolean` | `true` | The CLI section with the terminal. | | `showEndpoints?` | `boolean` | `true` | The endpoint explorer. | | `showReliability?` | `boolean` | `true` | The numbers, uptime bars and rate limits. | | `showCommunity?` | `boolean` | `true` | The API changelog and community cards. | | `showCta?` | `boolean` | `true` | The closing call to action. | | `alternate?` | `boolean` | `true` | Gray bands on every other visible section. Applies to the classic and bold designs. | | `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Accents: the announcement badge, the glow behind the editor, the drawn visuals, step numbers and the terminal prompt. | | `ctaTone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Get an API key, the header's Get started and the closing band; brand is the marketing orange. | | `header?` | `boolean` | `true` | The marketing header; off inside a site layout. | | `footer?` | `boolean` | `true` | The marketing footer with its newsletter form. | | `headerProps?` | `Partial` | | Passed to MarketingHeader. | | `footerProps?` | `Partial` | | Passed to MarketingFooter. | | `ctaProps?` | `Partial` | | Overrides for the closing CtaSection (variant, hrefs, checklist...). | | `onCreateKey?` | `() => (string \| void \| Promise)` | | 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)` | | The footer newsletter; a rejected promise shows an error. Without it the form waits 900 ms and confirms. | | `animateIn?` | `boolean` | `true` | 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. | | `locale?` | `string` | `"en-US"` | Intl locale for the numbers, rate limits and changelog dates. | | `linkComponent?` | `(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>` | | Classes for header, hero, editor, surfaces, surface, terminal, endpoints, reliability, community, cta and footer. | ## Parts ### DEVELOPERS_PAGE_SAMPLE (constant) All the sample content in one object: snippets, response, surfaces, endpoints, terminal, stats, limits, regions, changelog and community. ### DEVELOPERS_SNIPPETS (constant) Creating a task in TypeScript, Python, Go and cURL. ### DEVELOPERS_RESPONSE (constant) The task JSON the API answers with. ### DEVELOPERS_SURFACES (constant) Six cards: REST API, GraphQL, Webhooks, OAuth apps, Official SDKs and Acme CLI. ### DEVELOPERS_ENDPOINT_GROUPS (constant) All, Tasks, Docs, Projects and Webhooks. ### DEVELOPERS_ENDPOINTS (constant) Twelve endpoints across tasks, docs, projects and webhook endpoints. ### DEVELOPERS_TERMINAL (constant) acme deploy, then acme listen with four live events. ### DEVELOPERS_STATS (constant) Uptime, p95 latency, monthly requests and edge regions. ### DEVELOPERS_RATE_LIMITS (constant) Free, Pro, Business and Enterprise limits. ### DEVELOPERS_REGIONS (constant) Six regions with their median latency. ### DEVELOPERS_CHANGELOG (constant) Four API releases: new, improved, fixed and deprecated. ### DEVELOPERS_COMMUNITY (constant) GitHub, Discord and office hours. ### DEFAULT_DEVELOPERS_PAGE_LABELS (constant) The English strings, including the three CLI steps. ### DEVELOPERS_PAGE_DESIGNS (constant) The design names, classic first: ["classic", "bold", "minimal"]. ### DevelopersPageProps (type) Props of DevelopersPage. ### DevelopersPageDesign (type) "classic" | "bold" | "minimal". ### DevelopersPageLabels (type) The strings labels can override. ### DevelopersSnippet (type) One editor tab: { value, label, filename, language, method?, install, code }. ### DevelopersEndpoint (type) One endpoint row. ### DevelopersTerminalLine (type) One terminal line. ## Examples - **Bold design**: design="bold": a pill header, a split hero with heavy type beside the editor, an inverted CLI band and a wordmark footer. - **Minimal design**: design="minimal": no grid or glow, code that follows the page theme, outlined cards, no gray bands and a simple footer. - **Brand orange**: tone and ctaTone brand: an orange glow behind the editor, orange step numbers and prompt, and an orange key button and closing band. - **Python first, split hero**: The copy beside the editor, Python selected on load and code that follows the page theme. - **API landing, short**: Hero, endpoints and the closing band only, inside a site layout without header and footer. ## See also - [Docs Home Page](https://wingo-ui.com/templates/docs-home-page) ([Markdown](https://wingo-ui.com/templates/docs-home-page.md)) - [Integration Detail Page](https://wingo-ui.com/templates/integration-detail-page) ([Markdown](https://wingo-ui.com/templates/integration-detail-page.md)) - [Integrations Page](https://wingo-ui.com/templates/integrations-page) ([Markdown](https://wingo-ui.com/templates/integrations-page.md)) - [Code Block](https://wingo-ui.com/components/code-block) ([Markdown](https://wingo-ui.com/components/code-block.md)) - [Status Page](https://wingo-ui.com/templates/status-page) ([Markdown](https://wingo-ui.com/templates/status-page.md)) --- Canonical: https://wingo-ui.com/templates/developers-page More components: https://wingo-ui.com/components ยท Index for agents: https://wingo-ui.com/llms.txt