Show HN: I made a visual editor for GitHub Actions workflows (opens in new tab)

(actionforge.dev)

17 pointssebastian_io2y ago2 comments

Hey there,

I have always been a fan of GitHub Actions workflows but for some reason never liked YAML files as being the assigned file format for non-linear workflows. While YAMLs are great as configuration files, they can be quite tedious when it comes to creating, reviewing, and maintaining workflows.

To solve this, I created a visual node system that makes the workflow creation and maintenance process more efficient and intuitive. It's a straightforward node engine with an UI editor.

Examples for such a node graph are here: https://www.actionforge.dev/github/actionforge/graph-runner/...

and here: https://www.actionforge.dev/github/actionforge/graph-editor/....

For clarification, they are directly executed on GitHub runners. These graphs took me minutes to build in order to focus on my actual project.

The next time you create a new repo, give it a try. Love to hear your thoughts!

Thanks!

2 comments

mic-kul2y ago

Looks great! Do you care to elaborate more on the tech behind the graph editor itself? Feels very smooth

sebastian_ioOP2y ago

Thanks! The project consists basically out of two components, the runtime and the editor.

The runtime is mostly self-written, focusing most of my efforts. The editor on the other hand is built on `rete.js` (https://retejs.org/) and Angular. ReteJS is a really amazing node editor framework. While I customized almost everything that was possible, a lot of credit goes to them.

In hindsight, Angular might have been a little bit of overkill, but it's the framework I'm comfortable with, given my very limited web development experience.

The editor is available here on GitHub and should work out of the box with the default VS Debug Configuration https://github.com/actionforge/graph-editor

j / k navigate · click thread line to collapse