Markdown Editor

Editor

# Markdown Editor

A **live preview** markdown editor built with the Gumroad design system.

## Features

This editor supports all the standard markdown you'd expect:

### Text Formatting

You can write **bold text**, *italic text*, `inline code`, and ~~strikethrough~~.

### Links & Images

Visit [DevDigest](https://developersdigest.tech) for more demos.

### Code Blocks

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

greet("World");
```

### Lists

Unordered list:
- First item
- Second item
  - Nested item
  - Another nested item
- Third item

Ordered list:
1. Step one
2. Step two
3. Step three

### Task Lists

- [x] Build the editor
- [x] Add live preview
- [ ] Add syntax highlighting
- [ ] Ship it

### Blockquotes

> "The best way to predict the future is to invent it."
> — Alan Kay

### Tables

| Feature | Status | Priority |
|---------|--------|----------|
| Editor | Done | High |
| Preview | Done | High |
| Export | Done | Medium |
| Themes | Planned | Low |

### Horizontal Rule

---

That's it! Start typing on the left to see your markdown rendered in real time.

196

words

1155

chars

min

Preview

Markdown Editor

A live preview markdown editor built with the Gumroad design system.

Features

This editor supports all the standard markdown you'd expect:

Text Formatting

You can write bold text, italic text, inline code, and ~~strikethrough~~.

Links & Images

Visit DevDigest for more demos.

Code Blocks

javascript

function greet(name) {
  console.log(`Hello, ${name}!`);
  return { greeting: `Hello, ${name}!` };
}

greet("World");

Lists

Unordered list:

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

Ordered list:

Step one
Step two
Step three

Task Lists

Build the editor
Add live preview
Add syntax highlighting
Ship it

Blockquotes

"The best way to predict the future is to invent it."
— Alan Kay

Tables

Feature	Status	Priority
Editor	Done	High
Preview	Done	High
Export	Done	Medium
Themes	Planned	Low

Horizontal Rule

That's it! Start typing on the left to see your markdown rendered in real time.

View Prompt Used

Create a split-pane live markdown editor using the Gumroad design system. Editor on left with monospace textarea and line numbers, rendered preview on right. Toolbar with Bold, Italic, Code, Link, H1, H2, List, Quote as pill buttons. Preview renders headings, code blocks (dark bg), links in pink, lists, blockquotes with pink left border, tables, and task lists. Sync scroll between panes. Word count bar between editor and preview showing words, chars, reading time. Export buttons for Copy HTML and Copy Markdown. Use regex-based markdown rendering with no npm libraries. Cream background (#F4F4F0), white panels with border-2 border-black rounded-2xl, no shadows, no gradients.

Built with Claude Opus 4.6