Blazor WebAssembly Markdown Notes Editor

Project roadmap

1. 01

   Create the project and layout

   ~1.5h

   Create a project with dotnet new blazorwasm. Build a layout with a sidebar (folders and notes), an editor pane and a preview pane, using CSS grid. Define the models: Folder (id, name) and Note (id, folder id, title, content, updated at), and a NotesService that holds them in memory for now, with a few sample notes. Done when: the app runs and shows the sample notes in the sidebar.

2. 02

   Build the editor

   ~1.5h

   Create an Editor component with a textarea bound to the selected note's content with @bind and @bind:event="oninput", so the note updates as you type, and a title field. Update the note's updated at time when it changes. Pass the selected note between components with parameters and an EventCallback. Done when: selecting a note and typing changes it, and the sidebar shows the new title.

3. 03

   Show a live preview

   ~1.5h

   Add Markdig and render the note's content to HTML in a Preview component, using a pipeline with common extensions (tables, task lists) and DisableHtml(), so HTML typed into a note can't run scripts. Show it with MarkupString. Only re-render after typing pauses briefly, to keep typing smooth on long notes. Done when: headings, lists, tables and code render live, and a <script> in a note is shown as text.

4. 04

   Organize notes in folders

   ~2h

   Add creating, renaming and deleting folders (with a choice to move or delete their notes), moving notes between folders, creating and deleting notes (with confirmation), and a search box that filters notes by title and content. Done when: notes can be organized into folders and found with search.

5. 05

   Save to localStorage

   ~1.5h

   Save folders and notes to localStorage through JS interop (IJSRuntime calling localStorage.setItem and getItem), or a library such as Blazored.LocalStorage, serialized with System.Text.Json, a moment after changes stop. Load them at startup, and handle missing or broken data by starting with the samples. Done when: notes and folders survive closing and reopening the browser.

6. 06

   Test it

   ~1.5h

   Write tests with bUnit: the editor updates the note, the preview renders Markdown and escapes HTML, the search filters notes, and the NotesService's folder operations. Mock the storage so tests don't need a browser. Done when: dotnet test passes.

Resources

• DocsBlazor documentation
• DocsBlazor data binding
• DocsCall JavaScript functions from .NET in Blazor
• DocsMarkdig
• DocsbUnit documentation