CTRL K

Edit, Complete, and Format HTML Source

July 28, 2026•2 min read

Edit, Complete, and Format HTML Source

Switch an HTML tab to Editor mode to work with the original source. The CodeMirror-based editor saves the HTML string without converting it to Markdown.

Core editing tools

The source editor includes:

HTML syntax highlighting and line numbers;
code folding, search, and automatic indentation;
quote, bracket, and tag closing;
HTML and CSS completion;
Emmet abbreviation expansion with Tab;
automatic save and Cmd/Ctrl + S.

Try an Emmet abbreviation:


main.docs>section*2>h2+p

Press Tab to expand it, then replace the placeholder text.

Format the document

Use the toolbar or:

macOS: Shift + Option + F
Windows and Linux: Shift + Alt + F

Format Document applies the HTML parser and also formats embedded CSS and JavaScript where supported.

Tag-aware commands

The editor can operate on a matching start and end tag:

F2 renames both sides of the current tag.
Cmd/Ctrl + Shift + \ moves to the matching tag.
Cmd/Ctrl + Alt + J splits or joins a tag.
Cmd/Ctrl + Alt + K removes a tag while preserving its content.

For example, put the cursor in either section tag and press F2:


<section class="summary">
  <p>Release summary</p>
</section>

Rename it to article; both matching tags update.

Workspace-aware completion

Path completion is available in src, href, poster, and CSS url(...). The editor can also suggest classes and IDs from linked CSS and function names from linked JavaScript.

Diagnostics report malformed syntax, duplicate IDs, images without alt, and local paths that do not exist. Treat them as focused editing guidance, not a complete browser compatibility audit.

Use Safe Preview beside the source to verify the rendered result without enabling scripts by default.