JPKCom DB

WYSIWYG Editor

A TipTap-based rich text editor with Markdown import/export, HTML export, and code syntax highlighting — your starting point for manual, examples, and tips.

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 (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, images (by URL or as a file upload), tables (with column/row operations and a header row), math formulas (KaTeX, inline and block), and emojis.
  • Convenience: live Markdown input rules (type # for a heading, - for a list), a selection bubble with the key marks, a drag handle to move blocks, find and replace, a table of contents, three editor themes (dark, light, sepia), fullscreen, preview, print, and automatic in-browser saving.

Markdown in and out

Markdown is a first-class citizen — in both directions. You can import Markdown (pasted, as a .md file, or loaded from a URL) and export your current content as Markdown at any time (copy or save as a .md file). Import goes through markdown-it, export through Turndown with the GitHub Flavored Markdown extension — including tables, task lists, code blocks, and formulas.

HTML, JSON, and PDF

Beyond Markdown there are more entry and exit points: open and edit an HTML file, or save the content as a standalone HTML file; load HTML from a URL into the editor; export the native TipTap document as JSON and import it back (lossless, but only meant for this editor); and finally preview, print, and PDF export. Code blocks are syntax-highlighted throughout — live in the editor as well as in preview, print, and export.

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 is saved automatically in local browser storage and never uploaded to a server. The one exception is fetching a remote URL (insert HTML or load 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.

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