lens-api

Implements Lens Studio TypeScript scripts covering component lifecycle, touch input, and runtime object creation.

16|2|Updated Apr 13, 2026
One-click install
npx skills add https://github.com/lens-studio-devs/ls-extensions --skill lens-api-lens-studio-devs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: lens-api
Source: https://github.com/lens-studio-devs/ls-extensions/tree/main/plugins/ls-clad/skills/lens-api
Command: npx skills add https://github.com/lens-studio-devs/ls-extensions --skill lens-api-lens-studio-devs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing Lens Studio TypeScript scripts requires knowing the Lens runtime API (StudioLib), which differs subtly from the Editor API and has many pitfalls — shared materials, unsafe onAwake access, normalized touch coordinates — that cause silent runtime failures. ## Core Features & Use Cases - Component & Lifecycle Patterns: Provides the canonical @component class anatomy, decorator reference (@input, @hint, @allowUndefined, @label), and lifecycle event ordering (onAwake, OnStartEvent, UpdateEvent, DelayedCallbackEvent). - Runtime Scene Operations: Covers scene object queries, prefab instantiation (sync and async), runtime object creation with RenderMeshVisual, material cloning, and screen-to-world coordinate conversion. - Deep Reference Library: Ships 15+ reference files on 2D UI, materials/shaders, math, face tracking, instantiation, performance, debugging, and cross-script component access. - Use Case: When asked to write a Lens script that spawns objects on tap, the Skill supplies the correct TapEvent handling, screenSpaceToWorldSpace conversion, prefab.instantiate call, and material-clone-before-modify pattern. ## Quick Start Write a Lens Studio TypeScript component that spawns a prefab at the tapped screen position with a cloned tinted material.

Frequently Asked Questions about lens-api

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I handle tap input in a Lens Studio TypeScript script?

Bind a TapEvent with this.createEvent('TapEvent') and read eventData.getTapPosition(), which returns normalized [0-1] coordinates. For drag or multi-touch, use InteractionComponent's onTouchStart, onTouchMove, and onTouchEnd callbacks instead.

How to convert screen coordinates to world position in Lens Studio?

Call camera.screenSpaceToWorldSpace(tapPos, depth) with the normalized tap position and a depth measured from the camera's near plane. The tap position and this method share the same coordinate system, so no manual projection math is needed.

Why does changing a material color affect all objects in Lens Studio?

Materials are shared assets, so modifying mainMaterial in place recolors every object using it. Clone the material first, call clearMaterials() and addMaterial(clone) on the RenderMeshVisual, then modify the clone.

What is the difference between the Lens API and the Editor API in Lens Studio?

The Lens API (StudioLib) runs inside the AR experience, while the Editor API (editor.d.ts) drives the Studio editor. They use different accessors — for example getTransform().getLocalPosition() versus localTransform.position — and mixing them compiles but fails silently at runtime.

Why is my @input reference undefined in onAwake in Lens Studio?

Cross-object @input references and getComponent calls on other objects are unsafe during onAwake because initialization order is not guaranteed. Defer that work to OnStartEvent, which fires after all components have finished onAwake.

How do I create a scene object at runtime in Lens Studio?

Call global.scene.createSceneObject('name') on the ScriptScene, optionally set a parent, then add components with createComponent('Component.RenderMeshVisual'). SceneObject itself has no creation method — global.scene is the only runtime entry point.