How Truzme is built

Technical details, for developers. Expect jargon.

Truzme is my sandbox. Over the years I've tried all kinds of technologies on it. It's a side project, so I make decisions for myself — even when something else would be the logical choice.

The stack

Where it started

2018: Truss Me started as a Vue.js app. Angular 2 came up too, but I dropped it. In the end it turned into React — the first React code I ever wrote.

2019: I've always been into geometric constraint solvers, so I dug into the Newton–Raphson method and similar topics. It became a separate branch, but never turned into a feature.

2020: MobX + MobX-State-Tree. At work I was on an AngularJS–React bridge, and MobX came up there, so I tried it at home first — Truss Me was my proof of concept. It was also the first app I added undo/redo to.

I learned a lot from MobX that I still use everywhere else. My favorite read is UI as an Afterthought by Michel Weststrate, the creator of MobX.

2022: Next.js, just to learn that too. The first app I deployed to Vercel: truss-me.vercel.app, still up.

2024: public for the first time. Hello Google Search Console and SEO.

2026: rewrote the whole state layer to Zustand in a few days, with AI. That was Truzme 2.0 — and a lot of features have shipped since, see the changelog.

Rendering: plain SVG

No canvas, no WebGL, no three.js. The whole model is SVG, rendered by React.

That's on purpose. My main focus was to get good at building really performance-heavy apps in React, and a live-updating SVG editor is a great place to practice. It's a skill I trained deliberately.

I've also always been into vector graphics. tldraw is SVG too, and Steve Ruiz, who built it, is a big role model of mine. You can do a lot more with SVG than most people think.

The solver

A finite element solver, written from scratch in its own package, using the direct stiffness method. It builds the global stiffness matrix and solves it with Gauss elimination — on every change, which is why there's no solve button.

All of it written by hand, before the AI boom. The good ol' way.

The calculation runs in a Web Worker, so it never blocks the main thread. You can drag a node while the model keeps re-solving in the background.

If you'd find it useful, I could add a feature that shows the matrices behind a structure. Let me know.

No backend

Models are stored in the browser, in IndexedDB and localStorage. You can also save to a file on your disk — with the File System Access API where the browser supports it. No accounts, no database, nothing to leak.

Project code

Every model can be written as plain JSON, with a JSON Schema to validate it. There's an llms.txt too, so AI tools can read and write Truzme models. Project code guide

AI chat

There's an AI chat inside the app, built on Claude. It's not a public feature — I built it only for myself, for fun.

Built with Claude Code

I couldn't ship this much next to a family without Claude Code. With AI I crank out code fast — but only because I know what I'm doing.

The other way around

Usually you learn at work and use it in your side project. For me it often went the other way: what I figured out in Truzme, I later used at work.

So if you're a developer: have a side project. It's where you get to try things nobody pays you to try — and it opens doors.

Fellow developer?

Developer, vibe coder, or just curious how something works under the hood? I'm always up for talking shop.

Let's talk
← Back to About