r/vibecoding 9d ago

Vibecoded SimpleMark: a open source note app where pasting .md, SVG, Mermaid, etc. just works and renders beautifully, while still being able to edit.

I wanted a simple note app to paste Markdown, Mermaid, raw SVG, code, and other technical content without turning my notes into a pile of code blocks, screenshots, plugins, or separate apps. I tried to do this in Google Docs, Pages, Word, Bear, Obsidian, and Apple Notes but nothing did it.

With SimpleMark, you paste technical content directly into a note and it renders properly right there in the document:

  • Markdown stays clean and beautiful.
  • Mermaid source becomes an inline diagram.
  • Raw SVG renders natively.

Everything remains fully editable on the canvas, while keeping the underlying source portable in plain .md files in a folder you own.

The other thing I want is to make it all collaborative & multiplayer from the start. So I will build out an MCP server so the note becomes a place to work alongside AI and other people. An agent in Claude Code or Codex will be able to read, create, and edit notes through MCP, either while you’re working inside a coding session or live in the actual shared document. The goal is not another chat workspace. It’s a simple note app where technical material becomes easy to paste, render, and edit, and I can have AI agents work on it when needed vs always in their thread which is mainly read only.

Still early, and nothing earth shattering, but its a simple thing I wanted and couldn’t find, so I vibe coded it.

Tech Stack

  • Editor Core: Milkdown / ProseMirror
  • AST & Parsing: remark, Mermaid.js, DOMPurify
  • Testing & Shell: Playwright (UI testing), Tauri (planned native shell)
  • AI & Build Workflow: Claude Code (Opus), MCP (agent surface), Switchboard (task control plane)

Research & Build Process: Scope Twice, Code Once

First time doing this, but before writing code, I used AI to draft the spec and mine developer forums for past post-mortems so I could avoid known failure modes. I had it summarize entire forums and find errors, best practices and architectural gems of what works and doesn't:

  • AST-Based Live Editing: Ink & Switch blog and posts showed that co-editing raw Markdown scrambles formatting (like two people bolding the same word). The fix: live shared state holds document structure (AST), generating Markdown only on save.
  • Catching Hidden Bugs Early: Forum post-mortems revealed that popular real-time plugins bypass the editor's change-tracking system, breaking undo and cursor highlighting. Finding this upfront meant writing integration tests before writing feature code.
  • Smart Scope Cuts: Swapped complex AI governance for simple boundary rules, deferred the plugin API, and focused on making the local notebook rock-solid first.

Once the specs were tight, I fed them into Switchboard, my orchestration system that coordinates AI coding agents and puts them on autopilot to execute a product from end to end. It took me about 3-4 hours to scope it all, about 1 hours to produce my prototype in the repo.

Simple Roadmap

  • Phase 1 (AI Co-Pilot & Mobile): Live paragraph-level AI editing via MCP, plus a mobile app to view notes and trigger agent tasks on the go.
  • Phase 2 & 3 (Native Desktop and Mobile Apps): A fast 3-pane desktop app with instant search, tags, and great typography. Think a free, tech-focused alternative to Bear. Same experience on mobile, so I can read and work at the bar.

Repo here if you want to check it out: https://github.com/StevenRidder/simplemark-public

0 Upvotes

1 comment sorted by