JPKCom DB

WYSIWYG Editor — Examples

Hands-on runs with the WYSIWYG Editor: export and import Markdown, table and code block, load HTML from a URL, snapshots, and the HTML source.

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

The manual explains every feature and extension in detail. This page adds concrete workflows: typical tasks played through step by step. Button and menu names appear exactly as they do in the interface.

Example 1: Write rich text and export it as Markdown

The classic case — you want to format comfortably and end up with clean Markdown (for a README or a blog post, say).

  1. Open the editor and start writing. Use the live input rules: # at the start of a line makes a heading, - a bullet list, **word** sets it bold. Or type / and pick the block type from the slash menu.
  2. Format as usual: headings via the Block type menu, links with Ctrl+K (or Link in the toolbar), a list via Bullet list. When text is selected, the selection bubble with the key marks appears as well.
  3. Once the text is in place, open the File menu and choose Export Markdown…. A dialog opens with the generated Markdown.
  4. From there: Copy puts the Markdown on the clipboard, Save .md file stores it as a file named after your first heading ("My Report" becomes my-report.md). The output is GitHub Flavored Markdown with ATX headings (#), - bullets, and fenced code blocks.

If you only need the Markdown on the clipboard for a moment, File → Copy as Markdown is quicker. Strikethrough comes out as ~~x~~, subscript and superscript as ~x~ and ^x^, a marker-pen highlight as ==x==. Underline, text color, and alignment have no Markdown equivalent, so they are kept as inline HTML.

Example 2: Import Markdown and rework it visually

You have existing Markdown (a file, a snippet, a .md on the web) and want to edit it comfortably.

  1. In the File menu, open Import Markdown…. The dialog offers three routes:

    • paste Markdown into the large text field,
    • Load .md file for a local file,
    • Load from URL for a .md address on the web (e.g. the index.md of some docs — the fetch goes through the JPKCom proxy).

    File and URL land in the text field first, so you can take a look before committing.

  2. Confirm with Import. The existing editor content is replaced — but the editor takes an automatic snapshot first.

  3. The editor renders the Markdown as formatted text. YAML front matter at the top appears as a yaml code block (instead of being mangled), task lists as checkboxes, $…$/$$…$$ as rendered formulas.

  4. Rework everything visually — and export it again as Markdown when you're done (Example 1; the front matter is back as a --- block at the top) or as HTML (Example 4).

Two shortcuts: you can also open a .md file directly via File → Open file (HTML / Markdown)… or drag it into the editor. And if you copy Markdown as plain text (from a chat or a terminal, say) and paste it with Ctrl+V, the editor formats it right away — Ctrl+Shift+V pastes it unchanged.

Example 3: Insert a table and a code block

Structured content is part of almost any document.

  1. Table: put the cursor on an empty line, type /table, and press Enter — or open the table menu in the Insert group and choose Insert table. Either way you get a 3×3 table with a header row. As soon as the cursor sits in the table, a small bar appears above it: add or delete rows above/below and columns left/right, toggle the header row, merge or split cells, delete the table. The same commands live in the toolbar's table menu. Column widths are draggable.
  2. Code block: type ``` at the start of a line (live rule), use /code in the slash menu, or choose Code block in the Block type menu. Then set the language via the Code language menu — e.g. PHP or JavaScript — and the block is syntax-highlighted.
  3. Check the result via Preview (Light): there you see the table and the color-highlighted code exactly as they look in the HTML or PDF export.

Example 4: Load HTML from a URL, edit it, and save it as a file

You want to take the visible content of a remote page (or one of your own) and rework it.

  1. In the File menu, open Load from URL…. In the Insert HTML from URL dialog, enter an absolute http(s) address. Choose whether the page should Replace the current document or be inserted at the cursor position (Insert at the cursor position), and confirm with Fetch Content.
  2. The server-side JPKCom proxy fetches the HTML (public addresses only, max 950 KB) and loads it into the editor. Relative links/images are rewritten to absolute URLs; anything the editor can't represent (scripts, classes, custom styles) is dropped. When replacing, an automatic snapshot keeps the previous state.
  3. Rework the content in the editor — trim, reformat, add your own paragraphs.
  4. Save via File → Save as HTML a standalone HTML file with an embedded light stylesheet, highlighted code, and rendered formulas — ready to hand off or upload. The file name and the <title> come from the first heading.

Example 5: Add a formula and a collapsible section

For technical or instructional content.

  1. Formula: open the Math menu in the Insert group and choose Inline math ($…$) or Block math ($$…$$) — or type /math. In the Math (LaTeX) dialog, enter the expression, e.g. E = mc^2 or \frac{a}{b} + \sqrt{x^2}; the preview below renders it with KaTeX as you type. Apply or Ctrl+Enter inserts the formula. Clicking the finished formula reopens it in the same dialog.
  2. Collapsible section: click Collapsible section (or /coll in the slash menu). An expanded <details> block appears with the cursor already in the title (summary). Type the title, then the content below it.
  3. On export/print, collapsible sections are automatically expanded so their content is visible and printable.

Example 6: A lossless snapshot via JSON

You want to save an exact intermediate state and continue later unchanged — without the small losses of a Markdown or HTML round-trip.

  1. In the File menu, open Export JSON (TipTap)…. You get the native TipTap document as formatted JSON, copyable (Copy) or saveable as a .json file (Save .json file).
  2. This JSON is lossless — it is the editor's exact document model, including all nodes and marks.
  3. Later you load it back via File → Import JSON (TipTap)… (pasted or via Load .json file). Meant only for this editor: if the JSON is invalid or doesn't match the schema, the editor rejects it and keeps the current content.

For durable, portable exchange use Markdown or HTML; for an exact intermediate state between two sessions in the same tool, JSON is the right choice — or, as long as you stay in the same browser, a snapshot (Example 7).

Example 7: Save and restore intermediate states with snapshots

You're restructuring a text from the ground up and want to be able to jump back to the last good version at any time, without juggling files.

  1. Open File → Snapshots…, enter a name (e.g. "Before trimming"), and click Save current document.
  2. Keep working. Whenever you open a file, import Markdown or JSON, load a URL in replace mode, or clear the document in between, the editor takes a snapshot beforehand on its own — marked "automatic" in the list.
  3. To go back, open Snapshots… again and click Restore on the entry you want. The editor automatically saves the current state before restoring, too, and Ctrl+Z undoes the restore.
  4. Remove snapshots you no longer need with the trash button. At most 20 are kept; beyond that, the oldest automatic ones go first.

Snapshots live in browser storage. For a backup outside the browser, also export as JSON, Markdown, or HTML.

Example 8: Touch up the HTML source directly

Sometimes a small change is faster typed as markup than clicked together — say, a list of links you copied from another document.

  1. Open File → Edit HTML source…. The editor shows the document's HTML, indented, in a code editor with syntax highlighting.

  2. Change or extend the markup, e.g. with another list item:

    <ul>
  <li><a href="https://www.jpkc.com/tools/md/">Markdown Editor</a></li>
  <li><a href="https://www.jpkc.com/tools/source/">HTML/Markdown converter</a></li>
</ul>

  3. Click Apply. The editor takes the HTML into its document model; markup it doesn't know (scripts, classes, custom styles) is dropped along the way. Ctrl+Z takes the change back.

If you only need the HTML as text, Copy in the same dialog or File → Copy as HTML will do.

Going deeper: the overview for the big picture, the manual for every feature in detail, and the tips & tricks for tricks and pitfalls. You can try everything directly in the tool.