Background

It may surprise you that, even today, implementing interactive UI is still very difficult.

Frontend frameworks like React or Vue are good at updating the content of a website in real time, but the same cannot be said for changing the layout. Take a typical social media site for example; content like posts and comments changes rapidly, but the layout of the website otherwise remains the same.

Meanwhile, canvas/WebGL-based frameworks like Three.js and Pixi.js provide excellent performance, but because they no longer use the DOM, everything has to be absolutely positioned on screen manually. This makes it harder to build structured UI, and also loses access to the ecosystem built around DOM, such as accessibility tools and SEO optimizations.

Another route is to use a dedicated library that provides the necessary UI components. This approach is practical for most cases, but it’s not without its tradeoffs. Often, these libraries only work for specific frontend frameworks. There is also the issue of compatibility—if you ever need to mix and match multiple libraries, there is no guarantee they will work together.

There is of course the option to code it yourself, or maybe even vibe code it. But highly interactive UI requires precise coordination of input handling, DOM updates, UI logic and animations, which is a difficult task that even latest AI models struggle to perfect.

Idea: A Common Foundation for Interactivity

The inspiration came from the video game industry. Game developers rarely develop a game from scratch. More likely, they use a game engine like Unity or Unreal Engine, which provides common utilities like physics, hardware optimizations, controller input, etc.

SnapEngine applies that same idea to the web. It is designed to be:

• Optimized for the DOM, while providing reasonable performance when mutating and moving elements dynamically.
• Framework agnostic.
• Pre-packaged with utilities like collision detection, gesture handling, etc.

On top of that foundation, SnapEngine exposes a set of standardized APIs that make it possible to build reusable interactive UI elements as assets. Because these assets share a common engine, they are easier to combine, maintain, and extend.

That is the idea behind SnapEngine, the web’s interactivity engine designed for building highly interactive DOM based user interfaces, with a focus on performance, extensibility, and composability.