JGuang / JGuang UI

July 2026 - Introducing JGuang UI/typeset

本页提供 JGuang UI 技术内容、中文导航与术语适配。

中文模式已适配导航、标题、简介、目录与常用章节名称。翻译状态:部分完成;技术正文目前仍为英文。

Today we're releasing JGuang UI/typeset: a styling system for HTML and rendered markdown, in one CSS file.

Your app renders the same HTML elements everywhere: headings, paragraphs, lists, tables, and code. You style them for your blog, then your docs, and now chat. Typeset lets you style them once, then tune the rhythm for each context.

<div className="typeset">{content}</div>

Add one class and everything inside gets styled. Typeset follows the size of its container, uses your theme, and gives you three controls: size, leading, and flow.

You can create as many typesets as you need. Use a tighter rhythm for chat and a roomier one for docs:

.typeset-chat {
  --typeset-leading: 1.6;
  --typeset-flow: 1em;
}

.typeset-docs {
  --typeset-size: 15px;
  --typeset-leading: 1.75;
  --typeset-flow: 1.5em;
}
<div className="typeset typeset-chat">{message}</div>
<article className="typeset typeset-docs">{page}</article>

It's also designed for streaming, so new blocks don't restyle earlier ones. The file lives in your project. There's no package or config layer to work around.

Open the typeset builder to create yours, or read the Typeset docs for the full guide.

Build your typeset

Read the docs

来源: changelog/2026-07-typeset.mdx

JGuang UI 技术文档。