My main issue with many of these tests and reviews is that most of the results focus on testing the harness (in this case, likely Claude Code) rather than evaluating the model’s inherent performance.
Hey! Thanks for spending time with the playground – we're glad you found it engaging! You've hit the nail on the head with the "building blocks" analogy.
We want to emphasize that while Open Node Protocol enables no-code development, it's absolutely not limited to it. The Open Node Protocol is a specification, a set of standards for how these "blocks" (nodes) interact. Developers can build nodes in any programming language and with any framework they choose. The visual assembly is just one way to use ONP; the underlying power comes from the standardized communication between nodes, regardless of how they're built or connected. This means experienced developers can create highly sophisticated, code-based nodes and leverage the benefits of modularity and AI integration at a much deeper level. Think of it as a way to create reusable, interoperable components, regardless of whether you're connecting them visually or programmatically. In fact, in the near future, you can ask AI to assemble the nodes for you.
A great next step would be to check out our tutorial[1] – it walks you through the core concepts and helps you build your first node.
I did an evaluation on the various frameworks 2 years ago, and it largely came down to only these 2 choices:
- React (if you want the largest support, packages, community, but sacrifice on performance)
- SolidJS [1] (best performance, composability, low-level primitives, but sacrifice on packages/community)
Every other choice like Angular, Vue, Svelte are just somewhere in between these 2 spectrums which I felt was not worth it. Either choose the one with the largest ecosystem or one which has the best primitives & performance.
- React (vdom, slow) (largest ecosystem)
- Vue (vdom, faster than react) (large community)
- Svelte (fine-grain, faster) (best dx pre-v5) (composability is still not as flexible in v5 compared to SolidJS) (small ecosystem)
- SolidJS (fine-grain, fastest, most consistent) (dx similar to react) (small ecosystem)
Much needed feature for typography! The biggest pain is when I need to visually vertically center a text with an icon. If you have an [ICON] followed by upper case character (e.g. Hello), the (H) will always visually look too high to be vertically centered with the [ICON] because the actual height of the text that is calculated always account for hanging characters like "g, y", etc.
Great to see more people thinking about this space. Totally agree on the sentiment that we should be able to visualize/describe and build business logic in a very simple manner. The way I've been thinking about this is something like Legos where we can compose any logic, app, workflow we want visually and that anyone can build and share these blocks. This is almost similar to NPM packages, but for non-developers.
My attempt on this is https://openexus.com where the goal is really to create some form of universal plug-and-play building blocks. Your approach is almost very low-level with direct translation to code. My attempt is slightly higher-level (but developers can create as low level as they want). More importantly, the visual diagram build on openexus is a reactive graph (almost like spreadsheet), not a sequential directional flow graph (like node-red, or yahoo pipes).
Would love to chat if you are up for it. m at lominming dot com.
Obviously there are huge similarities to solid-js and other signals based framework with creating a signal, creating computed/derived, creating effects, etc. Would it be fair to say that Svelte 5 is going to more "runtime reactivity" rather than compiled time?
I'm also someone who are driven and get excited about working on something fundamental. My recent endeavor is the result of years to figuring out what can be the fundamentals for the web -- Building Blocks for the Internet.
It would be helpful to understand why you feel like version control (git, not github), a programming language (javascript), a browser, a database are all fundamentals? They are not the first in their respective categories, just that they all became popular? I feel like your examples also lean heavily towards developer only tools?
Thank you for the feedback. Did you by any chance manage to connect the first 2 cells? Once you do that, it will reveal a lot more content, with a more "regular" home page that you can scroll down.
Yahoo Pipes (or NodeRed) are what I consider “data flow pipelines” editors. These tools have very distinct characteristics: (A) usually a single piece of data or message that (B) flows through a system in one direction with (C) distinct start and end points.
Couple of core differences with what we are building:
(1) Instead of directional data flow, we have reactive data flow. For example, in the simple utility color example, [RGB Sliders] <> [Conversion] <> [HEX Color Wheel] have data flowing bi-directionally where any modules can trigger a change. Users still have the option to decide how data flows, so data flow pipelines are just a subset of what our system can do.
(2) Beyond just data or automation, we focus heavily on UI modules, allowing users to easily express interactive creations.
We actually did a mini internal hackathon among ourselves to see what we can do in 1 hour. We created a codepen (multiple code editors hooked up with iframes), spotify + lyrics + translation mini app, and a mini-dashboard.
Besides the common use-cases of creating apps or dashboards, we are excited about: AI apps and workflows, interactive education materials, a playground for kids to start thinking about logic, and hardware interface controls.
Developers can create modules in Javascript very similar to writing web components or React components. The only addition is to write a declaration of the connectors (e.g. value, data, location, etc.) and use provided functions to subscribe to cell value changes.
Developers can import NPM packages, load external javascript files, use JSX, write CSS, use Typescript, etc. We will provide all the necessary tooling online so that building a module is as simple as using an online IDE like codepen. No need for downloads, building, compilation, etc.
Non-developers can also create custom modules that consist of other nested modules grouped together. We also aim to have a lightweight way for citizen developers to write modules using spreadsheet-like syntax.
The logic is actually quite simple. Once 2 cells are connected via a line, their values are kept in-sync. If one cell changes the value, the other cell will be informed of the change, and the module will react accordingly, very much like a reactive spreadsheet.
During the initial connection, we have to “pick a winner” and determine which of the 2 cells’ values to use. The logic is that the empty cell will be overridden. If both cells have values, the direction of how you connect them determines the winner. Dragging A to B will have B’s value overridden by A’s value.
However, the developer of the module, or the creator have the ability to specify the direction flow when necessary. For example, in the Github example, the Github module populates the (issues) cell via fetch call and is expected to be a read-only cell. This means that any connection to the cell will become a directional data flow out.
The simple big picture is that we are drawing lines to tell the system how we want data to flow among the different modules, very much like how we pass variables around in code.