Kelvin Agyare Yeboah

Posted on Jun 9

🕰️ 𝗗𝗶𝗱 𝘆𝗼𝘂 𝗸𝗻𝗼𝘄 𝘆𝗼𝘂𝗿 𝗰𝗼𝗱𝗲 𝗰𝗮𝗻 𝘁𝗿𝗮𝘃𝗲𝗹 𝘁𝗵𝗿𝗼𝘂𝗴𝗵 𝘁𝗶𝗺𝗲?

#json #javascript #ai #typescript

🕰️ Did you know your code can travel through time?

KayForms just made it happen. A JavaScript form library with time travel debugging, fine grained reactive state, and zero unnecessary re renders.

I spent the last few weeks building an open source library that fixes slow forms, glitchy inputs, and bugs you cannot reproduce.

Before you say "yeah right" let me explain.

For the non technical person

You know when you are filling out a form and something glitches? And you try to explain it to support but they have no idea what happened?

KayForms records everything you did. Like a black box on a plane. Someone can rewatch exactly what happened and fix it.

For the developer

Fine grained signal based rollbacks
Transaction batched state jumps
Async validation logging with timestamps
Full JSON export import
Chrome DevTools panel
Field level subscriptions
No unnecessary re renders
All in less than 1KB

Same feature. Two explanations. One library.

Here is what it actually does

Every keystroke gets recorded
Every validation error gets timestamped
Every async API call gets logged
Rewind 50 steps in one click
Export the whole timeline as JSON
Import it on any machine
Replay the bug exactly as your user saw it

Not a demo. Not a promise. Shipping today.

The Stack

Built with TypeScript. Pure signals architecture. Framework agnostic. Works with React, Vue, Solid, Svelte, Angular, or vanilla JavaScript. Zero dependencies. Lightweight. Scalable.

8 packages live on npm including:

@kayforms/core
@kayforms/react
@kayforms/vue
and more

Why you should care

Forms are everywhere. Signup forms. Checkout forms. Application forms. Survey forms. Admin dashboards.

When forms break, users leave.

KayForms gives you the tools to build forms that are fast, reliable, and debuggable.

Try to break it

npm install @kayforms/core

🔗 GitHub: github.com/kelvinagyareyeboah/kayforms

Found a bug? Export the timeline. Send it to me. I will time travel back and fix it.

Star the repo. Try the demo. Share your feedback.

Quick Example

import { createForm, field } from '@kayforms/core';

const form = createForm({
  email: field('', [required(), email()]),
  password: field('', [minLength(8)])
});

// Subscribe to changes
form.subscribe((state) => {
  console.log('Form state updated', state);
});

That's all it takes to get reactive form state, real time validation, and time travel debugging.

Connect with me

· GitHub: kelvinagyareyeboah
· Twitter: _yo_kelvin
· LinkedIn: agyarekelvinyeboah

DEV Community