> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Quick Start

This page renders a snippet. For pipeline, snapshot, and entry trade-offs, see [How it works](/guide/concepts.md).

## Requirements

- React `>=18.2 <20` (peer dependency).
- Node `>=18.18` for builds or server execution.
- ESM and CJS builds; consumer builds with Vite and webpack 5 are covered by tests.
- No Wikimedia, font CDN, or external API dependency at runtime.

## Installation

```bash
pnpm add react-wikitext@alpha
```

Releases currently ship on the alpha dist-tag, so the install command names the channel explicitly; once a stable version is out, `pnpm add react-wikitext` is enough. The stylesheet is imported once:

```ts
import "react-wikitext/styles.css";
```

::::note
The npm package only contains `dist/`, `NOTICE`, and `THIRD_PARTY_LICENSES`. See the [contributing guide](/project/contributing.md) for building from source and local debugging.
::::

## Minimal example

The `Wikitext` component from the root entry handles parsing, preparation, and rendering. Import the stylesheet once:

```tsx preview
import { Wikitext } from "react-wikitext";
import "react-wikitext/styles.css";

const source = `== Hello, wikitext ==
This paragraph mixes '''bold''', ''italic'', and an [[internal link|internal link]].

* First item
* Second item`;

export default function Article() {
  return <Wikitext source={source} lang="en" />;
}
```

`Wikitext` renders a root `div.wtr-view`. `lang` and `dir` are written to that container for layout and assistive technology.

::::warning
`Wikitext` and `WikitextView` depend on React Context and only run in Client Components. The root entry and `/view` already ship a `"use client"` directive, so they can be used directly in Next.js App Router; the server should only call React-free entries such as `/parse` and `/hast`, as shown in [server preparation](/guide/server-rendering.md).
::::

## What you get

By default:

- Headings, paragraphs, bold, italic, lists, definition lists, tables, code blocks, and references render as structured output.
- Internal links are **non-navigable text**; provide `resolveLink` when you have routes.
- External links use the safe source URL and carry `target="_blank"` and `rel="nofollow noopener noreferrer"`.
- Templates, parser functions, and files render explicit placeholders; their content is not inferred.
- Files render as placeholders; only an address returned by `resolveImage` and validated by the library produces `<img loading="lazy">`.
- A table of contents is generated automatically once a page has four headings; categories are collected into a footer.
- Unknown structures degrade to source cards, so the page continues to render.

See [Syntax support](/guide/syntax-support.md) for per-construct status and [Rendering behavior](/guide/rendering.md) for details.

## Next steps

- [How it works](/guide/concepts.md): why parsing and preparation are separate, and when to use `/view`.
- [Basic usage](/guide/usage.md): explicit pipeline, async plugins, and component overrides.
- [Links and images](/guide/links-and-images.md): connect your router and media service.
- [Server rendering](/guide/server-rendering.md): server preparation, serialization, and hydration.
- [Troubleshooting](/guide/troubleshooting.md): placeholders, errors, and configuration issues.
- [Entry points](/api/index.md): what each subpath exports.