Markdown is a lightweight plain-text syntax that converts to HTML, ideal for documentation and notes.

Markdown Editor

Write Markdown with a clean, responsive split view and real-time preview. Supports bold/italic, code blocks, links, images, lists, and tables. Export as HTML or Markdown.

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.com)

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

Result:

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

![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

Features

Live Preview

Instantly preview your Markdown with beautiful typography.

Rich Toolbar

Quickly insert headings, bold/italic, blockquotes, lists, links, images, and tables.

Export Options

Download your work as Markdown (.md) or a standalone HTML file.

Responsive

Optimized for desktop and mobile with split view layout.

Accessible

Keyboard-friendly controls and semantic markup.

Private

Runs entirely in your browser – your content never leaves your device.

How This Editor Works

Type Markdown on the left and see a live-rendered preview on the right. The editor preserves your Markdown source exactly, while the preview converts it to semantic HTML for readability.

Why Use Markdown?

Lightweight syntax for headings, emphasis, links, and images
Portable across wikis, blogs, documentation, and README files
Plain text format that works well with version control

Markdown Basics

Headings: # H1, ## H2, ### H3
Emphasis: *italic*, **bold**, ~~strike~~
Lists: - item (bulleted), 1. item (numbered)
Links & Images: [text](url), ![alt](image.png)
Code: `inline` and fenced blocks with language: ```js
Tables: pipes and dashes to define rows and columns

Related Tools

Base64 Encoder / Decoder – Embed small assets or convert content safely.
Text Diff – Compare Markdown versions side-by-side.
JSON Formatter – Clean up JSON snippets used in docs.

Popular Use Cases

Writing README files and open-source documentation
Creating blog posts and knowledge base articles
Drafting technical specs with inline code snippets
Taking clean, portable meeting notes

Frequently Asked Questions

What is Markdown?

Markdown is a plain-text formatting syntax that converts to HTML. It’s easy to write and read, making it perfect for docs and notes.

Can I export my content?

Yes. Export as a .md file or a standalone .html file right from the editor.

Does my text get uploaded?

No. This editor runs completely in your browser for privacy.

Do you support tables and code blocks?

Yes. Use fenced code blocks with language hints and table syntax based on pipes and dashes.