Luna Park - Visual scripting editor

Luna Park is a visual scripting editor for the web. Faster and easier than code, more flexible and performant than no-code, visual scripting makes software development accessible to anyone.

This package allows you to integrate and customize the editor in your own platform. It will let your users build custom logic using native nodes, or custom one that you can easily build.

Demo

You can try out the editor on the Luna Park website. If you want to learn how to use visual scripting, you can take up the Luna Park challenge, a series of puzzle that will teach you the basics in a gamified way.

If you want to integrate the Luna Park editor into your platform, here's a GitHub repository implementing the editor: https://github.com/lunapark/demo

Getting started

Install the Luna Park editor:

> pnpm install luna-park

Install nodes library you want to use:

> pnpm install @luna-park/lib-standard @luna-park/lib-string @luna-park/lib-math

Available official libraries:lib-standard,lib-array,lib-date,lib-dom,lib-json,lib-math,lib-regex,lib-string,lib-url.

Setting up the editor

Here's a snippet to use the visual scripting editor:

import { LpLogicEditor, loadApplication, loadNodeLib, LpEditorConsole } from "luna-park";

// This is the ID of your editor, in case you want use several editors in the same page.
const editorId = "myCustomEditor";

loadApplication();
// The standalone argument is needed when the editor is used as a playground
const editor = new LpLogicEditor({ editorId, standalone: true });

// Append the editor to a container
document.querySelector("#editor").append(editor);

Load node libraries

You'll likely need to load some node libraries for the editor to be useful. You need to load them before creating the new LpLogicEditor using this function:

import { LogicNodes as LogicNodesStandard } from "@luna-park/lib-standard";
import { LogicNodes as LogicNodesString } from "@luna-park/lib-string";

loadNodeLib(editorId, LogicNodesStandard);
loadNodeLib(editorId, LogicNodesString);

Theme customization

If you want to customize the theme to match your brand color, you can use the lp-theme HTML element wherever you want in your app. You can specify a primary color and a background color, then all the colors will be automatically generated.

<lp-theme primary="#ffff00" tint="#000000" />

Documentation

If you want to create custom JS nodes, compile logics to JS or execute the logic from a JS context, please refer to the Luna Park documentation available here: https://luna-park.app/documentation

You can also check this example GitHub repository source:

• Vue example
• React example
• Vanilla TS example

Support

Luna Park is in active development. For now, you can get support on the official Discord server.