Introduction

This section covers creating plugins for Luna Park. If you are looking to install and use an existing plugin instead, see Integrations > Plugins.

What a plugin can extend

A plugin can expose:

Custom components: Vue components that appear in the editor palette, with typed props, slots, events, and models.
Custom logic nodes: operations and functions available in the visual scripting graph.
Design tokens: reusable style values (colors, lengths, fonts) that appear in the style panel.
Lifecycle hooks: code that runs on mount, update, or unmount of the plugin.
Injections: CSS or JavaScript injected into the editor.
Custom windows: tailored UI panels opened from your plugin.
Settings tabs: custom configuration screens in the editor.
Templates: ready-made compositions that users can import into their projects.
Route guards and backend hooks: access rules for routes, request context, and database row filters.
Build options: npm dependencies, environment variables, and code injected into the compiled app.

Environment setup to initialize a plugin project.
Basics for the structure of a plugin (id, config, internal state, hooks).
The following sections cover components, nodes, tokens, backend features, and deployment.