https://www.npmjs.com/package/luna-park

skip to package search or skip to sign in
Nuanced Pterodactyl Monk

  * Pro
  * Teams
  * Pricing
  * Documentation

npm

 
[                    ]
Search
Sign UpSign In

luna-park
TypeScript icon, indicating that this package has built-in type
declarations

1.2.0 * Public * Published a day ago

  * Readme
  * Code Beta
  * 7 Dependencies
  * 0 Dependents
  * 8 Versions

image

 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.

screen

 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.

Keywords

none

Install

npm i luna-park

Repository

 github.com/lunapark

Homepage

luna-park.app

Weekly Downloads

67

Version

1.2.0

License

none

Unpacked Size

1.14 MB

Total Files

15

Last publish

a day ago

Collaborators

  * hugoattal

Try on RunKit
Report malware
 
 
Support

  * Help
  * Advisories
  * Status
  * Contact npm

Company

  * About
  * Blog
  * Press

Terms & Policies

  * Policies
  * Terms of Use
  * Code of Conduct
  * Privacy