DEV Community

Hussain Jatoi
Hussain Jatoi

Posted on

I Built a Browser Voice-to-Writing Tool Because Typing Slows Down Thinking

Typing is useful when the sentence is already clear.

But when the thought is still rough, typing often becomes the wrong first step.

The person starts editing too early. The first sentence gets rewritten three times. Formatting becomes the focus. The second half of the idea disappears before it reaches the page.

That is the problem behind Zahvox: a browser voice-to-writing tool for people who think faster than they type.

The goal is not to replace writing. The goal is to make the first capture easier.

Speak first.
Edit second.
Use the text where the work happens.

The gap between thinking and typing

Most writing tools begin after a person has already typed something.

That sounds normal, but it creates a hidden problem.

A lot of useful writing does not begin as clean writing. It begins as a rough thought:

  • a quick client update
  • a meeting note
  • a reply after a call
  • an idea for a post
  • a rough draft for an email
  • a reminder before it disappears
  • a sentence that is clear in the mind but slow on the keyboard

Typing forces that rough thought through a narrow input channel.

Speaking is different. A person can explain the idea while it is still moving.

That matters because the first draft is not supposed to be perfect. It is supposed to exist.

Voice-to-writing is not the same as speech-to-text

This is the first distinction that matters.

Speech-to-text is mostly about converting audio into words.

Voice-to-writing is about what happens after that.

A raw transcript is often messy. It may include broken sentences, repeated phrases, filler words, half-formed structure, and unclear transitions. That is fine for capture, but not enough for actual work.

A voice-to-writing workflow has a different target:

  1. Capture the thought.
  2. Turn it into text.
  3. Review the text.
  4. Clean the structure.
  5. Use it as an email, note, reply, draft, summary, or workflow input.

That small difference changes the product direction.

The user does not only want a transcript. The user wants usable writing.

Why browser voice tools are still worth building

Browser speech recognition is not perfect.

The Web Speech API exposes speech recognition capabilities through the browser, and MDN documents that speech recognition can use a recognition service provided by the user's platform or, in some cases, be handled locally depending on browser support and configuration: https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API

That means quality can vary across:

  • browser
  • operating system
  • microphone
  • accent
  • selected language
  • background noise
  • network conditions
  • browser implementation details

So why build with it?

Because browser-native voice input has one major advantage: low friction.

No signup.
No install.
No desktop app.
No extension.
No setup flow.

For an early product, that matters.

A visitor can open the tool, allow the microphone, speak, and see whether the workflow makes sense. That creates a much faster feedback loop than forcing people through an account system before they understand the value.

For a product like Zahvox, that is the right wedge.

The first version should prove the behavior:

Will people speak a rough thought into a browser and use the result?

Only after that question is answered does it make sense to add heavier infrastructure like backend transcription, saved history, templates, or API access.

The first version of Zahvox

The current version is intentionally simple.

It includes:

  • browser-based voice input
  • live transcript
  • editable transcript
  • copy text
  • download text
  • voice notes cleaner
  • email draft generator
  • meeting notes formatter
  • word counter
  • character counter
  • reading time calculator
  • typing speed calculator

The product is early. It is not trying to pretend otherwise.

The current tool is best for quick drafts, notes, rough ideas, email starting points, meeting notes, and short business writing workflows.

The first version focuses on speed of capture, not perfect transcription.

The technical lesson: final and interim results need careful handling

One of the first product issues in browser speech tools is duplicate text.

This usually happens because speech recognition APIs can return interim results and final results. If the app appends every result directly into the transcript, the same phrase can appear more than once.

A common bug looks like this:

recognition.onresult = (event) => {
  setTranscript((prev) => prev + event.results[0][0].transcript);
};
Enter fullscreen mode Exit fullscreen mode

That looks simple, but it is dangerous.

Why?

Because event.results is not always just the new final phrase. It can contain interim text, updated guesses, or results that need to be processed from event.resultIndex.

A safer pattern is:

recognition.onresult = (event) => {
  let interim = "";

  for (let i = event.resultIndex; i < event.results.length; i++) {
    const result = event.results[i];
    const text = result[0].transcript.trim();

    if (result.isFinal) {
      appendFinalChunk(text);
    } else {
      interim += text;
    }
  }

  setInterimTranscript(interim);
};
Enter fullscreen mode Exit fullscreen mode

The important idea is simple:

  • final text should be stored once
  • interim text should be temporary
  • old results should not be appended repeatedly
  • restarts should not duplicate the last phrase

That sounds like a small implementation detail, but it makes the difference between “this is useful” and “this is broken.”

A practical voice-to-writing flow

The workflow Zahvox is built around is not complicated.

It looks like this:

  1. Speak the rough thought.
  2. Let the browser capture the transcript.
  3. Edit the messy text.
  4. Copy or download the result.
  5. Use it in the actual work tool.

For example, a rough spoken thought might be:

“Tell the client the page is almost ready but I need their final approval on the homepage copy before pushing the update live.”

That can become:

“The page is almost ready. I just need your final approval on the homepage copy before I push the update live.”

The second version is not magic. It is just cleaner.

That is the point.

The product should reduce the distance between the thought and the usable message.

Where this becomes useful

Voice-to-writing is useful when the cost of starting is higher than the cost of editing.

A few examples:

1. Client replies

A freelancer or agency owner may know exactly what to tell a client, but typing the response from scratch takes longer than saying it out loud.

Voice capture turns the first draft into something editable.

2. Meeting notes

A meeting ends. The important points are still fresh. Speaking the summary immediately can be faster than trying to reconstruct it later.

3. Sales follow-ups

After a call, the person often remembers the buyer’s context, objections, next steps, and tone. Speaking the follow-up while the memory is fresh can preserve more detail.

4. Content drafts

Creators rarely start with perfect structure. They start with fragments. Voice helps capture those fragments before they become over-edited.

5. Internal updates

Managers and operators often need to explain what changed, what is blocked, and what happens next. Saying it first can create a clearer starting point.

The under-discussed part: editing too early

Most writing advice focuses on writing better.

But one practical problem is editing too early.

When someone types a rough idea, the keyboard invites immediate correction:

  • fix the spelling
  • improve the first sentence
  • move a paragraph
  • change the tone
  • delete the line
  • start again

That can be useful later. It is harmful during capture.

Voice separates capture from editing.

That separation is valuable.

The first pass becomes about getting the idea out. The second pass becomes about making it usable.

This is one reason voice-to-writing can help people who feel blocked by a blank page.

The next technical layer: language selection

A browser voice tool should not assume every user is speaking English.

Even when the interface is English, the spoken input may be Urdu, Hindi, Arabic, Spanish, French, German, or another language.

Most browser speech recognition implementations allow the language to be set with a language code such as:

recognition.lang = "en-US";
Enter fullscreen mode Exit fullscreen mode

That means a serious voice tool needs a language selector.

Not because it guarantees perfect accuracy, but because the wrong language setting can make recognition much worse.

A practical first language list might include:

  • English US
  • English UK
  • English India
  • Urdu Pakistan
  • Hindi India
  • Arabic
  • Spanish
  • French
  • German
  • Portuguese
  • Italian
  • Dutch
  • Turkish
  • Indonesian
  • Japanese
  • Korean
  • Chinese Mandarin

The UI should also be honest:

Accuracy depends on browser support, microphone quality, language, accent, background noise, and speech clarity.

That sentence matters because browser speech recognition is not server-grade transcription.

Backend transcription comes later

A browser-based tool is a good starting point, but it is not the final architecture for high-accuracy transcription.

A more advanced version can use a backend speech-to-text engine.

The flow would look like this:

  1. Record audio in the browser.
  2. Send the audio to a backend endpoint.
  3. Transcribe it with a speech-to-text engine.
  4. Return the transcript.
  5. Let the user edit and use the text.

That backend engine could be a paid API, or it could be an open-source stack such as faster-whisper hosted on separate infrastructure.

The important point is that open-source transcription is not the same as free unlimited transcription.

The model may be free, but compute still costs money.

A better product model is:

  • free browser mode for quick capture
  • limited high-accuracy mode for longer or important notes
  • paid plans or API access for heavier workflows later

That keeps the product useful without pretending infrastructure has no cost.

Why this could become an API later

The long-term idea behind Zahvox is not only a web tool.

Voice-to-writing can become a workflow layer.

For example:

  • voice note to email draft
  • sales call note to CRM update
  • meeting summary to action items
  • property management update to tenant message
  • founder voice note to internal memo
  • rough idea to content outline
  • spoken task list to project notes

Once the product has reliable transcription and cleanup, an API becomes interesting.

A future API could let tools like n8n, Zapier, Make, CRMs, and internal systems send audio or text into Zahvox-style workflows.

That is not the first feature to build, but it is a logical direction.

The first job is simpler: make the basic tool reliable enough that people trust the workflow.

What has to improve next

The next product work is clear:

  1. Fix duplicate transcript handling.
  2. Add language selection.
  3. Improve browser-mode error states.
  4. Add clearer accuracy guidance.
  5. Test across Chrome, Edge, Safari, desktop, and mobile.
  6. Prepare a high-accuracy backend transcription path.
  7. Keep the free browser tool simple.

The product should not hide its limitations.

Early users are forgiving when the product is honest. They are less forgiving when the product pretends to be finished.

FAQ

Does browser speech recognition work in every browser?

No. Support and behavior vary by browser and operating system. MDN describes the Web Speech API as browser-provided functionality, and implementation details can differ across platforms: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition

Why do duplicate transcript lines happen?

Duplicate lines usually happen when interim speech recognition results are appended as if they were final results, or when old results are processed again after a restart. The fix is to separate interim text from final text and process results from event.resultIndex.

Is voice-to-writing the same as transcription?

No. Transcription turns audio into text. Voice-to-writing focuses on turning spoken thoughts into usable written output such as notes, emails, replies, drafts, and summaries.

Why not use backend transcription first?

Backend transcription can be more reliable, but it adds cost, upload handling, privacy considerations, latency, and infrastructure. A browser-first version is useful for testing the workflow quickly.

Can this work with multiple languages?

Language selection can help, but support depends on the browser or transcription provider. A language selector should improve recognition when the selected language matches the spoken input.

Is this an AI writing tool?

The current direction is voice-to-writing. Some writing utilities may use cleanup or formatting workflows, but the core product starts with voice capture and editable text. AI cleanup can be added as a later layer.

Final thought

Typing is not going away.

But typing does not always need to be the first step.

For many notes, replies, updates, drafts, and rough ideas, speaking first creates a better starting point.

That is the product bet behind Zahvox.

The first version is here:

zahvox

No signup or download required.

Top comments (0)