The preview pane of a Markdown editor updates on every keystroke. That immediacy hides a pipeline with exactly two parser options, and both options change how your text renders on other platforms. This is the pipeline in our own Markdown editor, stage by stage, including the two failure modes we accept.
The Rendering Pipeline Step by Step
1. A keystroke updates one React state string that holds the entire document.
2. Every render calls marked(src) and stores the resulting HTML string. There is no debounce, no memo, and no web worker. One keystroke means one full parse of the whole document.
3. The HTML string goes into the preview pane through dangerouslySetInnerHTML, and the browser builds the DOM from it in one pass.
4. The word and character counters recompute from the raw source string.
The parse and the DOM insertion are synchronous. For a long document this is the bottleneck, because the pipeline has no throttling to absorb fast typing. Short documents feel instant. Very long ones make each keystroke pay for a full re-parse.
The toolbar offers three views over that same state. Split shows the source and the preview side by side on a wide screen. Editor drops the preview and gives the whole width to writing. Preview drops the source and shows the rendered result. Switching modes changes only the layout, never the document, so you can flip to Preview for a read and back without risk.
The Two Options That Change Your Output
The parser starts with breaks set to true. One press of Enter produces a visible line break in the preview. Renderers that follow the CommonMark default treat a single newline as a space and join the lines. Text that looks correctly broken here can collapse into a paragraph on another site.
Follow this rule when it matters. If your destination is this editor or a renderer you have tested, single breaks are fine. If the destination follows the CommonMark default, separate paragraphs with blank lines and never rely on a single break.
The parser also starts with gfm set to true. You get GitHub Flavored Markdown, which adds tables with pipes, strikethrough with double tildes, task lists in square brackets, and autolinked URLs. GitHub renders all of these. A strict CommonMark renderer without the GFM extension does not define them, so verify your target before you lean on tables.
Counts and Copy Buttons
The word counter splits the trimmed source on whitespace runs. That method counts syntax as words. A heading marker, the pipes in a table row, and the asterisks inside bold markers each add to the total. Treat the word figure as an upper bound and the character figure as raw source length, markup included.
Two copy buttons sit in the toolbar. Copy MD gives you the exact source text. Copy HTML gives you the generated markup, with the two options already applied, so every single newline has become a line break element. The HTML output is the useful one for pasting into a CMS field or an email template that accepts markup.
Both buttons flash a brief check mark state and then revert. The component sets that state without waiting on the clipboard call, so the check mark is not proof the copy landed. When a paste target matters, paste into a scratch field first and confirm the text arrived.
Failure Modes You Should Know
- The preview has no sanitizer. Raw HTML in your Markdown reaches the pane as markup. Never paste a document from an untrusted source into any editor that works this way, including ours.
- There is no autosave. The document lives in component state, and refresh or navigation destroys it. The codebase has a persistence hook that other tools on this site use for settings, and this editor deliberately does not apply it to content. Copy MD before you leave the page.
- The two boxes open with a preloaded sample document. Select all and delete before you start, or your first paste mixes with the sample.
- The synchronous parse means a very large document slows typing before it ever slows rendering.
These are design costs, not oversights we missed. State-only content means nothing you type is stored, sent, or logged anywhere. The same property that loses your draft on refresh is the property that makes the tool safe for private notes.
Checklist
- [ ] You cleared the sample document before typing.
- [ ] You checked whether your destination treats single newlines as breaks or as spaces.
- [ ] You limited GFM syntax to destinations that support it.
- [ ] You copied MD before closing or refreshing the tab.
- [ ] You avoided pasting untrusted Markdown into the editor.
Open the [Markdown editor](/en/markdown-editor), type three lines separated by single newlines, then copy the HTML and check whether your target platform renders the same breaks. That one test tells you more than any style guide. Send us the renderer name and whether the breaks survived, and we will build a compatibility list from your results.
