JPKCom DB

WYSIWYG Editor — Tips & Tricks

Tricks for the WYSIWYG Editor: Markdown and HTML round-trips, the limits of base64 images, auto-save, and combining it with the Markdown Editor.

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. Lossy in edge cases (see below), but maximally compatible.
  • HTML (Save as HTML file) — a standalone, light-themed file with an embedded stylesheet, highlighted code, and rendered formulas. 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.
  • 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.

Knowing the round-trip limits

  • Highlight does not survive the Markdown export. A marker-pen highlight is recognized from ==x== on import, but has no equivalent on export to Markdown — it becomes plain text. If you must keep highlights, export as HTML or JSON.
  • SVG images drop out of the Markdown round-trip. data: URL SVGs are deliberately not run through the Markdown export (security). They are preserved through HTML and JSON export; raster images (PNG, JPEG, GIF, WebP) as base64 survive Markdown too.
  • Sub/superscript uses non-standard syntax. Subscript/superscript come out as ~x~/^x^ — not every Markdown renderer understands that. Check whether your target system knows the sub/sup extension.
  • YAML front matter becomes a code block. If you import Markdown with --- front matter, it lands as a yaml code block in the document (rather than a mangled heading). That's intentional — to keep real front matter, cut it out before import and reattach it after export.

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; many large base64 images can exceed the storage quota (the storage badge then turns red).

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.

Understanding auto-save

  • The content is saved automatically in the browser and restored on the next visit — convenient, but not durable: there is only one storage slot (a single document), and clearing browser data also clears the content.
  • Save important states as a file. Before bigger reworks or switching to another document: export as JSON (lossless) or Markdown/HTML. Clear editor content wipes the storage irreversibly.
  • You start a new document by clearing or replacing the existing content — working on several documents in parallel is not supported.

Working faster

  • Live Markdown instead of the toolbar. # , ## , - , 1. , > , ```, **…**, *…* format as you type — often faster than reaching for the mouse.
  • Use the selection bubble. With text selected, Bold, Italic, Underline, Strikethrough, Inline code, and Add link are right at the cursor.
  • 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 an overview of all headings — a click jumps to the spot.
  • Fullscreen against distraction. Toggle fullscreen hides everything; 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.

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. An accidental replace can be undone with Ctrl+Z.
  • 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.
  • Programmatic paste can be blocked. The Paste button accesses the system clipboard, which browsers restrict; if it fails, just use Ctrl+V.

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. The WYSIWYG editor's HTML-to-Markdown rules come from this tool.
  • 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.