Karton (German for “carton”) is a type-safe and web socket based solution that allows you to define a shared definition of what is synchronized between server and client side (the “Karton contract”):

- The type of state that is synced between the server- and client-side (read-only on client-side)

- Server procedures that clients can call to make mutations on server-side

- Client procedures that servers can call to make queries etc. to the client-side

All connections share the same state, and the state is always defined by the server. Deltas are efficiently synced through JSON-style patches (using immer under the hood).

We’re Glenn and Julian, and we built this as a tool for our startup (stagewise - YC S25). We needed a simple and type safe solution to sync a CLI app (JS-app) with a browser-based UI-app (we use React). We didn’t find any solutions out there that seemed easy to use, so we simply decided to build our own one.

We offer both the server and client in vanilla TS, but also ship a React-specific client that gives you a Zustand-style access to the state (allowing to only select slices of the whole state as well).

The API is made to be very easy to use, with just one output type that’s shared between server and client apps, making it a low-overhead solution if you build locally running JS apps that consist of multiple sub-apps. Karton is MIT-licensed, available on npm (@stagewise/karton) and currently part of our bigger OSS monorepo. It’s pretty much in beta state but we already use it in production.

GitHub: https://github.com/stagewise-io/stagewise/tree/main/packages...

NPM package: https://www.npmjs.com/package/@stagewise/karton

Our YC Launch: https://www.ycombinator.com/launches/O3M-stagewise-the-front...