# 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.

Source: https://www.jpkc.com/db/en/tools/wysiwyg/examples/

Back to the overview: [WYSIWYG Editor](https://www.jpkc.com/db/en/tools/wysiwyg/) · Open the tool live: [www.jpkc.com/tools/wysiwyg/](https://www.jpkc.com/tools/wysiwyg/)

The [manual](https://www.jpkc.com/db/en/tools/wysiwyg/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](https://www.jpkc.com/tools/wysiwyg/) 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](https://www.jpkc.com/db/en/tools/wysiwyg/) for the big picture, the [manual](https://www.jpkc.com/db/en/tools/wysiwyg/manual/) for every feature in detail, and the [tips & tricks](https://www.jpkc.com/db/en/tools/wysiwyg/tips/) for tricks and pitfalls. You can try everything directly in the [tool](https://www.jpkc.com/tools/wysiwyg/).