Build it in HTML

One technique per guide, each with a live example you can try, edit and copy.

Guides 841-848 of 848. Page 15 of 15.

monaco editor custom language

Monaco custom language: color a small rule file with Monarch

Register and test a deliberately small Monarch tokenizer separately from semantic language services.

monaco editor context menu

Monaco context menu: add an action to the editor that owns it

Contribute a scoped Monaco menu action that displays the current source selection safely through an alternative button too.

monaco editor font size

Monaco editor font size: enlarge source without changing the page CSS

Enlarge source text with a synchronized size selector while preserving model contents and page CSS.

codemirror indentation

CodeMirror indentation: choose inserted whitespace and tab display separately

Set two-space inserted indents, four-column existing tab display, and deliberately increase/decrease selected-line indentation.

codemirror placeholder

CodeMirror placeholder: show an empty-editor hint without saving it as source

Show a non-document empty-state hint with a persistent accessible field name and save only real source.

tiptap selection

Tiptap selection: read the selected passage without scraping the page

Extract current selected document text into an external comment draft without changing source or scraping DOM.

Quill toolbar: connect your own controls to the intended editor

Bind an explicit Quill toolbar and distinguish offered heading values from accepted document formats.

Altair in Python: build a chart you can hand over as HTML

Build an Altair chart with a team selector, export its actual data, and choose online or bundled HTML for a review handoff.