Every project by Bao To, a design engineer and studio artist in New York: AI-era product work, design systems, and full-stack builds, filterable by kind. Each entry opens a case study.
AI Document Editor that syncs with Google Drive.
ZEN EDITOR - ZENEDITOR.CO
Bringing Cursor IDE's AI paradigm to document editing. Select text, ask AI, see inline changes, accept or reject with a click.
Founder
Designer
Engineer
2024 - Present
Interaction Design
Visual Design
Full-stack Development
zeneditor.co
Try the live product
zeneditor.co
THE PROBLEM
Open ChatGPT. Copy your text. Paste it in. Type your prompt. Wait. Copy the response. Go back to your doc. Paste. Compare. Manually merge what you want to keep. You've lost 2 minutes and your train of thought.
The old way
The quick brown fox jumps over the lazy dog.
Zen Editor
The quick brown fox jumps over the lazy dog.
In Cursor, I select code, hit Cmd+K, and see exactly what AI changed. One click to accept, one to reject. Why can't writing work the same way?
THE CHALLENGE
Cursor shows diffs line-by-line because lines mean something in code. But in a document? A 'line' is just where your window happens to wrap. There are no natural units to diff against.
Each line is a semantic unit
Line 2 removed, line 3 added. Clear atomic units.
Code has lines and functions. Prose just flows. When AI rewrites half a sentence, is that one change or two?
Show every character change? Too noisy. Show whole paragraphs? Too coarse. The right level depends on what you're editing.
It's not just text. Headings, lists, bold, links. The diff has to work across all formatting.
Try different granularity levels
Cleanest. Matches how we think about prose.
Google Docs AI just replaces your text. Notion AI doesn't show what changed. Everyone else uses a chat sidebar. It's easier to build, but it breaks your flow.
THE SOLUTION
Select text. Ask AI to improve it. See exactly what changed, inline. Accept or reject each change with a click. Your documents stay in Google Drive.
The core loop
The quick brown fox jumps over the lazy dog.
DIFF VISUALIZATION
Different edits need different granularity. Sentence-level is the default because it matches how we read prose. But editing a list? Word-level works better. Tweaking phrasing? Character-level.
Compare diff layouts
Before
The implementation required careful consideration.
After
Implementing this required careful thought.
Requires mental mapping between panels
Most AI tools hide what they removed. But knowing what's gone is as important as knowing what's new. Strikethrough text stays visible until you accept the change.
AI gets some things right and others wrong. All-or-nothing means you're back to manual editing anyway. Per-change controls let you keep the good parts.
The accept/reject interaction
Click to try
GOOGLE DRIVE
Your documents stay in Google Drive. Open them in Zen Editor, edit with AI, save back to Drive. Stop using Zen Editor? Your files are still there. Nothing to export.
Browse your Drive. Open any doc. Edit it. Save it. Share it the same way you always have.
No account to create. No data to migrate. Use it once or use it daily. Your files are always yours.
THEMES
Different writing needs different environments. Serif for essays. Monospace for technical docs. Clean sans-serif for quick notes. Each theme pairs typography with color to create a distinct feel.
INTERACTION DESIGN
Hover over each card to see the interaction.
The project was completedfinished ahead of schedule.
Per-change accept/reject gives you granular control
You decide when to sync to cloud
Full focus mode when you need it
Switch AI based on your task
HOW IT WORKS
Comparing two strings is easy. Making the result readable is harder. Here's what the diff engine actually does.
One algorithm doesn't fit all content. Prose works best with sentence-level diffs. Code needs line-by-line. Lists benefit from word-level. The engine picks the right one, or you can override.
Fast
3-5ms
Myers algorithm for real-time preview
Best for
Live typing feedback
Sentence
10-20ms
Splits on .!? and paragraph breaks
Best for
Prose, essays, articles
Word
15-25ms
Two-pass: raw diff then semantic grouping
Best for
Lists, rewording
Line
5-10ms
Classic line-by-line with edge cases
Best for
Code, markdown
Character
20-40ms
Diff-match-patch with semantic cleanup
Best for
Precision editing
Whitespace, empty strings, formatting conflicts. Each card shows how the engine handles it.
Nothing arbitrary. Calculated values.
Hover each button - feel the timing difference:
150ms feels responsive. 500ms feels sluggish.
Graceful fallbacks when AI fails.
Explicit state. No hidden modes.
Verified symmetry. Edge cases tested.
History stack
Nothing to undo
Changing 'quick' to 'swift' is technically 10 character operations. But showing 10 separate changes would be useless. The engine groups them into one.
Raw output
10 changes for one word
Position tracking
The quickswift brown fox jumpsleaps over the lazy dog.
2 pending changes — positions auto-adjust as you accept/reject
REFLECTIONS
The hard part wasn't the AI. GPT and Claude already write well. The hard part was the interface: showing changes without overwhelming, giving control without complexity.
Show what changed. When users see exactly what AI did, they trust it more and experiment more.
Let them pick and choose. Accept this change, reject that one. Granular control removes the anxiety of all-or-nothing.
Flexibility without complexity. Five diff modes exist because different content needs different granularity. But users don't have to think about it unless they want to.
Meet users where they are. Google Drive integration was harder to build, but users don't have to change their workflow.
TRY IT
Zen Editor is live. Connect your Google account, pick a document, and try it out.
Free to use. Your documents stay in your Drive.
CONNECT WITH ME
Don't like my portfolio? Let me know at btt2118@columbia.edu