MD Viewer
By MD Viewer Team•

Welcome to MD Viewer

A minimal, modern markdown viewer with interactive widgets and local storage.

Getting Started

Here's how to use this app:

Editor Panel

Click the panel icon in the top left to open/close the editor. On mobile, you'll see an X button to close it. On desktop, you can resize the panel by dragging the right edge.

Cover Image

Drag and drop an image anywhere on the page to set a cover photo. Hover over the image to see the X button to remove it.

Theme Toggle

Click the sun/moon icon in the top right to switch between light and dark mode.

Save Articles

Click the save icon to save your article locally to your browser. Your data never leaves your device.

Table of Contents

  • Desktop: Always visible on the right side with active section highlighted
  • Mobile: Click the menu icon to toggle the TOC (appears as bottom sheet)

Features

  • Clean Typography - Optimized for reading
  • Live Preview - See changes instantly
  • Interactive Widgets - Add forms, buttons, sliders and more
  • Local Storage - Save articles in your browser (IndexedDB)
  • Frontmatter Support - Add metadata like title, author, date, cover image
  • Table of Contents - Auto-generated navigation with scroll tracking

Interactive Widgets

You can add interactive elements using markdown-ui-widget syntax:

Text Input

Button Group

Slider

Value: 81 - 16

Multiple Choice Question

What is the capital of France?

Short Answer Question

What does HTML stand for?

Frontmatter Example

Add metadata at the top of your markdown file between --- delimiters:

---
title: My Article Title
author: John Doe
date: 2024-01-19
cover: https://example.com/cover.jpg
social:
  twitter: johndoe
  github: johndoe
---

Supported Fields:

  • title: Article title (not displayed in content, only in metadata)
  • author: Author name
  • date: Publication date
  • cover: Cover image URL (can be local or CDN)
  • ogimage: Open Graph image (for social sharing)
  • social: Social media handles
    • twitter: Twitter/X username
    • github: GitHub username

Markdown Syntax

This viewer supports standard markdown:

Bold text with **bold**

Italic text with *italic*

inline code with backticks

Code Blocks

const greeting = "Hello, World!";
console.log(greeting);

Blockquotes

Design is not just what it looks like and feels like. Design is how it works.

  • Steve Jobs

Lists

  • Unordered item 1
  • Unordered item 2
  • Unordered item 3
  1. Ordered item 1
  2. Ordered item 2
  3. Ordered item 3

Visit our website

Privacy First

We are building the future of private, local-first web applications.

Your data stays in your browser. No servers, no tracking, no accounts needed. Just pure markdown magic that works offline and respects your privacy.

Start writing by opening the editor panel and have fun!

Table of Contents