Getting started

The editor works controlled or not, with the document as JSON or HTML. JSON is what you should store: it loses nothing. RichTextView renders the same document without loading the editor.

import { RichTextEditor, RichTextView } from '@amset/ui/rich-text' export function Notes({ html, onChange }: { html: string; onChange: (html: string) => void }) {  return <RichTextEditor label="Notes" format="html" defaultValue={html} onChange={onChange} rows={8} />} // Solo lectura, sin cargar el editor (también en el servidor)export function Preview({ html }: { html: string }) {  return <RichTextView format="html" value={html} />}

Formats

Each converter is imported only if you use it; the editor loads none of them.

• HTML: toHtml and fromHtml. Everything the editor can do comes out as valid HTML and is read back.
• Markdown: toMarkdown and fromMarkdown (CommonMark, plus GFM tables, tasks and strikethrough). What Markdown cannot say (underline, colour, alignment, merged cells) is written as HTML inside the Markdown, so the document survives the round trip. Formulas are stored between $$. A test checks it with 1500 random documents.
• Word: toDocx and fromDocx write and read .docx files with headings, nested lists, tables with merged cells, links, images and mentions. Suggestions come out as tracked changes and comments as Word comments, and are read back. Columns come out as a single column and formulas as the TeX, in code style.
• React code: toTsx turns the document into a React component that imports from @amset/ui.

import { toMarkdown, fromMarkdown, toDocx } from '@amset/ui/rich-text' const markdown = toMarkdown(doc)const back = fromMarkdown(markdown)const bytes = await toDocx(doc)

Your own blocks

A block is a piece of yours (a product card, a chart, a form) inside the text. The document stores only its type and some JSON data with limits on size and depth; what you see is decided by your render, used the same in the editor, in RichTextView and on the server. A block nobody knows how to draw is kept as it is, not lost.

const blocks = {  'product-card': {    label: 'Product card',    defaultProps: { name: 'Product', price: '0 €' },    render: (props) => <ProductCard {...props} />,  },} <RichTextEditor label="Page" blocks={blocks} />

import { RichTextEditor, createLanguageToolSpellchecker, diffDocuments } from '@amset/ui/rich-text' <RichTextEditor  label="Contract"  spellchecker={createLanguageToolSpellchecker({ url: '/api/spellcheck', language: 'en' })}  review={{ author: 'Ana', threads, onThreadsChange: setThreads, suggesting, onSuggestingChange: setSuggesting }}  versions={{ versions, load: loadVersion, onSave: saveVersion, onRestore: restoreVersion }}/> // The same comparison outside the editorconst changes = diffDocuments(before, after)

Real-time editing, with several people typing at once and their cursors in view, is not here yet. It needs a sync server and per-user credentials, and will come later. Meanwhile, comments, suggestions and versions work on a document that is saved and reopened.

import { RichTextEditor, amsetBlocks } from '@amset/ui/rich-text' const blocks = amsetBlocks({  actions: { save: { label: 'Save draft', run: () => saveDraft() } },  data: { sales: { label: 'Monthly sales', value: sales } },}) <RichTextEditor label="Report" blocks={blocks} />

{  "type": "component",  "kind": "amset-card",  "props": { "title": "Summary" },  "content": [{ "type": "paragraph", "inline": [{ "type": "text", "text": "Quarter figures", "marks": [] }] }]}

A safe HTML viewer

HtmlViewer draws HTML you do not control: an email template, the body of a message, the HTML a model returns.

import { HtmlViewer } from '@amset/ui/rich-text' <HtmlViewer html={untrustedHtml} images="https" onReport={(report) => log(report)} /> // El diseño del autor, aislado en un iframe<HtmlViewer html={newsletter} mode="page" images="https" />

To code and to agents

toTsx(doc) returns the code of a React component with the library components, actions as actions.save and data as data.sales, plus a list of warnings for what could not be carried over as is. For an assistant, listComponents(), describeComponent(kind) and createComponent(kind, props) give the catalogue, a component’s sheet and an already validated block, with the errors explained instead of a broken block.

import { toTsx, listComponents, createComponent } from '@amset/ui/rich-text' const { code, warnings } = toTsx(doc, { componentName: 'Report' }) listComponents()                       // the catalogueawait createComponent('amset-stat', { label: 'Orders', value: '342' })

Security

• What is pasted, imported and loaded goes through allowlists; nothing unlisted reaches the document.
• The document never holds functions, scripts or arbitrary styles. Custom and library blocks are validated against their schema and with size limits.
• Links accept http, https, mailto, tel and relative paths; images accept http, https and own paths, never data:.
• The HTML viewer is tested with more than 50 attack vectors and 600 randomly mutated documents.

Accessibility and weight

The field is a role="textbox" with its label, the toolbar works with the keyboard, important changes are announced and every story passes axe. The full editor weighs about 99 KB gzipped and RichTextView, which only reads, about 21 KB. The review and version panels, the formula converter, the AMSET UI components and the Markdown and Word converters load only if used.

Keep reading

• Try it in the playground
• AI and text editor