Northwind CLI
Command-line tool for scaffolding and deploying Northwind apps.
Install
npm i -g northwind
Commands
| Command | What it does |
|---|---|
northwind init | Create a project |
northwind deploy | Push to production |
See the docs for configuration.
— Interactive Tools
Markdown Previewer
Preview 50+ markdown syntax patterns in real-time. Catch formatting errors before you publish.
— document
— samples
51 words344 chars18 lines1 min read
live sync
Tool of the dayMiscellaneous
AI Story Generator
Create complete stories with AI - from flash fiction to full narratives
Tool of the weekMusic & Creative
AI Song Name Generator
Generate song titles and names with AI. Pick genre, mood, and themes for catchy, original options. Free for musicians and songwriters.
What is a Markdown Previewer?
A split-pane markdown editor with instant preview. Type markdown on the left and watch it render as HTML on the right—no delay, no generate button. Built for developers, technical writers, and content creators who need to see exactly how their markdown will look before publishing.
The previewer supports GitHub Flavored Markdown including tables, task lists, strikethrough, and fenced code blocks with syntax highlighting for 50+ languages. Choose between light, dark, or GitHub preview themes to match your target platform. Every toolbar button inserts proper syntax automatically, so you spend less time remembering syntax rules and more time writing. Your work stays in your browser—nothing is uploaded to servers, and the editor works offline after the first load.
Key Features
Catch Syntax Errors Before Publishing
See malformed tables, broken links, and incorrect code fence syntax instantly. Fix formatting issues in the editor instead of discovering them after you commit or publish.
Preview Syntax Highlighting for 50+ Languages
Test code blocks with language tags like ```typescript, ```python, or ```bash. See exactly how syntax highlighting will appear on GitHub, in your docs site, or in your CMS.
Test GitHub-Specific Markdown Extensions
Preview task lists with - [ ] and - [x], strikethrough with ~~text~~, tables with column alignment, and emoji shortcodes. Know your markdown works on GitHub before you push.
Debug Complex Table Alignment
Tables require precise pipe and dash syntax. The live preview shows alignment issues immediately—left :---, center :---:, or right ---:—so you can correct them before copying to your README.
Insert Markdown Syntax with One Click
Toolbar buttons for headings, bold, italic, lists, links, code, quotes, and horizontal rules. Select text and click to wrap it with formatting—no memorizing syntax required.
Switch Themes to Match Your Platform
Preview in light theme for blogs, dark theme for documentation sites, or GitHub theme to see exactly how your README will render. Each theme uses different font sizing and code block styling.
Work Offline After First Load
Once the page loads, the editor and preview run entirely in your browser. No internet connection needed. Your markdown never leaves your device, and you can edit during flights or in areas with poor connectivity.
Export Preview as PDF
Download the rendered preview as a PDF for sharing or archiving. The PDF captures the current theme's styling—fonts, colors, and code block backgrounds—so stakeholders see what you see.
Perfect for everyone
- Technical writers building API documentation with code samples and tables
- Open-source maintainers crafting contributor guidelines and README files
- Developers writing multi-language README files with syntax-highlighted examples
- Content creators formatting long-form tutorials with nested lists and images
- Students learning markdown syntax for class assignments and project documentation
- Documentation teams previewing changes before deploying to production sites
How to Use the Markdown Previewer
Common markdown patterns and their rendered output:
1
Structure documents with six heading levels
Use # for H1 (page title), ## for H2 (major sections), ### for H3 (subsections), down to ###### for H6. The preview shows heading hierarchy with proper font sizing and spacing to ensure your document structure is clear.
2
Emphasize text with bold, italic, and strikethrough
Wrap text with **double asterisks** for bold, *single asterisks* or _underscores_ for italic, and ~~double tildes~~ for strikethrough. The toolbar buttons insert this syntax automatically when you select text.
3
Create lists with bullets, numbers, and task checkboxes
Start lines with - for bullet lists, 1. for numbered lists (auto-increments), or - [ ] for task lists. Indent with two spaces to nest lists up to three levels deep. The preview renders proper list spacing and numbering.
4
Insert links with inline or reference syntax
Use [link text](https://url.com) for inline links or [link text][ref] with [ref]: https://url.com at the bottom for reference links. Reference style keeps your markdown cleaner when you have many links to the same domain.
5
Display code with inline ticks or fenced blocks
Wrap code with single backticks for inline `code` or triple backticks for fenced blocks. Add a language tag after the opening fence—```typescript, ```python, ```bash—to enable syntax highlighting in the preview.
6
Format tables with pipes and alignment syntax
Build tables with | to separate columns and |----|----| for the header separator. Use :--- for left-align, :---: for center, and ---: for right-align. The preview shows proper cell spacing and borders.
7
Add images with alt text and titles
Insert images with . The alt text appears if the image fails to load and helps with accessibility. The optional title shows on hover.
8
Separate sections with horizontal rules
Create horizontal dividers with --- or *** or ___ on their own line. The preview renders a full-width line to visually separate major sections in long documents.
Who Uses the Markdown Previewer?
Real-world markdown scenarios:
Preview GitHub Actions badge matrix in README
Test tables with multiple columns for build status badges. Ensure alignment syntax :---: centers badges properly and pipe characters don't break on narrow screens. The GitHub theme preview shows exactly how the table renders in your repository.
Debug nested task lists for project tracking
Create multi-level task lists with - [ ] unchecked and - [x] checked boxes. Preview ensures proper indentation (two spaces per level) and that checkboxes render as interactive elements, not plain text.
Test code fence syntax for TypeScript tutorial
Write documentation with ```typescript code blocks showing type definitions, interfaces, and async functions. The preview confirms syntax highlighting works and code doesn't overflow on mobile breakpoints.
Format pull request template with sections
Build PR templates with ## headings for Description, Changes, Testing, and Checklist sections. Use - [ ] task lists for reviewer checkboxes. Preview verifies heading hierarchy and checkbox syntax before saving as .github/pull_request_template.md.
Preview relative links in multi-file documentation
Test links between docs with relative paths like [API Reference](./api.md) or [Installation](../getting-started/install.md). The preview doesn't navigate but confirms link syntax is correct before you build your static site.
Validate emoji shortcodes for GitHub
Use emoji shortcodes like :rocket: or :tada: in commit messages or README files. The GitHub theme preview shows which codes render as emoji (GitHub-supported) versus which stay as text (unsupported).
Test blockquote formatting for documentation callouts
Create callout boxes with > for quotes or >> for nested quotes. Preview shows indentation and left-border styling. Combine with **Note:** or **Warning:** at the start for documentation-style alerts.
Format contributor guidelines with definition lists
Structure guidelines with headings, numbered steps, and code blocks. Preview ensures steps are sequentially numbered, code blocks have proper language tags, and the document flows logically before publishing to CONTRIBUTING.md.
Tips for Best Results
Techniques for cleaner markdown:
Tip 01
Preview on mobile breakpoint to catch code block overflow
Long code lines without line breaks cause horizontal scrolling on mobile. After writing code blocks, preview at narrow widths to catch overflow. Add line breaks in your code examples or reduce indentation to keep everything visible on small screens.
Tip 02
Use reference-style links for maintainability
When linking to the same URL multiple times, use [text][ref] in the body and [ref]: https://url.com at the bottom. This keeps your markdown readable and makes updating URLs easier—change one reference instead of hunting through paragraphs.
Tip 03
Test table column alignment with different themes
Column alignment (:---, :---:, ---:) renders differently across themes. Preview your table in light, dark, and GitHub themes to verify numbers align right, text aligns left, and headers center properly in all contexts.
Tip 04
Check heading hierarchy for proper document structure
Use ## for major sections, ### for subsections, #### for sub-subsections. Don't skip levels (## to ####). The preview's font sizing shows hierarchy visually—if two headings look the same size, you skipped a level.
Tip 05
Validate task list syntax before copying to GitHub issues
Task lists require exact syntax: - [ ] with spaces between dashes, brackets, and text. The preview shows whether they render as checkboxes or plain text. Fix syntax errors before pasting into issues or PR descriptions.
Tip 06
Select text before clicking toolbar buttons for faster formatting
Highlight text first, then click Bold or Italic to wrap it with **asterisks** or *underscores*. This is faster than clicking the button, typing, then adding closing syntax manually. Works for links, code, and other paired syntax.