Documentation for Steel.dev. Built with Fumadocs and enhanced with custom components.
Contributing
Documentation Structure
Component-Based (/tools/*): Features organized by tool capabilities
Example structure:
/tools/steel/
├── Overview/ # Introduction and setup
├── Steel CLI/ # Command-line features
├── Steel JS SDK/ # Testing and programmatic usage
└── Integrations/ # External connections
Writing Guidelines
Follow our content rhythm pattern:
Paragraph (2-3 sentences) → Code Example → Paragraph → List/Table → Code
- 60% code, 40% text - Show, don't just tell
- Never put two paragraphs in a row - Break with code/lists/tables
- Every concept needs a code example
- Use complete, contextual sentences - Explain "why" before "how"
Available Components
Layout Components
<Steps> <Step> ### Action verb phrase Context sentence explaining what and why. ```terminal $ command with options ``` </Step> </Steps> --- <TerminalPicker storage="macOs" flags="-w"> ```terminal !! macOS $ brew install @steel-dev/cli ``` ```terminal !! Windows $ winget install @steel-dev/cli ``` </TerminalPicker> --- <CodeTabs storage="languageSwitcher"> ```typescript const client = Steel() const result = await client.sessions.create() ``` ```javascript const client = Steel() const result = await client.sessions.create() ``` </CodeTabs>
Directives (Auto-converted to components)
:::callout type: tip|info|warn|help ### Optional Title Content here ::: :::objectives - What you'll learn - Another learning objective ::: :::prerequisites - Required knowledge - Tools needed ::: :::next-steps - [Next Guide](/path): Description - [Another Guide](/path): Description :::
Interactive Components
<Accordion> <AccordionItem> <AccordionTrigger>Question</AccordionTrigger> <AccordionContent>Answer</AccordionContent> </AccordionItem> </Accordion> <ImageZoom src="/images/diagram.png" alt="Description" />
Code Block Features
Languages: terminal, typescript, javascript, json, yaml, console, package-install
Flags: -n (line numbers), -c (copy button), -w (word wrap), -a (animate), -f <file-name> (file name)
Annotations:
```ts // !mark[3:5] Highlight lines 3-5 // !mark[/regex/] Highlight pattern // !diff + Addition // !diff - Removal // !collapse[3:5] Collapse lines ```
**Special blocks**:
```terminal
$ command # Renders with prompt
```
```package-install
@steel-dev/cli # Auto-generates npm/yarn/pnpm commands
```
Page Templates
Overview Page
--- title: Tool Name sidebarTitle: Overview description: Brief tool description --- ## Overview Expand on what the tool does and its value. Include llms.txt link if available. ## Key features - **Feature** - User benefit description - **Feature** - Technical capability explained simply ## Installation <TerminalPicker>...</TerminalPicker> :::next-steps - [Quickstart](/path): Get started in minutes :::
use the isLink: true in the front matter to add a link icon to the right of the navbar icon
use the isSeperator: true in the frontmatter to make a doc element look like a seperator (Bold/All caps and spaced out, good for special links)
Quickstart Page
--- title: Quickstart description: Learn how to [task] with [tool] --- Brief intro paragraph about what you'll build. :::objectives - Learning objective 1 - Learning objective 2 ::: :::prerequisites - Prerequisites ::: ## Quickstart <Steps>[3-5 focused steps]</Steps> :::next-steps - [Next Guide](/path): Description :::
File Structure
/content/docs/- All documentation content/components/- Custom components/public/- Images and static assetsmeta.jsonfiles control sidebar organization
Quick Checklist
- Follow content rhythm (no consecutive paragraphs)
- 60% code, 40% text ratio
- Every concept has a code example
- Use appropriate page template
- Specify language for all code blocks
- Include context before code
- Keep paragraphs to 2-3 sentences