Show HN: NPM package for a visual scripting editor

[Herobrine2084]

Hey guys! I just released a NPM package to integrate a visual scripting editor into any node project (React, Vue, Angular... you name it).

Basically, the goal is to provide your users a way to customize, automate, create new features for your product. Just like an open-source community, but without the barrier of code.

Here's the homepage of the project: https://luna-park.app And a small tutorial for visual scripting: https://luna-park.app/challenge

[MH15]

This is extremely cool but I'm a bit confused on the licensing/source/pricing story.

[Herobrine2084]

Thank you very much! Yeah, it's still a bit confusing...

Basically, the editor is free. You can use it in your app and logic created can be executed by interpretation.

But the compilation of the logic into plain JS will be a paid option. You'll need it if you want to trigger the logic in a performant/headless way.

[llamaLord]

I can see that your library has a bunch of dependencies on other libraries you've published like "editor", but these don't seem to be accessible on NPM.

Honestly wondering if this will even compile locally without your .npmrc file and npm creds...

[Herobrine2084]

The dependencies that are not on NPM are dev dependencies, only needed for the compilation of the editor.

The "real" dependencies are FontAwesome (icons), Vue, Pinia (vue store) and Synth Color (a custom package I made to generate color schemes)

In short, the editor is already compiled. So you just need to install the package, it will automatically download the peer dependencies, as any NPM package.

I made a small demo repo here: https://github.com/lunapark/demo (you might need to update the package.json file to point to the actual version of Luna Park thought)

[edweis]

Your landing page designs are sleek!

Nitpicking about the package: <lp-theme/> is a not a valid HTML tag. You can use <meta name="lp-theme" /> or <div id="editor" class="--primary=#ffff00; --secondary=#000000" />

[Herobrine2084]

Thanks a lot! Actually, <lp-theme/> is a webcomponent. It might not be recognized by your IDE, but it's a valid HTML tag for that specific use.

This component then inherit a shadow DOM where all the magic happen.

See https://developer.mozilla.org/en-US/docs/Web/Web_Components/...

[justinclift]

Hang on, this doesn't appear to be Open Source.

The source code itself doesn't seem to be available (eg for security scanning).

Is that correct?

If that's indeed the case, then with NodeJS/npm's ongoing problems with malicious packages... this seems like a problem. :(

[Herobrine2084]

Yes, the source code is not open sourced.

But since it's an NPM package, the transpiled and minified code is of course available for automated security scanning (it's not uglified or obfuscated).

I don't think having the project open source will change a lot about security. It's a fairly complex project, and someone manually reviewing of all the code is unlikely.

Also, malicious packages is especially a problem for very common dependencies. And Luna Park is not gonna be a hidden dependency of a lot of packages.

On a side node, maybe the editor code will go Open Source someday, but since there's no way back to that decision, I'm taking time to reflect on this.

[bhouston]

How does this compare to the open source behave-graph library?

https://github.com/bhouston/behave-graph

Is Luna based on behave-graph?

[Herobrine2084]

Nop, Luna Park is 100% custom and not based on any third-party lib.

I admit I did not know behave-graph. It's built on the same node-based visual scripting vision, so there are a lot of similarities.

Though, a few key things I did not see in behave-graph that Luna Park provide are:

- create custom nodes with other nodes using functions

- generate standalone JS code

- type and value inspection at runtime

- a lot more nodes

- and a few others features (integrated documentation, node customization, inspector, console, etc...)

In short, behave-graph seems like a lite weight version of Luna Park.

[trebor]

This is very cool.

However, most our use cases would be in PHP apps. I see that you’re working on a code generation API. Would that be the step necessary for generating the PHP invokable code?

[Herobrine2084]

Thank you very much!

For now, the generated code is in JS, so you'll need Node.js to execute it. Though, it could have other target languages. I keep in mind the PHP usecase, I'll see if/when I can implement this.

In the meantime, you can create custom nodes that call PHP routes of your app. Not the most performant way of doing it, but it should work.

[trebor]

Well, that isn't the use-case I would need. The whole app would be written in PHP, so there would be no node process to execute the function. Invoking the function in node would require launching it, which would take a lot of time.

I'm thinking of various sites that need a "script" condition for domain logic. Like, "this coupon applies when your cart contains 5 items worth at least $5 each". If the client tried to write the logic for that they'd have no clue how. But a graph editor would be make that user-friendly.

There's just not a lot of FBP stuff for PHP, even though it's a popular language.

[cdaringe]

Just quickly scanned the page. As for VPLs in node, how does this compare to node.red?

[Herobrine2084]

Well Node-red does not really have an execution thread concept, meaning that you can't really define when nodes are executed. Luna Park does have execution thread wires, which are separated from variable wires.

So I'd say that Node-red is more of a workflow editor, not a visual scripting editor. You can create almost anything you would in code with Luna Park nodes. This is not the case with Node-red which is a bit higher level, and you do need to code the complex things you want to run.

Other than that, there are a lot of convenient features in Luna Park like:

- can be integrated withing any webapp (feels like Node-red needs a dedicated server to run)

- generate standalone JS code from the logic graph (to be run headless, with native performance)

- merge nodes into function that can be used as custom nodes

- type and value inspection at runtime

- a lot more nodes (generated from standard JS functions)

- and a few others features (integrated documentation, node customization, inspector, console, etc...)

Basically, Luna Park and Node-red might seem similar when looking at their UI, but they have a pretty different purpose. Node-red would be useful to automate workflows between systems. Luna Park would be useful to build those systems.

[quickthrower2]

Nice name. Inspired by Luna Park Sydney?

[Herobrine2084]

Thanks! Ahah, everyone knows of a different Luna Park!

Basically, it's a very common name for amusement parks, and it has this 70s-80s vibe I love. It's also used as a term for "amusement park" in several languages (Italian, Greek, Polish, German...).

See: https://en.wikipedia.org/wiki/Luna_Park

I wanted the branding to feel "fun", not boring. The visual scripting editor also feels like a game, and I went full gamification for the tutorial: https://luna-park.app/challenge

Btw, kinda difficult to see, but the logo is a shadow of a rollercoaster on a ramp with the moon behind.