> ## Documentation Index
> Fetch the complete documentation index at: https://www.lettercamp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Built-in content components

> Write Lettercamp blocks in Markdown or MDX with built-in components. Learn their shared width settings, literal properties, and editor behavior.

Lettercamp components let you write the same blocks you use in the visual editor directly in a page's source. Use them in `.md` or `.mdx` files without imports or additional packages.

## Choose a component

| Component | Use it for |
| - | - |
| [`KeyTakeaways`](https://www.lettercamp.com/docs/components/key-takeaways) | A summary with an editable title and bullet points. |
| [`Image`](https://www.lettercamp.com/docs/components/image) | Images with alt text, captions, links, and width settings. |
| [`Video`](https://www.lettercamp.com/docs/components/video) | A video file with playback controls and a caption. |
| [`Audio`](https://www.lettercamp.com/docs/components/audio) | An audio player with a caption and width settings. |
| [`CodeBlock`](https://www.lettercamp.com/docs/components/code-block) | Highlighted code with wrapping, colors, and a caption. |
| [`Table`](https://www.lettercamp.com/docs/components/table) | Simple Markdown tables or tables with merged and styled cells. |

Keep headings, paragraphs, lists, quotes, links, and dividers as ordinary Markdown. For interactive features you build yourself, see [React components](https://www.lettercamp.com/docs/react-components.md).

## Set the width

Every built-in block accepts the same optional `width` property:

| Value | Behavior |
| - | - |
| `"regular"` | Uses the normal reading column. This is the default. |
| `"wide"` | Extends up to 128 pixels beyond the reading column, within the available space. |
| `"full"` | Uses the available article width. |

Images can also have a custom pixel size. See [image dimensions](https://www.lettercamp.com/docs/components/image.md#dimensions).

```mdx theme={null}
<KeyTakeaways width="wide">

**Key takeaways**

- Put the main answer near the start.
- Make each point useful on its own.

</KeyTakeaways>
```

## Write properties

Use quoted strings, literal numbers, booleans, and numeric arrays. Property names are case-sensitive.

```mdx theme={null}
<Image src="https://images.example.com/diagram.png" alt="Publication workflow" pixelWidth={640} pixelHeight={360} newTab href="/workflow" />

<Audio src="https://media.example.com/interview.mp3" width="wide" caption="The full interview" />
```

Use `wrap={false}`, not `wrap="false"`. A bare boolean property such as `newTab` means `true`. Built-in properties do not evaluate variables, function calls, or spread expressions. Only the properties listed on each component's reference page are supported.

Place block components on their own lines. Separate Markdown content from the opening and closing tags with blank lines. Use fenced code blocks inside components.

## Switch between editor and source

The visual editor uses the same image, video, audio, code, table, and key takeaways controls for component source. Changes to captions, widths, formatting, and table cells are saved back to component notation. Default settings are usually omitted. The editor writes tables with `TableRow` and `TableCell` children so it can preserve their formatting and merged cells.

Existing Markdown images, code fences, Markdown tables, and supported legacy HTML blocks still load. Editing a page can normalize those blocks to component notation; you do not need to rewrite existing articles first.

## Preview and publish

Update the [Lettercamp CLI](https://www.lettercamp.com/docs/cli/installation.md#update-the-cli) before using the new syntax. Run `npx lettercamp dev` to preview your publication and `npx lettercamp build --site https://example.com` to check its output, replacing the URL with your publication's address. Built-ins render as HTML without adding a React runtime for these blocks.

In `.mdx` files, an explicitly imported React component takes precedence over a built-in with the same name. Give custom components distinct names, such as `ProductImage`, when you also want to use Lettercamp's built-ins on that page.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.