I wrote innerself because I needed to make sense of the UI for a game I’m writing for the js13kGames jam. The whole game has to fit into 13KB. I needed something extremely small which would not make me lose sanity. innerself clocks in at under 50 lines of code. That’s around 600 bytes minified, ~350 gzipped.
innerself is inspired by React and Redux. It offers the following familiar concepts:
It does all of this by serializing the component tree to a string and assigning it to
innerHTML of a root element. It even imitates Virtual DOM diffing by comparing last known output of components with the new one :) I may sound like crazy but it actually works quite nice for small and simple UIs.
If you don’t care about size constraints, innerself might not be for you. Real frameworks like React have much more to offer, don’t sacrifice safety, ease of use nor performance, and you probably won’t notice their size footprint. In particular, innerself requires explicit sanitization of user input. It also isn’t a good choice for complex form-based UI when one part of the UI updates
onkeyup (e.g. character counter or toggling the
disabled state of a button).
innerself was a fun and less-than-serious weekend project for me. Let me know what you think!