Quill - Markdown Previewer

Live Demo ↗

Write Markdown and preview the rendered result instantly from one clean split-pane browser extension.

Quill is a React and TypeScript Markdown previewer featuring live rendering, GitHub Flavoured Markdown, secure HTML sanitisation, webpage text import, local draft storage, and HTML and Markdown export. It provides a complete source-code foundation for writing tools, documentation utilities, developer products, and client extension projects.

Perfect For

✓ Software Developers

✓ Technical Writers

✓ Documentation Teams

✓ Content Creators

✓ Bloggers

✓ Students

✓ Researchers

✓ Developer Productivity Tools

✓ Internal Business Applications

✓ Agency Client Projects

Why Choose Quill?

✓ Live Markdown preview

✓ Clean split-pane editing interface

✓ GitHub Flavoured Markdown support

✓ Secure HTML sanitisation

✓ Import selected webpage text

✓ Open existing Markdown files

✓ Copy rendered HTML

✓ Export complete HTML files

✓ Save documents as Markdown

✓ Automatic local draft storage

✓ No external processing service

✓ Clean and organised source code

✓ Easy to customise and extend

✓ No recurring subscription fees

What’s Included

Your download includes:

📦 Complete React & TypeScript Source Code

📦 Chrome Manifest V3 Production Build

📦 Microsoft Edge-Compatible Build

📦 Split-Pane Markdown Editor

📦 Live Preview Interface

📦 GitHub Flavoured Markdown Rendering

📦 Secure HTML Sanitisation

📦 Selected Text Import

📦 Markdown File Import

📦 Plain-Text File Import

📦 Copy HTML Action

📦 HTML Export

📦 Markdown Export

📦 Automatic Draft Storage

📦 Character Count Display

📦 Background Service Worker

📦 Runtime Selection Script

📦 Extension Icons & Assets

📦 WXT Configuration

📦 TypeScript Configuration

📦 Package Configuration

📄 Documentation (README.md)

Key Features

✓ Live Markdown Rendering

✓ Split Editor and Preview Layout

✓ GitHub Flavoured Markdown

✓ Heading Support

✓ Ordered Lists

✓ Unordered Lists

✓ Markdown Tables

✓ Links

✓ Images

✓ Blockquotes

✓ Inline Code

✓ Fenced Code Blocks

✓ Sanitised HTML Preview

✓ Import Selected Webpage Text

✓ Open .md Files

✓ Open .markdown Files

✓ Open Plain-Text Files

✓ Copy Rendered HTML

✓ Export HTML Documents

✓ Save Markdown Files

✓ Automatic Local Draft Saving

✓ Deferred Preview Rendering

✓ Character Count

✓ Clear Editor Action

✓ Responsive Popup Layout

✓ Lightweight Manifest V3 Permissions

Technology Stack

Built using modern browser-extension technologies:

✓ React 19

✓ TypeScript

✓ WXT

✓ Manifest V3

✓ Marked

✓ DOMPurify

✓ Browser Storage API

✓ Browser Tabs API

✓ Browser Scripting API

✓ Clipboard API

✓ File API

✓ Blob API

✓ Component-Based Architecture

✓ Modern CSS

✓ Modern Folder Structure

Performance Features

Designed for fast Markdown-writing workflows:

✓ Deferred Preview Rendering

✓ Local Markdown Processing

✓ No External API Requests

✓ No Remote Rendering Server

✓ Local Draft Persistence

✓ Lightweight Popup Interface

✓ Sanitised HTML Rendering

✓ Client-Side File Processing

✓ Client-Side HTML Export

✓ Client-Side Markdown Export

✓ Reusable React Components

✓ Clean TypeScript Implementation

✓ Modern Manifest V3 Architecture

✓ Easy Branding Customisation

✓ Scalable Source-Code Structure

How It Works

1. Download and extract the project files.
2. Install the project dependencies.
3. Run the development environment or generate a production build.
4. Load the generated extension folder into your browser.
5. Open Quill from the browser toolbar.
6. Type Markdown into the editor or open an existing Markdown file.
7. Review the rendered result in the live preview panel.
8. Import selected text from the active webpage when needed.
9. Copy the rendered HTML or export the document as HTML or Markdown.
10. Customise the branding, colours, interface, icons, editor behaviour, and functionality.
11. Build and publish the completed extension when ready.

Browser Compatibility

Works with:

✓ Google Chrome

✓ Microsoft Edge

✓ Brave

✓ Opera

Compatibility with other Chromium-based browsers may be possible but should be tested before production use.

License

Your purchase includes:

✓ Lifetime access to the purchased source code

✓ Commercial use for personal and client projects

✓ Full customisation rights

✓ Unlimited personal and client projects

You may not:

✗ Resell the original source code

✗ Redistribute the files

✗ Share the files publicly

✗ Repackage the source code as a competing digital product for resale

Instant Digital Download

No physical product will be shipped.

Immediately after purchase, you’ll receive instant access to download the complete Markdown-previewer source code, production build, and documentation so you can begin creating your own browser writing tool.

Important Note

Quill processes Markdown locally inside the browser and does not require an external API or remote rendering service.

The current version supports standard GitHub Flavoured Markdown but does not include:

✗ Cloud Document Synchronisation

✗ User Accounts

✗ Collaborative Editing

✗ PDF Export

✗ Rich-Text Editing

✗ Markdown Syntax Highlighting in the Editor

✗ Browser Marketplace Publication

The final production version should not silently shorten Markdown documents that exceed the local draft-storage limit. The developer should replace the current truncation behaviour with a visible storage warning before the product is published.

PROJETO STACK - Premium software templates and digital products built for modern businesses.