Szymon Kaliski

MirrorState

MirrorState ↗ is a Vite plugin and a React library, which in tandem allow for bi-directional state synchronization through JSON files.

Edits made through the React state update the file content, and edits to the file update the UI:

MirrorState grew out of a few ad-hoc iterations spread across various side-projects. The main motivation comes from the approach of building prototypes with a single source of truth, which gets hardcoded with initial values.

What often happens further into the project is that I'll take a couple of actions in the UI, and I want to preserve that specific state back into the file — at which point I have to either manually recreate it, or make it available in the console, JSON.stringify, and copy-paste back into the code.

---

In development, the Vite plugin file-watches all *.mirror.json files for changes, and beams them up through a websocket. The React library connects to that websocket, swaps state on new values from the file, and beams back down the edits made in the UI. In production build, the content of the *.mirror.json file is hardcoded into the build artifact.

Go try it out: szymonkaliski/mirrorstate ↗

---

While MirrorState grew organically out of my own needs, there are some interesting parallels to:

1. Riffle: Reactive Relational State for Local-First Applications ↗ — at some point during its development Geoffrey ↗ showed me a demo of opening up the application state in a database editing tool, and being able to inspect and change it as the application runs, which really resonated
2. Code⇄GUI bidirectional editing via LSP ↗ — which (obviously) relies on LSP to achieve similar results (livelove ↗ is another, more developed, take at this idea)
3. The program is the database is the interface ↗ — which is at best an "aspirational" connection, and extends this idea of bi-directionally editable data structure with being able to ... edit itself

Backlinks

1. 2025-09-29Bi-Directional State Synchronization in React and Graphical Notation in Figma³