Skip to main content
Live

Tipun

A minimal, distraction-free writing app built for people who just want to write. No toolbars. No notifications. No noise.

  • Writing
  • Productivity
  • Vanilla JS
  • Side Project
View on GitHub Live demo

Writing should feel like thinking out loud but most writing tools get in the way before you type the first word.

I’ve tried a lot of them. The ones with the feature lists, the sidebar panels, the formatting menus that appear the moment you hover. They’re built for everything except the one thing you opened them for.

So I built Tipun. Branding is in progress but the writing experience is ready.

What it does

Tipun is a writing app with one job: get out of your way. Open it, and you’re already writing. No setup, no onboarding, no configuration you have to undo. Just a blank page and your words.

Everything you need is there when you need it and invisible when you don’t:

  • Autosave: every keystroke is saved to local storage automatically. Close the tab, come back later, your work is still there.
  • Focus mode: dims everything except the paragraph you’re in. ⌘ Shift F to enter, same to leave.
  • Markdown support: write in Markdown and toggle a live preview with ⌘ Shift V.
  • Keyboard-first: bold, italic, focus mode, dark mode, fullscreen, settings. Everything has a shortcut. ⌘ K opens the full shortcut reference.
  • Slash commands: type / at the start of a line to insert headings, lists, blockquotes, and more, without leaving the keyboard.
  • Export: save your document as .md or .txt with one click.
  • Font control: choose from 37 curated fonts across serif, sans-serif, monospace, and display. Size adjustable from 14px to 28px.
  • Dark and light themes : with your preference remembered across sessions.

Why I built it

Writing is a big part of how I think and work. Design thinking, problem framing, project documentation it all starts with words. I needed a space that matched that headspace: minimal, focused, present.

Every product I tried had too much going on. Features that made sense for someone else’s workflow but cluttered mine. I didn’t want to manage a writing app. I wanted to use one.

Tipun is my answer to that.

How I built it

I built this entirely on my own and I’m a product designer, not a software engineer.

No frameworks. Pure HTML, CSS, and vanilla JavaScript. One file. There’s a clever rendering technique under the hood: a transparent textarea sits on top of a mirror div that displays live Markdown highlighting. Both layers share the exact same font metrics and line height so the text aligns perfectly. It’s the kind of thing you only understand by building it.

What made it possible was using Claude as a learning partner throughout the process. Not just generating code, but actually understanding what I was building. Every unfamiliar concept debounce timers, dynamic caret positioning, lazy-loading fonts became a chance to learn properly, not just copy-paste a solution.

It’s the most I’ve grown as a builder in a short stretch of time. Tipun is proof that the barrier between “I have an idea” and “I shipped a thing” is smaller than it used to be, if you’re willing to learn while doing.

What it means for my work

As a product designer, shipping product changes how you think about design. When you’ve written the code yourself, you stop making decisions in a vacuum. You feel the tradeoffs. You understand why certain things are hard to build and why constraints are real.

Tipun is small, but it’s mine from idea to live URL, every decision made by one person.

More projects like this are coming.