JPKCom DB

WYSIWYG Editor — Examples

Hands-on runs with the WYSIWYG Editor: export and import Markdown, insert a table and code block, load HTML, and save it as a file.

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. The tool's interface is in English, so button and menu names appear in their original spelling.

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 reach for the toolbar.
  2. Format as usual: headings via the Block type menu, links via Add link, 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, click Export in the Markdown group. A dialog opens with the generated Markdown.
  4. From there: Copy puts the Markdown on the clipboard, Save .md file stores it as document.md. The output is GitHub Flavored Markdown with ATX headings (#), - bullets, and fenced code blocks.

Subscript and superscript come out as ~x~ and ^x^. A marker-pen highlight, however, becomes plain text on Markdown export — it has no standard equivalent in Markdown.

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. Click Import in the Markdown group. 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. an index.md of some docs — the fetch goes through the JPKCom proxy).
  2. Confirm with Import. Note: the existing editor content is replaced.
  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 (Example 1) or as HTML (Example 4) when you're done.

Example 3: Insert a table and a code block

Structured content is part of almost any document.

  1. Table: place the cursor where you want it, open the table menu in the Insert group, and choose Insert table (creates a 3×3 table with a header row). The same menu lets you add columns/rows before or after, delete them, toggle the header row via Toggle header row, or merge cells with Merge / split cells. Column widths are draggable.
  2. Code block: type ``` at the start of a line (live rule) 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. Click Insert HTML from URL in the File operations group. Enter an absolute http(s) address in the dialog 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.
  3. Rework the content in the editor — trim, reformat, add your own paragraphs.
  4. Save via Save as HTML file a standalone HTML file (document.html) with an embedded light stylesheet, highlighted code, and rendered formulas — ready to hand off or upload.

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 ($$…$$). Enter the LaTeX expression (e.g. E = mc^2) — KaTeX renders it instantly. Clicking the finished formula reopens it for editing.
  2. Collapsible section: click Collapsible section. An expanded <details> block appears: the title (summary) on top, the content below. Type the title and text in.
  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. Click Export in the JSON group. You get the native TipTap document as formatted JSON, copyable or saveable as document.json.
  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 JSON → Import (pasted or as a 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 instead of emptying it.

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.

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.