Formatting guide

Frontmatter

Every page is one Markdown document. Put its routing and publishing data at the top. The page title comes from title, so do not repeat it as an H1 in the body.

---
title: Streaming
collection: tts
slug: tts/streaming
status: published
sort_order: 10
summary: Begin playback before the response finishes.
---

Headings and outline

Use ## for sections and ### for subsections. These headings automatically populate the right-side page outline.

Normal Markdown

Write paragraphs, lists, bold text, inline code, and descriptive links normally.

Code blocks

Use a fenced code block. Add an optional language after the opening fence. The file-code icon and copy control are automatic; never write a manual toolbar.

from openai import OpenAI client = OpenAI()

An unlabelled fence shows no language text:

TEENAGEWORKS_API_KEY=your_key

Small card

Everything inside a card remains Markdown.

:::card
### Keep credentials on the server

Read the key from an environment variable.

[button: Open API keys](/playground/api)

[Read the security guide](/docs/configure)
:::

Information card

Use a warning for a translucent yellow “keep in mind” block. Use note for neutral information.

:::warning
Avoid placing an API key in browser code.
:::

Text link

Use a normal Markdown link for colored text navigation.

[Read the streaming guide](/docs/tts/streaming)

Button

Prefix the link label with button: when it needs button treatment.

[button: Open playground](/playground)

Image or video

Use ordinary Markdown media syntax. The optional quoted title is the caption. URLs ending in .mp4, .webm, or .mov render as video.

![Rendered speech waveform](/media/waveform.png "The first audible frame arrives before the response finishes.")

Content rules

• Keep one idea per section.
• Prefer runnable examples over fragments.
• Do not write toolbar labels or copy controls.
• Do not add layout HTML.
• Check every internal link before publishing.