Component Demo

A showcase of every documentation component rendered together for visual verification.

This page exercises all of the docs-specific components in a single place so you can verify typography, spacing, callouts, code blocks, headings with anchor links, and the prev/next pager at the bottom.

Callouts

Four variants are available: note, warning, tip, and danger.

Note

Note: This is a neutral informational callout used for general-purpose messages and context.

Warning

Warning: This callout highlights something that requires caution — for example, a breaking change or destructive action.

Tip

Tip: Use this variant for helpful suggestions, best practices, or shortcuts that save time.

Danger

Danger: Use this variant sparingly, for actions that risk data loss or are otherwise irreversible.

Code Blocks

Inline Code

Reference variables like networkId or functions like executeNetwork() inline within body text.

Block Code

Larger code samples render in a full-width panel with a mono filename tab and a copy button:

quickstart.ts

import { NodeFox } from "@nodefox/sdk";

const client = new NodeFox({
  apiKey: process.env.NODEFOX_API_KEY,
});

const result = await client.networks.execute("net_abc123", {
  input: { prompt: "Summarize the quarterly report" },
});

console.log(result.output);

Typography

Body text uses the secondary text color with relaxed line-height for comfortable reading at any viewport width. Links like this anchor link use the primary-soft color with an underline.

Lists

Unordered list:

Networks are directed acyclic graphs (DAGs)
Nodes represent discrete operations
Edges define the data flow between nodes
Schemas validate the shape of data at each boundary

Ordered list:

Create a new network from the dashboard
Add an Input node and an LLM node
Connect them with an edge
Configure the LLM node's model and prompt
Run the network from the Automate View

Blockquote

NodeFox treats every workflow as a deterministic graph — the same inputs always produce the same outputs, making debugging and auditing straightforward.

Heading Anchors

Every heading on this page has an id and scroll-mt-24 so the Table of Contents on the right (visible at xl+ breakpoints) can link directly to each section. In MDX pages, rehype-slug generates these IDs automatically and each heading shows a hover-visible anchor icon.

Sub-heading Example

H3-level headings appear indented in the Table of Contents. You can mix H2 and H3 headings freely — the TOC component picks up both levels.