API Snippet
Tabbed API call reference (curl, HTTPie, TypeScript SDK, optional fctl) rendered from a Formance stack OpenAPI operationId.
A tabbed API call reference rendered from a Formance OpenAPI operationId. Provide an operation (v2CreateLedger, v2GetLedger, …), optional params, body, and headers, and the component generates curl, HTTPie, and TypeScript SDK snippets. Pass fctl to add a tab with a hand-authored fctl one-liner.
The operations index ships alongside the fragment as lib/stack-operations.json (a separate registry item, stack-operations). Re-generate it with pnpm extract:operations from the design-system repo when the stack OpenAPI spec changes.
To render snippets for another API, pass a different index via the operations prop. A membership/cloud index ships as lib/membership-operations.json (membership-operations), generated with pnpm extract:membership-operations. Membership operations have no public TypeScript SDK, so the sdk tab is omitted for them.
Use the tabs prop to choose which tabs render and in what order (e.g. tabs={['curl', 'httpie', 'fctl']}). A requested tab is only shown when it has content: 'fctl' needs the fctl prop, and 'sdk' needs the operation to declare an SDK module/method.
To document an endpoint that isn't in an operations index, pass method and path directly instead of operation (the path may include a query string). Use bodyFile to reference the request body from a file (curl -d @file.json, http < file.json) rather than inlining it, and rawArgs to append extra flags to the generated curl/HTTPie command.
The active tab is uncontrolled by default (seeded by defaultTab). Pass value + onValueChange to control it from the host — e.g. to persist the curl/HTTPie choice across multiple snippets on a page.
GET request#
Use without a body. The fctl tab appears whenever the fctl prop is set.
Without fctl tab#
An fctl one-liner is provided, but `tabs` omits it — restricting tabs hides a tab whose content is otherwise available. Omitting the fctl prop entirely has the same effect.
Custom tabs#
Use the tabs prop to pick which tabs render and in what order. Here only fctl and curl are shown, with fctl first and selected by default.
Stack API#
The default: operation resolves against the bundled stack operations index, so curl, HTTPie, the TypeScript SDK, and fctl all render.
Membership API#
Pass the membership operations index via the operations prop. Membership operations declare no SDK, so the TypeScript tab is omitted automatically.
SDK as default tab#
Set defaultTab='sdk' when the SDK call is the canonical example.
Clipped code height#
Set clipCodeHeight when the snippet lives inside a constrained surface (dialog, sidebar) so a tall body scrolls inside the box instead of expanding the parent layout.
Method and path#
Pass method and path directly to document an endpoint that isn't in an operations index. The path may include a query string, which HTTPie splits into == params and the endpoint footer drops.
Body from a file#
Use bodyFile to reference the request body from a file instead of inlining it — curl renders -d @file and HTTPie renders < file.
Raw args#
rawArgs appends extra flags to the generated curl/HTTPie command, e.g. --fail-with-body.
Controlled tabs#
Pass value + onValueChange to control the active tab from the host. Here two snippets share one tab state, so switching curl/HTTPie on one switches the other — the pattern for persisting the reader's HTTP-client choice across a page.