Nabi Markdown

Practice Markdown until it's muscle memory.

Comment

Inspiration

The idea came from watching someone learn.

For years I was the only person on my team who wrote in Markdown. I'd point people to a guide or an editor, and it never took. Then one day a coworker asked me to just show him — so instead of a link, I gave him two marks, a heading and bold, and let him try them a few times on his own. That was all it took. He started writing in Markdown too.

What changed wasn't the explanation; it was the few minutes of doing it himself. Most people already know how to structure their thoughts — they've just never practiced the marks that carry that structure. That's the gap Nabi Markdown is built to close.

What it does

Nabi Markdown is a short, English-first practice app for making Markdown feel natural.

You pick one of five levels. You read a rendered Goal on the left, write the Markdown yourself on the right, inspect what it renders, and press Check. The app accepts any wording, capitalization, or spelling as long as the requested structure is correct. If the structure is missing or malformed, it names the exact syntax to fix — and a retry gives you a different prompt for the same skill, instead of asking you to copy one answer again.

The experience is deliberately small: no account, no streak, no XP, no long-term profile. A visit is a quiet ten-minute practice, not a course you have to keep up with.

How we built it

Nabi Markdown is a React, TypeScript, and Vite web app. CodeMirror is the writing surface; the Markdown is parsed into an AST and checked with deterministic structural rules. The rendered Goal, the source editor, the preview, and the review all share one document model, so spacing, line structure, and scrolling stay readable.

I built it through Codex on GPT-5.6, keeping each task inside a single session wherever I could, with one primary thread for the core work. I used Codex to narrow a broad, Korean-first commercial idea down to a three-day Build Week scope; to compare learning models; to implement the app, the structural grader, the problem-bank tooling, browser persistence, and the tests; and to inspect and repair the live interface again and again.

GPT-5.6 also generated candidate curriculum material and counterexamples at build time. Each candidate was reviewed and verified before it entered the bank. The deployed learning loop sends none of a learner's writing to any AI service — grading is local, stable, and inspectable.

The product decisions were mine. I rejected an always-on AI coach, because it makes an editor more helpful without ever building recall. I chose explicit Check, optional Hint, structure-only grading, different-content retries, and an open-book layout that gives the Goal and the learner's own document equal weight.

Tools I used, disclosed plainly. All implementation ran through Codex, and every product decision was mine. Beyond OpenAI's tools: CodeRabbit reviewed my public pull requests, Claude helped me verify specific design and curriculum decisions out of band, and I connected Mobbin as a visual reference — though the design itself came together inside GPT's product design tool. Being able to code and shape the design in the same session was the part of this build that surprised me most.

Challenges we ran into

The hardest question was educational, not technical. The research would justify spaced repetition, skill tracking, and a heavy mastery system — but that would also make a casual learner feel they had signed up for another course. I kept only what supports a short visit: writing it yourself, immediate structural feedback, and one near-transfer retry.

Codex was a real collaborator here, and it also over-reached. When I asked it to think like an education expert, it treated Markdown like a full language course — Level 5 became twenty minutes of writing on a blank page. That was not the point. I caught it, and we tuned the levels back toward the real goal: getting comfortable with the marks.

Feedback was the other hard part. Exact-string matching would punish honest wording differences; generic error messages would teach nothing. So the grader looks only at the taught structure — headings, lists, nesting, quotes, links, code blocks, document order — and returns the missing piece in plain language.

Accomplishments that we're proud of

  • A complete browser flow: Goal → Write → Preview → Review → repair → different-content retry → completion.
  • A deterministic Markdown grader that accepts varied prose while checking the structure a learner is meant to practice.
  • A five-level curriculum backed by a reviewed problem-bank pipeline — not one hard-coded demo.
  • A calm open-book interface with a real editable document surface, visible whitespace, keyboard-first controls, accessible labels, sound and reduced-motion support.
  • Public source, a live deployment, setup instructions, unit tests, and browser journeys for the critical learning path.

What we learned

The meaningful line is not AI versus no AI — it is creation versus judgment. GPT-5.6 and Codex were powerful partners for exploring, building, and producing curriculum. But a learner deserves a verdict that is predictable, explainable, and available even when no network is.

I also learned that the best retry is not the same answer again. A new prompt using the same rule is what tells you the syntax has moved past short-term copying.

What's next for Nabi Markdown

Next, I will refine the advanced levels into shorter, more varied documents that combine familiar Markdown forms without turning practice into office work. The longer arc leads toward the documents people increasingly hand to AI agents — AGENTS.md files, specs, structured work orders — while keeping every lesson about Markdown itself, not about copying any company's document.

Once the English curriculum is proven, Korean comes next, then other languages. The project stays intentionally small and open source. The goal is simple: make the first code people write with AI feel like a habit, not a barrier.

Built With

Share this project:

Updates