Is my Markdown content stored?

No. The editor runs entirely in your browser. Nothing is uploaded.

Do you support math and diagrams?

Yes. KaTeX for math and Mermaid for diagrams are supported.

Can I export my work?

Yes. Export as Markdown (.md) or standalone HTML (.html).

Markdown Editor — Live Preview

Write Markdown with instant preview. Includes KaTeX math, Mermaid diagrams, code highlighting, and export.

Markdown Editor

Editor

# Welcome to ToolsForge Markdown Studio

A fast, modern Markdown workspace with live preview, diagrams, math, and export. This page is an editable guide — try changing anything on the left to instantly see it update on the right.

---

## How to use
- Type Markdown on the left (Editor).
- See formatted result on the right (Preview).
- Use the toolbar for quick formatting.
- Export as .md or .html when you're done.
- Toggle Fullscreen for focused writing.

> Tip: Links open in a new tab. Diagrams (Mermaid) and Math (KaTeX) render automatically.

---

## 1) Headings & Emphasis

Input (Markdown):

```markdown
# H1 Title
## H2 Subtitle
### H3 Section

**bold**  *italic*  ~~strikethrough~~

Inline code: `const msg = "Hello"`
```

Result:

# H1 Title
## H2 Subtitle
### H3 Section

**bold**  *italic*  ~~strikethrough~~

Inline code: \`const msg = "Hello"\`

---

## 2) Lists, Quotes, and Task Lists

Input (Markdown):

```markdown
- First
- Second
  - Nested

> This is a quote block.

- [x] Write
- [ ] Review
- [ ] Publish
```

Result:

- First
- Second
  - Nested

> This is a quote block.

- [x] Write
- [ ] Review
- [ ] Publish

---

## 3) Tables

Input (Markdown):

Result:

---

## 4) Code Blocks with Highlighting

Input (Markdown):

```javascript
function greet(name) {
  console.log(`Hello, ${name!`)
}

greet('ToolsForge')
```

Result:

```javascript
function greet(name) {
  console.log(`Hello, ${name!`)
}

greet('ToolsForge')
```

---

## 5) Mermaid Diagrams

Input (Markdown):

```mermaid
flowchart LR
  A[Write Markdown] --> B[Preview] --> C{Export?}
  C -- MD --> D[.md]
  C -- HTML --> E[.html]
```

Result:

```mermaid
flowchart LR
  A[Write Markdown] --> B[Preview] --> C{Export?}
  C -- MD --> D[.md]
  C -- HTML --> E[.html]
```

---

## 6) Math with KaTeX

Input (Markdown):

```markdown
Inline: $\\int_0^1 x^2\\,dx = \\tfrac{1}{3}$

Block:
$$\\Gamma(z) = \\int_0^\\infty t^{z-1} e^{-t} \\, dt$$
```

Result:

Inline: $\\int_0^1 x^2\\,dx = \\tfrac{1}{3}$

Block:
$$\\Gamma(z) = \\int_0^\\infty t^{z-1} e^{-t} \\, dt$$

---

## 7) Links & Images

Input (Markdown):

```markdown
[ToolsForge](https://www.toolsforge.pro)

![Sample Image](https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?w=640&q=80)
```

Result:

[ToolsForge](https://www.toolsforge.pro)

![Sample Image](https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?w=640&q=80)

---

## 8) Shortcuts & Tips
- Bold: Ctrl/Cmd+B
- Italic: Ctrl/Cmd+I
- Headings: use `#` then space
- Code block: triple backticks ```
- Mermaid: ```mermaid ... ```
- Math: inline $...$ or block $$...$$
- Toggle Fullscreen from the toolbar
- Export via the toolbar (MD/HTML)
Happy writing! — ToolsForge

Preview

Words: 417Characters: 2842Lines: 188

Line 1, Column 1

Key Features

Split-view editor with real-time preview
KaTeX math and Mermaid diagram rendering
Syntax-highlighted code blocks
Toolbar for formatting, tables, links, and images
Export to Markdown (.md) and HTML (.html)
Privacy-first: everything runs locally in your browser

How to Use

Type Markdown in the editor.
See the formatted result in the preview pane.
Use the toolbar to insert formatting, links, images, and tables.
Export as .md or .html when finished.