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

Three variants are available: note, warning, and tip.

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

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

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

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 block with horizontal scroll:

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 accent 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.