# Inkset > Inkset is an open source React library for rendering LLM output. It handles streaming Markdown, code blocks, math, tables, Mermaid diagrams, and generative UI, and it can replace react-markdown or Streamdown. Inkset measures text once with Pretext and calculates the layout with arithmetic, so finished blocks stay in place while tokens stream, and a resize does not need DOM measurements. Each page below is also available as Markdown at its URL plus `.md`, and https://inkset.dev/llms-full.txt contains all pages in one file. ## Getting started - [Introduction](https://inkset.dev/docs/introduction.md): Inkset is an open source library for rendering LLM output in React. It efficiently handles streaming Markdown, code blocks, diagrams, and generative UI. You can use it in place of react-markdown or S… - [Install](https://inkset.dev/docs/install.md): Install the core package and the React package. Then add a plugin for each type of rich content that your app shows. - [Quick start](https://inkset.dev/docs/quick-start.md): `` takes a Markdown string and a `streaming` flag. Give it the message text each time the text grows, and it renders the update without moving the finished text above. - [How it works](https://inkset.dev/docs/how-it-works.md): Inkset sends each block of Markdown through a pipeline of six stages. When a token arrives, only the last block goes through the pipeline again. On resize, Inkset uses its cached text measurements an… ## Core - [Ingest & repair](https://inkset.dev/docs/ingest.md): The ingest stage collects streaming tokens into one Markdown string. Before the parser reads the string, the ingest stage closes all syntax that is still open, so the parser always gets complete Mark… - [Parse](https://inkset.dev/docs/parse.md): The parse stage converts the repaired Markdown into a syntax tree for each block. When a token arrives, Inkset parses only the last block again. Finished blocks keep the tree that Inkset made for the… - [Transform](https://inkset.dev/docs/transform.md): In the transform stage, each plugin adds data to the syntax tree nodes that it handles. The measure stage and the plugin's component use this data later. Writing a plugin shows the full plugin interf… - [Measure](https://inkset.dev/docs/measure.md): The measure stage calculates the width and height of each block. Pretext measures blocks of text, and plugins give the size of their own blocks. - [Layout](https://inkset.dev/docs/layout.md): The layout stage stacks the measured blocks and calculates the position of each one. It uses only arithmetic, so it does not read from the DOM or cause a browser reflow. - [Render targets](https://inkset.dev/docs/render-targets.md): `@inkset/react` renders the layout to the DOM. The layout itself is a list of positioned blocks that does not depend on the DOM, so you can also use it with your own renderer through `useInkset()`. ## React - [](https://inkset.dev/docs/component.md): `` renders Markdown with the full Inkset pipeline. It includes the default stylesheet, the reveal animations, and a loading state. Use this component unless you need a custom renderer. - [useInkset()](https://inkset.dev/docs/use-inkset.md): `useInkset()` runs the Inkset pipeline without the built-in renderer. Use it when you build your own renderer from the layout, send content to the pipeline from outside React state, or read pipeline… - [Streaming from an LLM](https://inkset.dev/docs/streaming.md): Keep the response text in React state, add each chunk to it as it arrives, and pass the text to ``. This works with the stream from any model provider. - [Generative UI](https://inkset.dev/docs/generative-ui.md): A model can answer with interactive components as well as text. Examples are a calculator for a loan question, a comparison table that the user can sort, or a form that collects the data an agent nee… ## Plugins - [@inkset/code](https://inkset.dev/docs/plugin-code.md): `@inkset/code` highlights code blocks with Shiki. It highlights code while the code streams, before the code fence closes. - [@inkset/math](https://inkset.dev/docs/plugin-math.md): `@inkset/math` renders math with KaTeX. It renders display math blocks, such as `$$…$$`, and inline math in a paragraph, such as `$E = mc^2$`. - [@inkset/table](https://inkset.dev/docs/plugin-table.md): `@inkset/table` renders Markdown tables in a container that scrolls horizontally when the table is wider than the message. It also adds a button that copies the table as CSV. - [@inkset/diagram](https://inkset.dev/docs/plugin-diagram.md): `@inkset/diagram` renders Mermaid code blocks as SVG diagrams. - [@inkset/animate](https://inkset.dev/docs/plugin-animate.md): `@inkset/animate` controls how streaming text appears on the screen. You configure it with the `reveal` prop on ``, and it is not a plugin in the pipeline. - [Writing a plugin](https://inkset.dev/docs/writing-plugins.md): A plugin tells Inkset how to render one type of block. It has a synchronous `transform` function, an optional synchronous `measure` function, and a React component that renders the block. ## Reference - [Theming](https://inkset.dev/docs/theming.md): Inkset includes a default stylesheet. Its colors, fonts, and sizes come from CSS custom properties on the `.inkset-root` element. You can change them with the `theme` prop or with CSS, or you can rem… - [Benchmarks](https://inkset.dev/docs/benchmarks.md): The Compare page streams the same response into Inkset, Streamdown, and react-markdown at the same time. It runs in your browser, so you can compare the renderers on your own hardware. Select **Measu… - [Migration](https://inkset.dev/docs/migration.md): Inkset takes a Markdown string and a list of plugins. To move from another renderer, replace the component and its plugins, and then move the spacing rules from your CSS to `blockSpacing`. ## Agent setup - [Inkset setup skill](https://inkset.dev/skill.md): Steps for a coding agent to add Inkset to a project, or to move a project from react-markdown or Streamdown. Install it with `npx skills add daviskeene/inkset`. ## Optional - [Playground](https://inkset.dev/): An interactive demo that streams sample responses through Inkset, with presets and themes. - [Generative UI demo](https://inkset.dev/generative-ui): A replayed conversation where the answer mixes streamed Markdown with an interactive json-render component. - [Compare](https://inkset.dev/compare): Streams the same response into Inkset, Streamdown, and react-markdown, and measures their render time in the browser. - [GitHub](https://github.com/daviskeene/inkset): Source code, issues, and releases.