#Quick Start

This page renders a snippet. For pipeline, snapshot, and entry trade-offs, see How it works.

#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

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:

import "react-wikitext/styles.css";

::::note The npm package only contains dist/, NOTICE, and THIRD_PARTY_LICENSES. See the contributing guide 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:

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

#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 for per-construct status and Rendering behavior for details.

#Next steps

• How it works: why parsing and preparation are separate, and when to use /view.
• Basic usage: explicit pipeline, async plugins, and component overrides.
• Links and images: connect your router and media service.
• Server rendering: server preparation, serialization, and hydration.
• Troubleshooting: placeholders, errors, and configuration issues.
• Entry points: what each subpath exports.