Build a Markdown Previewer | Interview Question

Q: Build a Markdown Previewer

**Target Audience:** Frontend developers preparing for a machine coding round. Assumes basic React; parsing and HTML escaping are explained from zero. **Difficulty:** Medium > **How to read this doc:** Plain words first, then 📌 Interview term: callouts. The parser was run directly with node, the component was driven on React 19.3.1 in jsdom, and the XSS payloads were also typed into the app in real Chromium 141, which is the only place a script could actually have run. Section 6 quotes all three. ## 1. Why This Even Matters — A Story First A newspaper takes letters from readers. The typesetter's rule is simple: set every word the reader wrote in the normal font, and only the editor may add headlines and bold. If a reader writes "PRINT THIS IN RED ON THE FRONT PAGE", that sentence is printed, in normal ink, as a sentence. It is never obeyed. A Markdown previewer is that typesetter. The user's text is data; only our parser may add tags. The moment the parser lets user t

The problem

Question presented to candidate: "Build a Markdown previewer: a text area on the left, the rendered result on the right, updating as you type. Write the parser yourself for a small subset, no marked or markdown-it. Users will paste anything into it, so make sure it cannot be used to run scripts."

Requirements:

Live preview of a subset: # to ### headings, paragraphs (consecutive lines join), **bold**, *italic*, inline code, fenced code blocks, - and 1. lists, > quotes, --- rules and [text](url) links.
Escape all user text before adding any tags, so raw HTML such as <img onerror> or <script> shows as text.
Links only for safe schemes (http:, https:, mailto:, #, /); javascript: and the rest stay plain text; links open in a new tab with rel="noopener noreferrer".
Code spans and code blocks are escaped and never formatted inside.
A toggle to show the generated HTML source; a two-column layout that stacks on narrow screens.

What a strong answer should cover:

A two-level parser: block pass over lines (headings, lists, quotes, fences, paragraphs) and an inline pass (code, links, bold, italic).
Escape first, then format: why the order matters and why attribute values need " escaped too.
URL scheme allowlisting rather than blocklisting javascript:.
Rendering the HTML string (dangerouslySetInnerHTML, v-html, [innerHTML]) and what each framework does or does not sanitise.
Proving the XSS defence with real payloads, and when to reach for a library plus DOMPurify instead.

Clarifying questions expected:

"Which Markdown features are in scope: nested lists, tables, images, raw HTML passthrough?"
"Is the input trusted (our own docs) or from any user?"
"Does the preview need to be fast for very large documents?"

Code / implementation expected: Yes. A pure markdownToHtml function with an escapeHtml helper, and an editor plus preview component, with a demonstration that XSS payloads render as text.

Parsing
Rendering
Security

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend developers preparing for a machine coding round. Assumes basic React; parsing and HTML escaping are explained from zero. Difficulty: Medium

How to read this doc: Plain words first, then 📌 Interview term: callouts. The parser was run directly with node, the component was driven on React 19.3.1 in jsdom, and the XSS payloads were also typed into the app in real Chromium 141, which is the only place a script could actually have run. Section 6 quotes all three.

1. Why This Even Matters — A Story First

A newspaper takes letters from readers. The typesetter's rule is simple: set every word the reader wrote in the normal font, and only the editor may add headlines and bold. If a reader writes "PRINT THIS IN RED ON THE FRONT PAGE", that sentence is printed, in normal ink, as a sentence. It is never obeyed.

A Markdown previewer is that typesetter. T

The solution is hidden so you can try first

10 min read · 10 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import MarkdownPreviewer from "./src/components/MarkdownPreviewer";

export default function App() {
  return (
    <main className="page">
      <h1 className="title">Markdown previewer</h1>
      <MarkdownPreviewer />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.