webofbits

webofbits

Helix is a visual workflow designer for AI agents and multi-agent systems, built with Phoenix and React Flow. It provides an intuitive drag-and-drop interface for planning and designing multi-agent workflows, with real-time collaboration powered by websockets.

:warning: Note: Helix is an early-stage project in active development. Current functionality is limited, with workflows stored in localStorage. It is not yet feature-complete.

I’m sharing this work hoping to gather some early feedback.

Key Features

  • Node-based workflow design with customizable nodes and connections

  • Real-time multi-user collaboration via Phoenix Channels (doesn’t have proper user management or access controls – I am working on designing the data model)

  • Modern UI with light/dark themes and responsive design

  • Workflow management (save, load, duplicate) with local persistence.

  • Export to PNG

Future Plans

The primary goal is to use Helix for AI workflow planning and later add a JSON/DSL export to be used with other libraries that could provide execution. In the long term, I could add some execution for testing purposes but that’d come with its own complexity thus for the time being I am just focusing on the diagramming aspect.

Tech Stack

  • Backend: Elixir 1.17+, Phoenix, PostgreSQL

  • Frontend: React, TypeScript, React Flow, TailwindCSS

  • Real-time: Phoenix Channels with GenServer session management

  • Testing: ExUnit, Jest, Playwright

Notes

I’m aware this project does not use LiveView, which is often the preferred approach in the Elixir community. If React is not of interest here, I completely understand. That said, I’d especially value JavaScript/React feedback from those familiar with the ecosystem.

Currently, workflows are for planning and design only (not executable yet).

Requirements

  • Elixir 1.17+

  • Node.js 18+

  • PostgreSQL 14+

Links

  • Hex: Not yet published

  • Documentation: Available in README

https://github.com/ccarvalho-eng/helix

First 10 of 14 Posts Switch mode

webofbits

webofbits OP

React’s complexity ramps up fast. Not so much in building UIs—that part’s fine—but once backend auth and coordination come in, things get heavy.

I’m considering giving LiveView a try. By cutting most of the frontend-backend communication, it could make handling complexity much simpler. I’d keep React Flow in play through LiveView hooks.

webofbits

webofbits OP

I tried moving things to LiveView, but looks like a full migration would eat up too many hours, and React’s already running stable. I did hit some weird lag—dragging a node made the connection line duplicate until I refreshed. Could just be how I hacked it together in the spike. My guess is the LiveView way here would be to leave the fast UI bits (dragging, animations) to JS, and let LiveView just handle the events/state.

Sticking with React, for now. I probably can migrate later after having it “finalized” with all major features working needing just minimal polishing.

webofbits

webofbits OP

Released minor patch updates to add login and signup functionality. Currently refining the OTP design to ensure maximum resilience. The intended use case is for teams to host this repository internally as a service to design and orchestrate AI agents.

BartOtten

BartOtten

Hologram? Although I have no idea if it plays well with the fast amount of JS libs for charts and client UI interactions.

bartblast

bartblast

Creator of Hologram

Good point! If there’s specific JS library integration needed, it’s probably worth waiting for the JS interop that’s coming soon. But besides that, the charts and the whole UI could actually be implemented in pure Elixir if you choose to go that route.

No need to leave the “fast UI bits” to JS when you can handle dragging, animations, and all the interactive parts directly in Elixir on the client side :slight_smile:

webofbits

webofbits OP

I hadn’t come across Hologram before — looks like a really interesting project. If I understand it right, the idea is to write code using an Elixir macro and have it translated into JavaScript? I’m a fan of DSLs, but I’m a bit on the fence since I’d still need to memorize the Phoenix/LiveView DSL, which has changed a lot over the past few years. Touching the bare bones isn’t always bad :sweat_smile:

webofbits

webofbits OP

Thanks for sharing interop.

Mixing Elixir with JS doesn’t seem like a bad compromise. Most libraries try to hide the JS layer so people can ejoy typing Elixir code, but I actually like to understand what’s going on under the hood.

However i’ll go with entire LiveView or other Elixir libraries next time. I’d need time and energy to rebuild the entire thing in LiveView specially in an early stage without any users or contributors.

Jskalc

Jskalc

I can share my 2 cents here. I’m the author of live_vue library, and I’m mixing live views with frontend frameworks on a daily basis for more than a year :wink:

All in all, LiveView plays nicely with JS frameworks when instead of rendering HTML it synchronizes top-level props to the frontend component and handles selected client-side events in the same way as in a regular LiveView. That way you get both of two world - your live view handles routing, data fetching and updates, and your frontend handles client-side state, rich interactivity and is free to use any library from a selected ecosystem. You might want to read that post.

Personally I’ve built entire SaaS product https://postline.ai that way - each of my live views renders just a single vue component. It’s similar to IntertiaJS, but uses LiveView behind the scenes.

There’s also live_svelte and live_react. I think my library is the most feature-complete, but since your frontend is written in react it might be the easiest to migrate.

Good luck, hopefully it will be useful!

webofbits

webofbits OP

Thanks! these are really good options. Maybe the only downside on having it entirely in React (without LiveView) is that I might get less people interested on contributing? I’ll take a look at those libraries you mentioned. Live Vue seems like a great one! I see what you mean when talking about LiveView hooks complexity. Probably why I gave up the migration saga to LiveView because I ended up creating a huge hook with a lot of submodules.

bartblast

bartblast

Creator of Hologram

I think there might be a small misunderstanding about how Hologram works. You don’t need to use macros or learn DSL at all. Hologram lets you write regular Elixir code that gets transpiled to JavaScript - so you’re working with pure Elixir.

The JS interop page I mentioned is specifically for interfacing with existing JavaScript libraries client-side when you need them, but the core framework doesn’t require any JS knowledge.

Speaking of workflow builders, Aldous Waites built a great Hologram interactive demo with snappy, draggable graph nodes that showcases how smooth client-side interactions feel in Hologram. The implementation is surprisingly clean - what would require complex JavaScript coordination in traditional approaches becomes straightforward Elixir code.

Since you’re working on a visual workflow designer, this demo might be relevant to show what’s possible with Hologram for that kind of interactive UI! The dragging, real-time updates, and visual feedback all happen smoothly on the client side, written entirely in Elixir.

O0Cy408ItnJITGOg

Where Next? Top

Trending in Announcing Top

bluzky
You may know https://ui.shadcn.com/, a UI component library for React. I really love it’s design style and components. I’ve built some co...
387 15136 120
New
woylie
Flop is an Elixir library that applies filtering, ordering and pagination parameters to your Ecto queries. offset-based pagination with...
New
JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
shahryarjb
The Chelekom project is a library of Phoenix and LiveView components generated via Mix tasks to fit developer needs seamlessly. One of i...
New
woylie
Phoenix components for pagination, sortable tables and filter forms with Flop and (optionally) Ecto. pagination cursor pagination sorta...
New
kip
Please say hi to a new lib, Astro that aims to deliver easy-to-consume astronomy calculations of practical use. For now it only calculat...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New

Other Trending Topics Top

juhalehtonen
There has been a thread to discuss the Stack Overflow Developer Survey on this forum every year since 2018, so here’s yet another one for...
New
type1fool
I just stumbled on a newly redesigned elixir-lang.org. :tada: It looks like @Software_Mansion did the work, and I think it is generally a...
New
akoutmos
@hugobarauna and I (Alex Koutmos) have been hard at work on writing a book on Nerves that takes you from simply blinking LEDs to building...
New
spammy
I’m looking to build a personal workflow to quickly deploy web applications written in elixir/phoenix, for local consumption (ie not on t...
New
alexslade
Fly’s CEO posted this recently - Turn And Face The Strange · The Fly Blog It says that Fly is going all-in on sprites, which is a worry ...
New
Herve37
We’re evaluating API mocking tools for OpenAPI-based projects and would love to hear what other teams are using. We’re particularly inte...
New

We're in Beta

About us Mission Statement