WYSIWYG Editor — Tips & Tricks

Back to the overview: WYSIWYG Editor · Open the tool live: www.jpkc.com/tools/wysiwyg/

The manual explains every feature, the examples show the workflows. This page is about what both assume but rarely state: picking the right format, knowing the round-trip limits, and combining the tool sensibly with others.

Choosing the right export format

The editor can output four formats — and each has its purpose:

Markdown — for portable, human-readable text: READMEs, docs, blog posts, anything headed for a Markdown system. Whatever Markdown doesn't know (underline, colors, alignment) comes out as inline HTML; details below.
HTML (Save as HTML) — a standalone, light-themed file with an embedded stylesheet, highlighted code, rendered formulas, and readable heading anchors. Good for handing off or uploading directly.
JSON — the lossless native TipTap document. Only meaningful to this very editor, ideal as an exact intermediate state between two sessions or browsers.
PDF / Print — for fixed output on paper or to send. Always light, regardless of the editor theme.

Rule of thumb: Markdown to share, JSON to pause, HTML/PDF to ship.

Often you don't need a file at all: the Copy to clipboard group in the File menu copies the document directly — Copy as formatted text for mail, Word, or Google Docs (structure and formatting come along; code colors and formula typesetting depend on the target program, because no stylesheet is copied — Save as HTML is the safe route for those), Copy as HTML for a CMS field, Copy as Markdown for Git repos, wikis, or an AI chat.

Knowing the round-trip limits

Check the extended syntax. Highlight comes out as ==x==, sub/superscript as ~x~/^x^. This editor reads that back losslessly, but not every Markdown renderer understands these extensions. Check whether your target system does.
Inline HTML in the Markdown. Underline, text color, font, centered paragraphs, collapsible sections, and resized images are exported as HTML snippets (<u>, <span style>, <details>, <img width> …). If your target system filters HTML out of Markdown, exactly those formats are lost — then skip them or export as HTML.
SVG images drop out of the Markdown round-trip. data: URL SVGs are deliberately discarded on Markdown import (security). They are preserved through HTML and JSON export; raster images (PNG, JPEG, GIF, WebP, AVIF …) as base64 survive Markdown too.
Footnotes and definition lists get flattened. On import, footnotes become superscript numbers with a numbered list, definition lists become - **Term** — Definition. The content stays, the structure doesn't.
YAML front matter survives the round-trip. Imported --- front matter appears in the editor as a yaml code block at the top (instead of a mangled heading); on Markdown export it turns back into real front matter. That only works as long as the yaml block stays the first block in the document.

Keeping base64 images in check

Images inserted via Upload (base64) or drag-and-drop are embedded directly into the document — as a base64 string in the HTML. That's convenient (one file, no external dependencies) but has two costs:

The document grows large — a few photos can strongly bloat the HTML and the exported Markdown.
Auto-save stores the entire content in local browser storage, and every snapshot stores it again; many large base64 images can exceed the storage quota. The storage badge then turns red, a notice suggests saving as a file, and the editor trims the snapshot list.

In practice: resize images first and convert them to an efficient format. That's exactly what the Graphic Editor is for — crop, scale, convert to WebP/AVIF, then embed. Where possible, prefer From URL over base64 so the image stays externally referenced. Shrinking an image by its corner handles in the editor, by the way, only changes the displayed size (width/height), not the embedded file.

And since the image dialog has an Alt text field: fill it in. For images already inserted, you reach it via the image bubble (Alt) as soon as you click the image.

Understanding auto-save

The content is saved automatically in the browser (the badge shows "Saved" with the time) and restored on the next visit — convenient, but not durable: clearing browser data also clears the content and the snapshots.
Snapshots as a version store. Before bigger reworks, save the state via File → Snapshots… under a telling name. Before the editor replaces the document (open, Markdown or JSON import, load from URL in replace mode, Clear document, restore), it takes one on its own — so an accidental Clear document is no drama. Exception: Apply in the HTML source editor takes no snapshot; Ctrl+Z helps there.
Still save important states as a file. Snapshots live in the same browser storage as the document. For a real backup or a move to another machine, export as JSON (lossless) or Markdown/HTML.
Several documents can't be edited side by side, but one after the other: save the current one as a snapshot, start a new one with Clear document, and bring the old one back later with Restore.

Working faster

Slash menu instead of the toolbar. / at the start of a line opens a filterable list: /h2, /table, /todo, /code, /math — Enter, done.
Live Markdown as you type. # , ## , - , 1. , > , ```, **…**, *…* format as you type — often faster than reaching for the mouse.
Just paste Markdown. Copy Markdown as plain text (from a .md file, a chat, a terminal) and it gets formatted on paste. To keep the raw characters, use Ctrl+Shift+V.
Links via Ctrl+K. The link dialog adds https:// to bare domains and mailto: to email addresses on its own. With the cursor inside a link, a bubble shows the target and offers edit, copy, and remove.
Use the bubbles. With text selected, Bold, Italic, Underline, Strikethrough, Inline code, Link, Highlight, and Clear formatting are right at the cursor; inside tables, the row/column bar appears above the table.
Find & replace with regex. Ctrl+H opens replace; the Case, Word, and Regex options make bigger reworks manageable.
Table of contents to jump. For long documents, Table of contents opens a numbered overview of all headings — a click jumps to the spot.
A readable line length. Page width → Narrow (760 px) narrows the writing surface on wide monitors; Toggle fullscreen hides everything else, and Esc brings you back.
The theme is just for your eyes. Dark/Light/Sepia only change the writing surface — the output (preview, print, HTML, PDF) is always light.
First heading = file name. Give the document a heading early; HTML, Markdown, JSON, and PDF exports are then named after it (without a heading, the editor uses the first line of text). Snapshots without a name of their own carry that title too.

Pitfalls

Import replaces, it doesn't append. Markdown, JSON, and file import, as well as a document opened by drag-and-drop, replace the entire editor content. Your way back: Ctrl+Z or the automatic snapshot. To bring in a web page in addition to what you have, choose Insert at the cursor position under Load from URL….
The schema filters. When opening HTML, loading URLs, and on Apply in the source editor, only what the editor can represent survives. Classes, custom styles, scripts, and forms disappear — the editor is no page builder.
JSON only from this editor. JSON import expects this editor's schema. Foreign JSON is rejected (with an error message), and the content is kept.
localhost/intranet won't work. The URL fetch (HTML or Markdown) blocks private and internal addresses for security; only public http(s) URLs up to 950 KB are allowed, at most 120 fetches per minute.
Programmatic paste can be blocked. The Paste button accesses the system clipboard, which browsers restrict; if it fails, just use Ctrl+V. The same goes for Copy as formatted text: without browser support, the editor copies plain text only.
Print window and popup blockers. Print… opens a new window. If the browser blocks it, allow popups for the site or use Save as PDF.

Combining with other JPKCom tools

Markdown Editor — the closest relative. If you think in Markdown anyway, write there directly with live preview instead of going via rich text and export. Conversely, the WYSIWYG Editor is the right choice when you want to format without keeping Markdown syntax in your head.
HTML/Markdown converter — for pure, targeted conversions without an editor surface. It converts with its own engine (html-to-markdown, WebAssembly), so it doesn't always produce the same Markdown as the WYSIWYG editor's export.
Beautify — indent and format the exported HTML consistently.
Graphic Editor — crop, shrink, and convert images to WebP/AVIF before you embed them as base64 (see above).

More context: the overview for the big picture, the manual for every feature, and the examples for the step-by-step workflows. You can try everything directly in the tool.