CodeGroup

For isolated previews, theme switching, and sandbox editing, open the CodeGroup playground on holydocs.com .

When to use

Use this component when source needs more context than a plain fenced block can provide, or when multiple code representations should stay synced.

Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

Multi-language

JavaScript, Python, and Go side by side.

javascript
const res = await fetch('https://api.holydocs.com/v1/projects', {  headers: { Authorization: `Bearer ${API_KEY}` },});const projects = await res.json();

python
import requestsres = requests.get(    'https://api.holydocs.com/v1/projects',    headers={'Authorization': f'Bearer {API_KEY}'},)projects = res.json()

go
req, _ := http.NewRequest("GET", "https://api.holydocs.com/v1/projects", nil)req.Header.Set("Authorization", "Bearer "+apiKey)client := &http.Client{}resp, _ := client.Do(req)

mdx
<CodeGroup>```javascript JavaScriptconst res = await fetch('https://api.holydocs.com/v1/projects', {  headers: { Authorization: `Bearer ${API_KEY}` },});const projects = await res.json();``````python Pythonimport requestsres = requests.get(    'https://api.holydocs.com/v1/projects',    headers={'Authorization': f'Bearer {API_KEY}'},)projects = res.json()``````go Goreq, _ := http.NewRequest("GET", "https://api.holydocs.com/v1/projects", nil)req.Header.Set("Authorization", "Bearer "+apiKey)client := &http.Client{}resp, _ := client.Do(req)```</CodeGroup>

Props

This component has no configurable props. Use its child content to shape the output.

Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

mdx
<CodeGroup>```javascript JavaScriptconst res = await fetch('https://api.holydocs.com/v1/projects', {  headers: { Authorization: `Bearer ${API_KEY}` },});const projects = await res.json();``````python Pythonimport requestsres = requests.get(    'https://api.holydocs.com/v1/projects',    headers={'Authorization': f'Bearer {API_KEY}'},)projects = res.json()```</CodeGroup>

Tips

• Optimize for copy-paste reliability. Labels, tabs, and annotations should help readers choose the right snippet without modifying it first.
• Keep examples small enough to scan but realistic enough to survive first use in a real project.
• If the code block is critical to task completion, mirror the same example in prose so search and AI tools can recover the intent.

Related Components

More

• Interactive playground: CodeGroup on holydocs.com
• Component library index: /components