Help us measure site usage?

With your permission, we use self-hosted analytics to understand page usage. It is optional and does not affect the Service. Learn more.

codeseed
Sign in
Explore Projects
JavaScriptbeginnerwebAI generated

Markdown Previewer

Build a Markdown editor for the browser with React: write Markdown on the left and see it formatted on the right as you type, with support for headings, lists, links, tables, code blocks with syntax highlighting and task lists. The preview is sanitized, so HTML pasted into the editor can never run scripts, and your drafts are saved automatically in the browser so you can close the tab and come back later. You can also copy the HTML or download the Markdown file. It's a great first React project (set up with Vite, which runs on Node.js): you'll learn components and state, handling input efficiently, converting Markdown to HTML with a library, why sanitizing matters (XSS), saving to localStorage, and testing.

Estimate
~7h
Steps
6
Completed by
0
Proposed by
codeseed.app

React · Node.js

Sign in to claim this project

Project roadmap

  1. 01

    Set up the project

    ~1h

    Install Node.js and create a React project with npm create vite@latest. Build the layout: a toolbar, a textarea on the left and a preview area on the right, stacking vertically on narrow screens. Done when: the app runs with npm run dev and shows the two panes.

  2. 02

    Render Markdown

    ~1.5h

    Install a Markdown library (such as marked or markdown-it) and convert the textarea's text to HTML as the user types, keeping the text in state. Enable GitHub-style tables and task lists. For long documents, delay rendering until typing pauses briefly (or use useDeferredValue). Done when: headings, lists, links, tables and code blocks render correctly.

  3. 03

    Sanitize the preview

    ~1h

    Sanitize the generated HTML with DOMPurify before inserting it with dangerouslySetInnerHTML, and explain in a comment what cross-site scripting (XSS) is and why this matters. Test it by typing <img src=x onerror=alert(1)> and a <script> tag, which must not run. Done when: dangerous HTML is removed from the preview.

  4. 04

    Add syntax highlighting

    ~1h

    Highlight code blocks in the preview with a library such as highlight.js (or Prism), using the language written after the opening fence. Style the preview with readable typography. Done when: code blocks for a few languages are highlighted.

  5. 05

    Save drafts

    ~1h

    Save the text to localStorage a moment after typing stops, and load it when the page opens, with a sample document the first time. Show when the draft was last saved. Add buttons to download the Markdown as a .md file, copy the HTML, and clear the draft (with confirmation). Done when: the draft survives closing and reopening the page, and the buttons work.

  6. 06

    Test it

    ~1.5h

    Add Vitest and React Testing Library, and test: typing updates the preview, dangerous HTML is removed, drafts are saved and loaded (with localStorage cleared between tests), and the download and clear buttons. Done when: npm test passes.

Resources

Ready to build this?

Get a GitHub repo and start building. Your AI reviewer checks each step as you go.

~7h · 6 steps

Tech stack

ReactNode.js