Markdown Playground

A live Markdown editor and preview with support for code and Mermaid diagrams

Example

Markdown

# Markdown viewer

A live **markdown** preview. Type on the left, see it rendered on the right.

## Text

You can write **bold**, use `inline code` and [links](https://matheusmota.dev.br).

## Lists

- First item
- Second item
- Third item

1. Step one
2. Step two

## Quote

> Simple is better than complex.

## Code

```ts
const answer = 42;
```

## Diagram

```mermaid
flowchart LR
  Write --> Preview --> Ship
```

# Markdown viewer

A live **markdown** preview. Type on the left, see it rendered on the right.

## Text

You can write **bold**, use `inline code` and [links](https://matheusmota.dev.br).

## Lists

- First item
- Second item
- Third item

1. Step one
2. Step two

## Quote

> Simple is better than complex.

## Code

```ts
const answer = 42;
```

## Diagram

```mermaid
flowchart LR
  Write --> Preview --> Ship
```

Rendered

Markdown viewer

A live markdown preview. Type on the left, see it rendered on the right.

Text

You can write bold, use inline code and links.

Lists

First item
Second item
Third item

Step one
Step two

Quote

Simple is better than complex.

Code

const answer = 42;