DEV Community

vivek singh
vivek singh

Posted on

A sign-up flow that writes itself — then hands you the pen

Most sign-up flows feel like paperwork. A stack of labelled boxes, a "Step 2 of 5" wizard, or a chatbot pretending to be a person.

narrative-form is none of those things.

It's a typewriter-style, appendable form experience. The app types out a sentence — "My name is" — character by character, like it's writing a letter. Then it pauses and hands the cursor to you. You fill in your name inline, confirm it, and the next sentence types itself out below. The page grows like a living letter being written together.

No fields stacked top to bottom. No slides. No fake conversation. Just a continuous paragraph that the user and the app write together.

Built as an open source React package (@viveksinghind/narrative-form-react), with Angular, Vue, and React Native versions in progress.

— 10 field types: text, tel, email, password, OTP, chips, and more
— Full validation engine: built-in rules, async, server-driven, cross-field
— Dynamic/server-driven forms: fetch your field config from a DB, A/B test without redeploying
— CSS class system (ns- prefix), dark mode, RTL, i18n
— Zero runtime dependencies, under 10KB gzipped

This started as a personal, after-hours experiment — I was tired of sign-up flows that felt cold. The result is a pattern I genuinely haven't seen anywhere else done this cleanly.

Try the live examples at the docs site. Install in 30 seconds.

Top comments (1)

Collapse
 
vivek_singh_india profile image
vivek singh

Hi everyone 👋

I'm Vivek — I built narrative-form as a personal weekend project because I was genuinely curious: what if a sign-up form felt like writing a letter instead of filling out paperwork?

The core idea: the app writes the sentence, you complete it. Inline. One line at a time. The page grows downward as you go — no steps, no slides, no chat bubbles.

A few things I'd love feedback on:
→ Does the interaction feel natural or gimmicky?
→ What use cases would you reach for this for — sign-up, checkout, surveys, something else?
→ Any field type or validation feature missing for your stack?

The docs site has live interactive examples for every field type — text, tel, email, OTP, chips, password — you can type into them right in the browser.

This is 100% personal, after-hours, open source — not affiliated with my employer. Happy to answer any questions here or on GitHub.

Thanks for checking it out 🙏