Bi-Directional State Synchronization in React, and Graphical Notation in Figma
Hi!
Our daughter just turned one!
The days really are long, and the years really are short. She seems to be learning something new every day now, from crawling to standing up, to making sounds, to waving at us — it's been amazing.
MirrorState
MirrorState is a React library and a Vite plugin which handles bi-directional state synchronization through JSON state files. This way the changes made through UI end up on disk in human-readable form, and changes made to these files propagate live to the UI.
MirrorState was almost fully build with LLMs, in, I think, somewhat interesting way:
- I have an
AGENT.md/CLAUDE.mdfile which holds a simple instruction on how to usePROJECT.md - the
PROJECT.mdis a mix of high-level "PRD", and a task list subdivided into "features" - as I was working, I would prompt the LLM to expand what I'm thinking about into a feature, I would then both chat with it some more, and manually edit the file, and once I was done, I'd ask to implement and check off the items
- I'm honestly not sure if this approach helps with LLM grounding into the state of things, or pollutes its context, but it definitely helps me stay on the right track, and makes sure that we're - at least partially - are "talking" about the same thing - especially when coming back to the project and starting a new chat session
You can try out MirrorState here: szymonkaliski/mirrorstate ↗
What if Iannis Xenakis had Figma?
Iannis Xenakis remains a huge inspiration, I was poking around his graphical notation and made a silly demo to "play" them from Figma:
I learned the hard way that Figma plugins have no support for WebMIDI, which is disappointing. WebSockets do work though, so I just piped the values through a localhost server, but I really don't understand the limitation (I also do understand how some could argue that there's no use for MIDI in Figma).
Pulling Myself Out of the Computer
Over the summer I also managed to discover (yet again) that spending too much time in the computer (or maybe not having anything to balance it with?) is not good for me.
I decided to pick up sketching, and I'm slowly moving through How to Draw ↗, aiming for just a couple of minutes of exercises as often as I can. It's been really fun to spend time with a pencil and a piece of paper, and to move my body in a way that neither barbell nor keyboard forces it to.
I've also been noodling on some music again, which I missed a lot. Optimizing my studio for having a single switch to power on all the gear and be ready to play immediately has really helped with getting just a few minutes in here and there.
Worth Checking Out
What I've been reading lately:
- I skimmed through Algebraic Topology ↗ and Topology for Computing ↗ — most of it is over my head at the moment, but I do like the pictures, and I have some intuition around what homotopy is, which is nice
On the web:
- Catalogue of semantic zoom patterns ↗
- This is what computers are for ↗
- Fiber optics sculptures ↗
- Code Shaping: Iterative Code Editing with Free-form AI-Interpreted Sketching ↗
- A cool compiler visualizer ↗
- Critical Architecture/Software Theory ↗
Self:
- I published some early unstructured thoughts on Open Questions Around LLM Interfaces, VPLs and LLMs, and "Learning to Program" and LLMs