#Getting Started

MD2Web is a browser-based Markdown editor with live HTML preview. There is nothing to install — open the app, start writing, and export to a self-contained HTML file when you're done.

#The Interface

The editor is split into two panes:

Left pane — Editor: where you write your Markdown. The editor features syntax highlighting, line numbers, and a toolbar for quick formatting.

Right pane — Preview: a live HTML preview that updates as you type. Use the theme selector to switch between eight different visual styles.

A draggable divider sits between the two panes. Drag it left or right to give more space to either pane. Both panes have a fullscreen button in their header — click it to expand one pane to fill the entire screen.

#Saving Files

MD2Web auto-saves your work every 2 seconds to the browser's localStorage. Your files persist between sessions without any manual action. You can also save manually with Ctrl+S.

The file name appears in the editor header — click it to rename the current file.

#Writing Markdown

#Inline Formatting

Inline formatting is applied within a paragraph using special characters:

#Headings

Headings are created with # symbols. The number of # symbols determines the level (1–6):

# Heading 1
## Heading 2
### Heading 3
#### Heading 4

Every heading automatically gets a clickable anchor link — a # symbol appears on hover. You can also assign a custom ID to any heading by appending {#your-id}:

## My Section {#my-section}

Link to it from anywhere in the document with [link text](#my-section).

#Paragraphs & Line Breaks

A blank line between text creates a new paragraph. A single line break within a paragraph is treated as a space. To force a line break within a paragraph, end the line with two spaces.

#Blockquotes

> This is a blockquote.
> It can span multiple lines.
>
> Even multiple paragraphs.

This is a blockquote.
It can span multiple lines.

Even multiple paragraphs.

#Horizontal Rules

A horizontal rule is created with three or more dashes on their own line:

---

#Lists

Unordered lists use -, +, or * followed by a space:

- First item
- Second item
  - Nested item
  - Another nested item
- Third item

• First item
• Second item
  • Nested item
  • Another nested item
• Third item

Ordered lists use numbers followed by a period:

1. First step
2. Second step
   1. Sub-step A
   2. Sub-step B
3. Third step

1. First step
2. Second step
   1. Sub-step A
   2. Sub-step B
3. Third step

Task lists use - [ ] for an open item and - [x] for a checked item:

- [x] Completed task
- [ ] Open task

• Completed task
• Open task

#Tables

Tables use pipe | characters to separate columns. The second row defines alignment using colons:

| Name  | Role      | City      |
|-------|-----------|-----------|
| Alice | Developer | Amsterdam |
| Bob   | Designer  | Berlin |

For left alignment use |:---|, for right use |---:|, for center use |:---:|.

#Definition Lists

Definition lists use a term on one line followed by : definition on the next:

Markdown
: A lightweight markup language for formatting plain text.

HTML
: HyperText Markup Language, the standard markup language for web pages.

Markdown

A lightweight markup language for formatting plain text.

HTML

HyperText Markup Language, the standard markup language for web pages.

#Footnotes

Define a footnote anywhere in the document with [^id]: text and reference it inline with [^id]:

Markdown was created by John Gruber[^gruber] in 2004.

[^gruber]: John Gruber published the original specification 
on his blog [Daring Fireball](https://daringfireball.net/).

Markdown was created by John Gruber¹ in 2004.

Footnotes are numbered automatically and collected at the bottom of the page (or section, in multisite documents).

#Links & Images

#Inline Links

The standard link syntax is [link text](url). External links (starting with http:// or https://) automatically open in a new tab:

[Visit example.com](https://example.com)
[Jump to section](#my-section)

Visit example.com
Jump to section

To add a tooltip, include a title in quotes after the URL:

[Hover me](https://example.com "This is a tooltip")

Hover me

#Reference-style Links

Reference-style links keep your prose clean by separating the URL from the text. Define the reference anywhere in the document:

I get traffic from [Google][1] and [Yahoo][2].

[1]: http://google.com/  "Google"
[2]: http://search.yahoo.com/  "Yahoo Search"

I get traffic from Google and Yahoo.

Link names can be words instead of numbers, and are case-insensitive:

I read [The New York Times][nyt] every morning.

[nyt]: http://www.nytimes.com/

I read The New York Times every morning.

#Images

The image syntax is similar to links, with a ! prefix:

![Alt text](https://example.com/image.png)
![Alt text](https://example.com/image.png "Optional title")

Setting image width: append {width} directly after the closing parenthesis. Both pixel values and percentages are supported:

![Logo](https://example.com/logo.png "{200px}")
![Web App](https://md2web.com/img/web-app.png "{40%}")

The image is never wider than its container regardless of the specified width.

#Code & Diagrams

#Inline Code

Wrap code in single backticks for inline code: `code` renders as code.

#Code Blocks

Fenced code blocks use triple backticks. Specify the language after the opening backticks for syntax highlighting. For example, a JavaScript block starts with ```javascript and ends with ```:

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
```

Which renders as:

function greet(name) {
  return `Hello, ${name}!`;
}

Supported languages include javascript, python, css, html, php, bash, sql, json, yaml, markdown, and many more.

#Mermaid Diagrams

Mermaid diagrams are written inside a fenced code block with mermaid as the language. MD2Web renders them as SVG graphics in the preview.

Flowchart:

```mermaid
graph LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Do it]
    B -->|No| D[Skip it]
    C --> E[Done]
    D --> E
```

Which renders as:

Sequence diagram:

```mermaid
sequenceDiagram
    participant U as User
    participant A as App
    U->>A: Writes markdown
    A->>U: Shows HTML preview
```

Which renders as:

Use the toolbar's Mermaid button to insert a template. The diagram theme automatically matches the current light or dark theme.

#KaTeX Math

Inline math is wrapped in single dollar signs. Display (block) math uses double dollar signs on their own lines:

Inline: $E=mc^2$ and $a^2 + b^2 = c^2$

Block:
$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

Inline: $E=mc^2$ and $a^2 + b^2 = c^2$

#Callouts & Columns

#Callouts

Callouts use the Obsidian syntax: > [!TYPE] followed by the callout body. Six types are supported:

> [!NOTE]
> Body text here.

> [!TIP]
> A helpful tip.

> [!WARNING]
> Something to watch out for.

> [!DANGER]
> A serious warning.

> [!SUCCESS]
> A positive result.

> [!QUESTION]
> A question or uncertainty.

Foldable callouts: add + after the type to make it foldable (starts open), or - to start collapsed. You can also add a custom title:

> [!TIP]+ This tip is foldable and starts open
> Click the header to collapse.

> [!WARNING]- This warning starts collapsed
> Click to expand.

#Column Layouts

Use :::columns to start a multi-column layout. Each column begins with :::col. Close the layout with ::: on its own line. Up to three columns are supported — they stack vertically on narrow screens.

::: columns
::: col
**Left column** content here.
::: col
**Right column** content here.
:::

#Page Layout

#Frontmatter

Frontmatter is a YAML block at the very top of the document, enclosed between --- markers. It controls the page title, metadata, and layout options:

---
title: My Document
description: A short description for search engines and social sharing
author: Your Name
logo: :pencil:
image: https://example.com/preview.png
url: https://example.com/my-page
lang: en
header: true
toc: true
---

Use the ⚙ settings button in the editor header to edit all frontmatter fields via a GUI — no YAML knowledge required.

#Page Header

When header: true is set, a styled header bar appears at the top of the preview with the logo and title. The header colour adapts automatically to the active theme.

#Page Footer

A footer can be added by placing content between --- markers at the very end of the document, preceded by a blank line:

(rest of document)

---
Footer content here — **markdown**, [links](https://example.com) and :emoji: all work.
---

The footer matches the header in style and adapts to the active theme.

#Table of Contents

When toc: true is set, a table of contents sidebar appears on the left side of the preview, listing all H2, H3, and H4 headings with clickable links.

#Multisite Documents

When a document contains two or more H1 headings and header: true is set, MD2Web automatically creates a multi-page layout:

• Each H1 heading becomes a separate page
• A navigation bar appears in the header with links to each page
• Footnotes are automatically redistributed to the page where they are referenced
• The table of contents shows headings for the current page only
• Deep links work via ?page=section-id in the URL — useful for bookmarking or sharing a specific page

#Themes

Eight preview themes are available, selected from the dropdown in the preview pane header:

The Mermaid diagram theme automatically matches the selected light or dark theme.

#Export

#HTML Export

Click Export ▾ → Export HTML to download a fully self-contained HTML file. The exported file:

• Embeds all CSS inline for the default theme — works without any external files
• Includes full Open Graph and Twitter Card meta tags from frontmatter
• Adds a <link rel="canonical"> if a url is set in frontmatter
• Contains a dark/light toggle button (🌓) that respects prefers-color-scheme
• Supports deep linking via ?page=section-id for multisite documents

The exported HTML is ready to upload to any web server — no build step, no dependencies.

#Markdown Export

Click Export ▾ → Export Markdown to download the raw Markdown source as a .md file.

#Google Drive

MD2Web can connect to your Google Drive to save and open .md files directly — without downloading and re-uploading manually. Your files are stored in a dedicated MD2Web folder in your Drive.

#Connecting Google Drive

Open the File Manager (Files icon in the editor header) and scroll to the Google Drive section at the bottom. Click Connect Google Drive to sign in with your Google account and grant MD2Web access. The status dot turns green when connected.

Your connection persists between sessions. Click Disconnect to revoke access at any time.

#Saving to Drive

With Google Drive connected, click ⬆ Save to Drive in the File Manager. The current file is saved to the MD2Web folder in your Drive. If the file was previously opened from Drive, it is updated in place — no duplicate is created.

#Opening from Drive

Click ⬇ Open from Drive to see a list of .md files in your Drive's MD2Web folder, sorted by most recently modified. Click Open next to any file to load it into the editor. The file is copied into your local file manager and subsequent saves go back to the same Drive file automatically.

#Editor Features

#Toolbar

The toolbar provides one-click access to all major formatting options. Hover over any button to see its function. On narrow screens, the toolbar scrolls horizontally.

#Search & Replace

Open search with Ctrl+F or Ctrl+H, or click the search icon in the editor header. Options include:

• Regex — search using regular expressions
• Case sensitive — match uppercase/lowercase exactly
• Whole word — match complete words only

Use Enter to jump to the next match, and the Replace / Replace All buttons to substitute text.

#File Manager

Click the Files icon in the editor header to open the file manager. From here you can:

• Create new files and folders
• Rename files (click the file name in the editor header)
• Move files between folders using the folder dropdown
• Duplicate the current file
• Delete files and folders
• Export all files as a JSON backup
• Import files from a previously exported JSON backup

Files are stored in the browser's localStorage and persist between sessions.

#Paste HTML as Markdown

When you paste content copied from a web page, email, or any other HTML source, MD2Web automatically converts it to clean Markdown. This works silently in the background — just copy from your browser and paste into the editor as usual with Ctrl+V.

The following HTML elements are converted automatically:

If the clipboard contains only plain text (no HTML), the text is pasted as-is without any conversion.

#Undo & Redo

MD2Web maintains a per-file undo history of up to 200 states. Use Ctrl+Z to undo and Ctrl+Y or Ctrl+Shift+Z to redo.

#Keyboard Shortcuts

#Sync Scroll

When both panes are visible, scrolling in one pane automatically scrolls the other to the corresponding position. Toggle sync scroll using the sync icon in the preview header.

#Line Numbers

Line numbers are shown in the left margin of the editor. They update dynamically as you type.