Code Groups

Code groups display multiple related code examples in tabs, perfect for showing the same functionality in different languages or approaches.

Basic Code Group

Create tabs by placing multiple code blocks together with title metadata:

Example.js
// JavaScript example
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");

Example.py
```
# Python example
def greet(name):
    print(f"Hello, {name}!")

greet("World")
```
Thanks. We will use this to improve the snippet.

Example.rs
// Rust example
fn greet(name: &str) {
    println!("Hello, {}!", name);
}

fn main() {
    greet("World");
}

<CodeGroup>
```javascript Example.js
function greet(name) {
  console.log(`Hello, ${name}!`);
}
```

```python Example.py
def greet(name):
    print(f"Hello, {name}!")
```

```rust Example.rs
fn greet(name: &str) {
    println!("Hello, {}!", name);
}
```
</CodeGroup>

The text after the language identifier becomes the tab title. Use descriptive names like "Example.js" or "Step 1".

Multi-Language API Examples

Show the same API call in different languages:

JavaScript
const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_TOKEN'
  },
  body: JSON.stringify({
    name: 'Alice',
    email: 'alice@example.com'
  })
});

const data = await response.json();
console.log(data);

Python
import requests

response = requests.post(
    'https://api.example.com/users',
    headers={
        'Content-Type': 'application/json',
        'Authorization': 'Bearer YOUR_TOKEN'
    },
    json={
        'name': 'Alice',
        'email': 'alice@example.com'
    }
)

data = response.json()
print(data)

Go
package main

import (
    "bytes"
    "encoding/json"
    "net/http"
)

func main() {
    payload := map[string]string{
        "name":  "Alice",
        "email": "alice@example.com",
    }
    
    jsonData, _ := json.Marshal(payload)
    
    req, _ := http.NewRequest(
        "POST",
        "https://api.example.com/users",
        bytes.NewBuffer(jsonData),
    )
    
    req.Header.Set("Content-Type", "application/json")
    req.Header.Set("Authorization", "Bearer YOUR_TOKEN")
    
    client := &http.Client{}
    resp, _ := client.Do(req)
    defer resp.Body.Close()
}

Rust
use reqwest::header::{AUTHORIZATION, CONTENT_TYPE};
use serde_json::json;

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
    let client = reqwest::Client::new();
    
    let response = client
        .post("https://api.example.com/users")
        .header(CONTENT_TYPE, "application/json")
        .header(AUTHORIZATION, "Bearer YOUR_TOKEN")
        .json(&json!({
            "name": "Alice",
            "email": "alice@example.com"
        }))
        .send()
        .await?;
    
    let data = response.json::<serde_json::Value>().await?;
    println!("{:?}", data);
    
    Ok(())
}

Installation Steps

Show installation for different package managers:

npm
```
npm i -g relevate
```
Thanks. We will use this to improve the snippet.
yarn
```
yarn global add relevate
```
Thanks. We will use this to improve the snippet.
pnpm
```
pnpm add -g relevate
```
Thanks. We will use this to improve the snippet.
bun
```
bun add -g relevate
```
Thanks. We will use this to improve the snippet.

Configuration Options

Display different configuration approaches:

JSON
{
  "name": "My Docs",
  "theme": "sky",
  "colors": {
    "primary": "#1199fb"
  }
}

YAML
```
name: My Docs
theme: sky
colors:
  primary: "#1199fb"
```
Thanks. We will use this to improve the snippet.
TOML
```
name = "My Docs"
theme = "sky"

[colors]
primary = "#1199fb"
```
Thanks. We will use this to improve the snippet.

Step-by-Step Examples

Use tabs for sequential steps:

Step 1: Install
```
npm i -g relevate
```
Thanks. We will use this to improve the snippet.
Step 2: Preview
```
relevate preview
```
Thanks. We will use this to improve the snippet.

Step 3: Configure
{
  "name": "My Documentation",
  "navigation": {
    "tabs": [
      {
        "id": "docs",
        "label": "Documentation",
        "content": ["index"]
      }
    ]
  }
}

Step 4: Accessibility check
```
relevate a11y
```
Thanks. We will use this to improve the snippet.
Step 5: Publish
```
# Publish via the managed Relevate platform
```
Thanks. We will use this to improve the snippet.

With Line Highlighting

Code groups support line highlighting:

JavaScript
async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) {
    throw new Error('Failed to fetch user');
  }
  return response.json();
}

Python
import requests

def fetch_user(user_id):
    response = requests.get(f'/api/users/{user_id}')
    if not response.ok:
        raise Exception('Failed to fetch user')
    return response.json()

Rust
async fn fetch_user(id: &str) -> Result<User, Error> {
    let response = reqwest::get(&format!("/api/users/{}", id)).await?;
    
    if !response.status().is_success() {
        return Err(Error::FetchFailed);
    }
    
    Ok(response.json().await?)
}

Complex Examples

Show complete implementations across languages:

TypeScript
import { createServer } from 'http';

interface Config {
  port: number;
  host: string;
}

class Server {
  private config: Config;
  
  constructor(config: Config) {
    this.config = config;
  }
  
  start(): void {
    const server = createServer((req, res) => {
      res.writeHead(200, { 'Content-Type': 'text/plain' });
      res.end('Hello World\n');
    });
    
    server.listen(this.config.port, this.config.host, () => {
      console.log(`Server running at http://${this.config.host}:${this.config.port}/`);
    });
  }
}

const config: Config = {
  port: 3000,
  host: 'localhost'
};

const server = new Server(config);
server.start();

Rust
use axum::{
    Router,
    routing::get,
    response::IntoResponse,
};
use std::net::SocketAddr;

#[derive(Clone)]
struct Config {
    port: u16,
    host: String,
}

impl Config {
    fn address(&self) -> SocketAddr {
        format!("{}:{}", self.host, self.port)
            .parse()
            .expect("Invalid address")
    }
}

async fn handler() -> impl IntoResponse {
    "Hello World\n"
}

#[tokio::main]
async fn main() {
    let config = Config {
        port: 3000,
        host: "127.0.0.1".to_string(),
    };
    
    let app = Router::new()
        .route("/", get(handler));
    
    let addr = config.address();
    println!("Server running at http://{}", addr);
    
    axum::Server::bind(&addr)
        .serve(app.into_make_service())
        .await
        .unwrap();
}

Python
from http.server import HTTPServer, BaseHTTPRequestHandler
from dataclasses import dataclass

@dataclass
class Config:
    port: int
    host: str

class Handler(BaseHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)
        self.send_header('Content-type', 'text/plain')
        self.end_headers()
        self.wfile.write(b'Hello World\n')

def main():
    config = Config(
        port=3000,
        host='localhost'
    )
    
    server = HTTPServer((config.host, config.port), Handler)
    print(f'Server running at http://{config.host}:{config.port}/')
    server.serve_forever()

if __name__ == '__main__':
    main()

Best Practices

Use descriptive tab titles

Tab titles should clearly indicate what's inside. Use:

Language names: "JavaScript", "Python", "Rust"
File names: "config.json", "Example.ts"
Steps: "Step 1: Install", "Step 2: Configure"

Keep examples consistent

When showing the same operation in multiple languages, keep the logic and structure as similar as possible so users can easily compare.

Order tabs logically

Order tabs by:

Popularity (most common languages first)
Alphabetically
Sequentially (for steps)

Don't overuse tabs

Code groups are powerful but can be overwhelming. Use them when you genuinely need to show alternatives, not for every code block.

Combine with other features

Code groups work with:

Line highlighting
Syntax highlighting
Long code examples
Comments and documentation

Common Patterns

SDK Installation

npm
```
npm install @example/sdk
```
Thanks. We will use this to improve the snippet.
yarn
```
yarn add @example/sdk
```
Thanks. We will use this to improve the snippet.
pnpm
```
pnpm add @example/sdk
```
Thanks. We will use this to improve the snippet.
cargo
```
cargo add example-sdk
```
Thanks. We will use this to improve the snippet.
pip
```
pip install example-sdk
```
Thanks. We will use this to improve the snippet.

Environment Setup

macOS
```
brew install relevate
```
Thanks. We will use this to improve the snippet.
Linux
```
curl -sSL https://relevate.app/install | sh
```
Thanks. We will use this to improve the snippet.
Windows
```
winget install relevate
```
Thanks. We will use this to improve the snippet.

Framework Examples

Next.js
// app/page.tsx
export default function Home() {
  return <h1>Hello World</h1>
}

Remix
// app/routes/_index.tsx
export default function Index() {
  return <h1>Hello World</h1>
}

SvelteKit
```

<h1>Hello World</h1>
```
Thanks. We will use this to improve the snippet.

Code groups are especially useful for documentation that serves multiple audiences (different languages, frameworks, or tools). They keep all options visible without cluttering the page.