Why I Built a Visual Layer for VS Code (Instead of Using Notion)
Try Draft — The Visual Layer that fixes your docs-as-code workflow.
We lie to ourselves. We tell ourselves that "Docs-as-Code" is the ultimate truth. We say that we love writing documentation in plain text, committing it to Git, and reviewing diffs in PRs.
But deep down, we hate it.
We hate aligning pipes | in markdown tables. We hate guessing if  is the correct path. We hate that one typo in the YAML frontmatter brings down the entire production build.
So what do we do? We cheat. We switch to Notion.
The "Notion Trap"
It starts innocently. "I'll just draft this PRD in Notion," you say. "It's faster. I can drag-and-drop images."
And it is faster. For about a week.
Then the drift happens. The code evolves, but the Notion doc stays frozen in time. The "Single Source of Truth" becomes a lie. You now have two sources of truth: the code (which is true but unreadable) and the Notion doc (which is readable but false).
We are forced to choose between Developer Experience (DX) and User Experience (UX).
- VS Code gives us Version Control, CI/CD, and Truth. But the editing experience feels like 1999.
- Notion gives us a beautiful, fluid editing experience. But it locks our data in a proprietary silo.
Why can't we have both?
The "Broken Build" Cost
Let's talk about the cost of "pure" markdown.
Have you ever broken the CI pipeline because you forgot a colon in the frontmatter?
Have you ever spent 20 minutes trying to debug why an image isn't rendering, only to realize you needed relative path ../assets/ instead of /assets/?
This is friction. Friction kills documentation. If writing docs feels like writing code—with all the linting errors and syntax checking—engineers won't do it.
The Solution: A Visual Layer, Not a New Database
I built Draft not to replace VS Code, but to complete it.
It's a Visual Layer that sits on top of your local file system. It treats your folder structure as the database.
- Zero Lock-in: It opens standard
.mdfiles. If you delete the app, your data is safe in your git repo. - Zero Config: Point it at a folder. It works.
- 100% Git Compatible: It parses your existing frontmatter and commits clean diffs.
FAQ: Is this for me?
Q: Does this replace VS Code?
A: No. You use VS Code for code. You use this for context. Think of it as a "Super Preview" mode that lets you edit.
Q: How does this compare to Obsidian?
A: Obsidian is great for personal notes. Our editor is built for Engineering Teams. It understands Frontmatter specific to static site generators (Next.js, Hugo), handles git-style image paths, and is designed to work alongside your IDE.
Q: Is it "Local-First"?
A: Yes. Draft keeps the primary workspace local. Remote services are used only for features you explicitly invoke, such as publishing or remote backup. See the Privacy Policy for current data-flow details.
Technical Details
This project is currently being polished for open source. We believe tools should be as transparent as the code they edit.
- Stack: React, Vite, Tiptap.
- Architecture: Local-First PWA using File System Access API.
- Caching: IndexedDB supports responsive access to local workspace data.