Directive Sync – The “Odd” Story of Kit JS

#frontend #opensource #kitjs #webdev

The Idea Emerges

When I started developing Kit JS, I ran into a problem that most JS frameworks tend to ignore.

My website was SSR-rendered (server-side rendering). Everything was already in the HTML; SEO was ready. But when I tried to pass state or scope from the client back into these rendered elements, the entire component would re-render.

And I realized: I didn’t want to redraw the world. I just wanted to sync the data.

From that realization, Directive Sync was born.

Sync – A Different Rhythm of Data

If a model is the way a framework pushes state to the view, sync is the way the view talks back to the state — a closed loop without destroying or rebuilding the DOM.

In other words, sync doesn’t “recreate,” it listens and records.

Directive Sync wasn’t designed to oppose the model; it’s a natural evolution in the SSR context.

It allows server-rendered pages to behave like lightweight SPAs, without sacrificing SEO, speed, or the static nature of the page.

Why Sync is Needed

In most frameworks, if you want two-way binding, the framework must control the entire DOM.

This means that when HTML is rendered from the server, the framework must re-render on the client to establish bindings. The result:

SEO bots see the raw HTML, not the actual state.
Users see a “flash” during re-render.
We end up running client and server as two separate worlds. Sync solves this by injecting values from the already-rendered DOM back into the scope. No re-render, no DOM diffing — just reading the real data from the server and keeping it consistent.

The Philosophy Behind Kit JS and Directive Sync

Kit JS wasn’t created to replace other frameworks.

It emerged from a very specific need: to bridge the static and dynamic worlds, SSR and reactive UI.

It’s not a “new framework idea” — it’s a counterflow mindset:

If the data is already there, why redraw it?
Sync embodies that philosophy — simple, practical, and respectful of what already exists.

It doesn’t claim DOM ownership or force you to “rerun” your app. It quietly synchronizes everything so that it continues to work as it should.

A Small Piece of a Larger Journey

For me, Kit JS isn’t a framework race.

It’s a personal journey to rediscover minimalism in web development.

Directive Sync is just one piece — a slightly “odd” piece because it doesn’t follow pure reactivity. Instead, it blends static rendering with dynamic data life.

And perhaps, in that “oddness,” we find another path — a place where the web is fast, real, and still soulful.

https://github.com/kitmodule/kitjs

NOTES