EditorToolbar
ShellsBuild a rich-text editing toolbar from Toolbar and Tooltip components.
Compare code in unified or split views using an LCS diff and focusable scroll regions.
bun add @reopt-ai/opt-uiimport { CodeDiffViewer } from "@reopt-ai/opt-ui";Change the width and theme, then interact with the components.
1- function greet(name) {2- console.log("Hello " + name);1+ function greet(name: string) {2+ console.log(`Hello ${name}`);3+ console.log("Done");34 return true;45 }
1- function greet(name) {2- console.log("Hello " + name);3 return true;4 }
1+ function greet(name: string) {2+ console.log(`Hello ${name}`);3+ console.log("Done");4 return true;5 }
Build a rich-text editing toolbar from Toolbar and Tooltip components.
Read and copy code snippets with line numbers, a focusable scroll region, and syntaxTheme styling.
Edit SQL with CodeMirror syntax highlighting and autocomplete.
Edit Markdown with a formatting toolbar and textarea.
Organize FAQ questions and answers with Composite and Disclosure components.
Add a sticky, fixed-width page aside with header, body, and footer slots.