Skip to main content
Version: 5.x
Supported on
Snapchat
Spectacles
Camera Kit

Overview

Plugins are add-ons that can be installed in Lens Studio 5.0 to extend the app’s capabilities and enhance developer workflows. Plugins empower developers outside of the Lens Studio engineering team to build Studio functionality to suit their needs.

Plugins are written in JavaScript (ES10) using the newly added Editor API, which exposes data of the editor and the opened project (e.g., scene and asset information) to plugin developers. The Editor API is similar to the Lens API, but runs in Editor rather than in a Lens at runtime.

You can use the Yeoman Generator to accelerate your plugin development process. The generator will generate the necessary files as well as boilerplate code to help you get started.

Some use cases that the editor api is capable of doing:

  • Create and edit scene objects and components
  • Read and write to the file system
  • Create and manage project assets
  • Create and configure script components (including custom components)
  • Listen for context menu interactions
  • And more…

Plugin Types​

There are different kinds of plugins. Your plugin can be one of the following types by having the class extending the corresponding base class:

  • Core Services: Core services are foundational and add new tools to Lens Studio 5.0. They have their own lifecycle and can store internal state. Core services start running when Lens Studio launches and continue until the app is closed or the plugin is disabled in the Plugins Manager. The base class is CoreService.

  • Presets: A preset is a "smart" asset, component, or scene object configured to work out of the box and handle its dependencies. When loaded or imported, presets become available in the "+" menu in the Asset Browser, Inspector, or Scene Hierarchy. Presets are created on demand when a Studio user adds one to a project from a "+" menu. The base class is Preset.

  • Panel, Dialog and Screen: These three types of plugins are classified as UI plugins, a category that provides complete control over dedicated user interface components. Upon activation, the plugin renders its own panel, dialog, or screen, which it manages autonomously. The user interface can be customized using a wide array of UI components provided by the LensStudio:Ui module, such as buttons, scrollable containers, text labels, and numerous other interactive elements. The base classes are PanelPlugin, DialogPlugin, and ScreenPlugin.

Examples​

Here are some working examples of different plugin types, for you to explore and learn from:

Core Services

  • GitStatusChecker: A core service that periodically checks the git status of the current project.
  • ObjectMenuItem: Adds a new action to the Object panel's asset context menu.
  • TCPServer: Creates a TCP server that listens for incoming connections.

Presets

UI Plugins

  • PanelWidgets: Demonstrates the implementation of a panel plugin, showcasing most types of UI widgets.

About the JS environment​

The environment uses a Node.js-like structure, enabling ECMAScript (ES10) imports and exports. However, it's not a full Node.js or standard browser environment. Essentially, we're working with JavaScript (ES10) here, incorporating some Node.js-style features like import.meta.url and import.meta.resolve. These are part of our convention-based approach and do not represent a complete Node.js implementation. You're free to use other JavaScript scripts as long as they don’t rely on specific features exclusive to browser or Node.js environments to function.

We're always improving our plugin system and adding features. Let us know what you need to make it even better!

Contributing a Plugin

As with other content in Lens Studio, we’ll be happy to help you share your awesome plugins with the creator community once plugins are available to all. Take a look at the Asset Library publishing guide to learn more.

Was this page helpful?
Yes
No