Built-in content components

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`	A summary with an editable title and bullet points.
`Image`	Images with alt text, captions, links, and width settings.
`Video`	A video file with playback controls and a caption.
`Audio`	An audio player with a caption and width settings.
`CodeBlock`	Highlighted code with wrapping, colors, and a caption.
`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.

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.

<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.

<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 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.

Getting started

Writing

Content components

Design

Site settings

Custom components

Publishing

CLI