Bio Counter
A live-preview bio editor & character counter for creators.
4 followers
A live-preview bio editor & character counter for creators.
4 followers
I was watching a YouTube video where the speaker said: "Find a tiny everyday tool, look at what makes it frustrating, and build a better version." That led me to bio counters. Most are stuck in 2012—ad-bloated, slow, and blind to how text looks on a phone. So I built a minimalist sandbox using Astro 5 & Tailwind v4. It gives you a clean 2-column layout with a live phone preview for 9 platforms. It even tracks multi-byte emojis perfectly via Unicode grapheme iteration so limits don't break!
How does the live preview stay in sync when I switch between platforms mid-edit, and is there any way to compare two platforms side by side?
@sebahat2cva Hi Sebahat! Thanks for checking out Bio Counter!
Under the hood, Bio Counter uses a single shared text input that acts as the single source of truth. Whenever you type or edit, the app updates the preview elements for all platforms simultaneously in the DOM. When you switch platforms, the active mockup is simply toggled visible, showing your latest edits instantly without any delay or sync lag!
Regarding side-by-side comparison: currently, the tool only renders one active mock container at a time. However, this is a fantastic suggestion! As a quick workaround, you can open two browser windows side-by-side, but we’ve officially added a dedicated 'Split/Compare View' layout to our feature roadmap. Thanks for the feedback!