Steel Docs

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 assets
• meta.json files 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