codeseed
Sign in
Explore Projects
C#intermediatewebAI generated

Blazor WebAssembly Markdown Notes Editor

A client-side Blazor WebAssembly app that lets users write notes in Markdown with a live-rendering preview pane, organizing notes into folders stored in browser local storage. Learners practice Blazor component composition, two-way data binding, and JS interop for local storage.

Estimate
~9h
Steps
5
Completed by
0
Proposed by
codeseed.app

Blazor WebAssembly · Markdig · LocalStorage

Sign in to claim this project

Project roadmap

  1. 01

    Scaffold the Blazor WASM project

    ~1.5h

    Create the project and set up the base layout with a note list sidebar and editor pane.

  2. 02

    Build the Markdown editor component

    ~1.5h

    Create a textarea-bound component with two-way binding for note content.

  3. 03

    Add live Markdown preview

    ~2h

    Integrate the Markdig library to render the note content to HTML in a live preview pane on each keystroke.

  4. 04

    Implement folder organization

    ~2h

    Let users create folders and move notes between them in the sidebar tree.

  5. 05

    Persist notes to local storage

    ~2h

    Use JS interop or a local storage library to save and load notes/folders so data survives page reloads.

Resources

Ready to build this?

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

~9h · 5 steps

Tech stack

Blazor WebAssemblyMarkdigLocalStorage