WYSIWYG Editor

Write like in Word, get out what a developer needs

The WYSIWYG Editor is a rich text editor in the browser: you write on a single, formatted surface — bold, italic, headings, lists, tables, images, code blocks — and see how the text looks as you go. No split source pane, no markup language in the way. Under the hood it still produces clean HTML, which you can get back out as an HTML file, as Markdown, as JSON, or as a PDF.

That solves a concrete problem: anyone writing content for a website, a README, or documentation wants to focus on the text — but in the end you need machine-readable markup. The WYSIWYG Editor bridges exactly that. You type comfortably, and on export you pick the format your target system understands.

The tool is built for everyone who produces formatted text without hand-typing HTML or Markdown: editorial and content people who format posts and hand them off as Markdown or HTML; developers who want to quickly assemble a piece of HTML or visually rework existing Markdown; and anyone who wants to pull an existing document (a Markdown file, an HTML file, a page via URL) into an editable form and emit it again. Everything runs in the browser — no account, no installation.

What the editor can do — grouped

The editor is built on TipTap (opens in a new tab) (the headless rich text framework on top of ProseMirror) and bundles its extensions into a complete writing environment. The features fall into three blocks.

Rich text editing

The writing surface itself handles the full range of formatting:

Text marks: bold, italic, underline, strikethrough, inline code, superscript and subscript, text color, and highlight.
Blocks: paragraph, headings H1 through H6, quote, code block, bullet, numbered, and task lists (with checkboxes), horizontal rule, collapsible sections.
Insert: links (through a dialog on Ctrl+K), images (by URL with alt text or as a file upload, resizable by their corner handles), tables (with column/row operations and a header row), math formulas (KaTeX, inline and block, with a live preview), and emojis.
Convenience: a slash menu (type / for headings, lists, table, image, formula …), live Markdown input rules (type # for a heading, - for a list), pasted Markdown that formats itself, context bubble menus for selections, links, images, and tables, a drag handle to move blocks, find and replace, a table of contents, three editor themes (dark, light, sepia), a selectable page width, fullscreen, and preview.
Safety net: automatic saving in the browser plus snapshots — named versions you keep yourself, and one the editor takes on its own before opening, importing, loading a URL, or Clear document replaces the document.

Markdown in and out

Markdown is a first-class citizen — in both directions. You can import Markdown (in the import dialog, as a .md file, loaded from a URL, or simply pasted into the editor) and export your current content as Markdown at any time (copy it or save it as a .md file). Import goes through markdown-it (opens in a new tab), export through Turndown (opens in a new tab) with the GitHub Flavored Markdown extension — tables with their column alignment, task lists, code blocks, highlights, formulas, and YAML front matter included. Export, re-import the result, and export again, and you usually get the same Markdown back (exception: table columns marked left-aligned, see the manual).

HTML, JSON, and PDF

Beyond Markdown there are more ways in and out, all gathered in the File menu: open and edit an HTML file, or save the content as a standalone HTML file; load HTML from a URL (as a new document or at the cursor position); edit the HTML source directly; export the native TipTap document as JSON and import it back (lossless, but only meant for this editor); copy the content to the clipboard as formatted text, HTML, or Markdown; and finally print and PDF export. Code blocks are syntax-highlighted throughout — live in the editor as well as in preview, print, and export. Exported files are named after the document's first heading.

Architecture: almost everything in the browser

The editor runs almost entirely client-side. Typing, all formatting, the Markdown, JSON, and HTML export, and the PDF export happen in your browser; your content and your snapshots are kept in local browser storage and never uploaded to a server. The one exception is fetching a remote URL (loading HTML or Markdown from a URL): because your browser cannot load remote pages directly for security reasons (CORS), a server-side JPKCom proxy fetches them — so the target page sees a request from the JPKCom server, not your IP. Details and the security limits are in the manual.

Try it now

→ Open the WYSIWYG Editor — start writing, format, export in the format you need. No account, free, right in the browser. Thanks to auto-save, your text stays until you clear it — and even then a snapshot is left behind.

Markdown Editor — the closest relative: a Markdown-centric editor with live preview. Ideal if you'd rather write directly in Markdown than export it from rich text.
HTML/Markdown converter — converts HTML and Markdown into each other, today with its own conversion engine (html-to-markdown, WebAssembly). The WYSIWYG editor took some of its Turndown rules from this tool's former converter path; the two tools therefore don't convert identically.
Beautify — neatly and consistently indent the exported HTML.
Graphic Editor — crop, resize, and convert images to WebP/AVIF before you embed them (embedded images land as base64 in the document and bloat it).

There's more on the subpages: the manual with every feature and extension in detail, hands-on examples, and a collection of tips & tricks.