Optizon Code

Code for Optizon UI: Monaco-tokenized code blocks, editors mounted on demand, and inline and side-by-side diffs, with Monaco loaded only when used.

• CodeBlock: code as a transcript shows it, rendered as light, colored DOM, becoming a live Monaco editor only when a person interacts with it.
• CodeEditor: a live Monaco editor, read-only or editable, in the same look.
• DiffView: a diff in light DOM, from Claude Code's structured patch, a unified diff or two texts, unified or side by side, with hunk actions and line selection.
• DiffEditor: Monaco's diff editor for a review panel, the new side optionally editable.
• codeFencePlugin(): every @optizon/markdown code fence as a CodeBlock.
• loadMonaco() and configureMonaco(): Monaco itself, and its workers, Trusted Types policies and editor pool.

Install it next to @optizon/ui at the same version (npm install @optizon/[email protected]; it brings @optizon/markdown), add @source "../node_modules/@optizon/code/src"; to your stylesheet, and give Monaco a worker factory with configureMonaco({ getWorker }). The guide, with setups for Vite, webpack and Rspack and the Content Security Policy it needs: https://github.com/optzn/ui/blob/main/docs/CODE.md

The package is ESM-only, ships compiled JavaScript, TypeScript declarations and source, and has @optizon/tokens, @optizon/ui and @optizon/markdown (same version) and React 19 as peers, and monaco-editor as a dependency. Licensed under Apache-2.0.

The agent skill for Codex and Claude Code ships in @optizon/ui and covers code too: npx @optizon/[email protected] install-skill.

Documentation, examples and source: https://github.com/optzn/ui