Why would we do something as crazy as building our own JavaScript Engine? In a word, speed.
Today's vibe coding is built around files: Edit, save, a build is triggered, Hot Module Refresh triggers a file-level re-evaluation, the page re-renders. This means that code updates are much heavier and slower than they need to be, especially compared to how fast drawing and design tools can perform updates when you edit.
To get design tool like speeds (60FPS) for vibe coding, edit operations need to happen at the lowest possible level: The syntax tree nodes. Changes to the syntax tree then need to cause a minimal amount of code to be re-evaluated in the browser, which is where our purpose-built JavaScript Engine comes into play. Well, technically it's a TypeScript Engine, because it directly evaluates TypeScript syntax trees (ASTs), skipping over non-executable nodes like type annotations.
Here's how it works: The engine receives a change in the AST because the user made a visual edit of a selected component using our component props panel, e.g. to change the size property on a Button component. We're currently focusing on React, so the engine identifies the closest most fine-grained way to perform the rendering update, which in this case is to re-render the nearest parent component that owns the Button component. This happens in just a few milliseconds, and we're able to optimistically perform the change on the client before distributing the change to the server.
Since we're not bound to file save operations and file watchers, we can have multiple pending draft edits at once, e.g. to present the user with multiple AI-based edit suggestions. This capability opens up a ton of new ways to interact with code, with design tools and code editors converging into something entirely new.
If you want to see this thing in action, head over to https://www.henosia.com and drop a prompt to get the project started. Use the selection tool, it's the button with a pen on a bullseye icon next to the chat input. This starts our code engine, and you're able to instantly preview and edit Tailwind styling and component properties at 60FPS. Our docs at https://docs.henosia.com/edit/select have more info, and https://www.youtube.com/watch?v=5yqsFGt7zAg walks through the capabiliies.
I’d love to hear what you think about our approach, and where we should take it next :)
PS: For a limited time our free plan includes unlimited AI messages and visual edits.