
Skill
iwsdk-migrate-0-5
migrate IWSDK applications to version 0.5
Description
Migrate an IWSDK 0.4.x application to IWSDK 0.5.0. Use when upgrading an existing IWSDK project across the 0.5 boundary, replacing Meta Spatial Editor or GLXF, removing retired Vite plugins, moving UIKitML to runtime-loaded assets, adopting native scene JSON, or resolving 0.5 migration errors.
SKILL.md
Migrate IWSDK 0.4.x to 0.5.0
Upgrade an existing IWSDK application without losing behavior or authored content. This is a migration, not a rewrite: preserve working runtime logic, move only static composition into the native scene format, and prove parity in the live runtime.
User context is in $ARGUMENTS.
Scope
This skill is specifically for 0.4.x -> 0.5.0. First inspect the installed
versions in package.json and the lockfile.
- If the project is already on
0.5.x, diagnose the reported issue without replaying the migration. - If it is older than
0.4.x, apply the intervening release migrations first. - If it is newer than
0.5.x, use the skill for that release boundary instead.
The public comparison baseline for this guide is IWSDK 0.4.2.
Non-negotiable safety rules
- Inspect
git statusbefore editing. Preserve all existing work; never reset, clean, or overwrite unrelated changes. - Create a recoverable checkpoint before transforming GLXF, scene files, or UI sources. Use the project's established version-control workflow; do not commit unless the user authorized commits.
- Inventory the app before deleting a package. A package is removable only after all of its imports, config hooks, scripts, and generated outputs have been replaced.
- Do not claim that a GLXF or Meta Spatial scene was migrated merely because the app compiles. IWSDK 0.5 has no GLXF runtime fallback; reproduce and verify the authored hierarchy in native scene JSON.
- Keep dynamic behavior in TypeScript/JavaScript. Native scenes own static composition, component values, transforms, lights, panels, and player-space attachments—not runtime-dependent entity counts or game logic.
Release boundary at a glance
| 0.4.x surface | 0.5.0 replacement |
|---|---|
GLXF levels and @iwsdk/glxf | public/scenes/*.iwsdk.scene.json loaded by World.create({ level }) |
Meta Spatial Editor and @iwsdk/vite-plugin-metaspatial | IWSDK managed editor in @iwsdk/vite-plugin-dev |
@iwsdk/vite-plugin-uikitml generated JSON | Runtime parsing of source .uikitml files from public/ui/ |
@iwsdk/vite-plugin-gltf-optimizer | Pre-optimized source assets or the normal IWSDK glTF asset pipeline |
vite-plugin-mkcert | Cached, untrusted HTTPS certificate generated by iwsdkDev() |
PanelUI.config: './ui/panel.json' | UIKitML manifest asset whose URL is /ui/panel.uikitml |
PanelUI.maxWidth / maxHeight | Entity transform scale plus the document's intrinsic dimensions |
features.spatialUI.kits | features.spatialUI.kit and optional componentSets |
GLXFComponentRegistry | defineComponents([...]) plus native scene component props |
LevelGLXFImporter / LevelEntityCreator | World.loadLevel() for native scenes / World.createTransformEntity() for dynamic objects |
xr.features.lightEstimation | Authored light components and IBLTexture/IBLGradient |
render.defaultLighting and implicit gradients | Explicit dome and IBL components on each native scene root |
| Static entities created in the startup callback | Asset/component manifests plus native scene nodes |
| Ad hoc custom-component registration | defineComponents([...]), shared by runtime and editor |
The Interactable compatibility alias still exists, but new and migrated code
should use RayInteractable.
Phase 1: Inventory before editing
Determine the package manager from the lockfile, then collect:
- every
@iwsdk/*dependency and its installed version; - every import or config call involving
glxf,metaspatial,compileUIKit,vite-plugin-uikitml,vite-plugin-gltf-optimizer,mkcert, orIWSDK_DISABLE_MKCERT; - every
World.create,World.loadLevel,PanelUI,ScreenSpace,Visibility,render.defaultLighting, andfeatures.spatialUIuse; - all
.glxf,.uikitml, generated UI JSON, Meta Spatial project files, and generated glTF folders; - static entity creation in startup code and the systems that later locate or manipulate those entities.
Classify each static object as one of:
asset: glTF, UIKitML, or a parentless proceduralObject3Dprototype;scene node: a stable id, transform, asset reference, and component values;player-space child: content attached to player, camera/head, target-ray, or grip space;dynamic: keep in code because runtime state determines its existence.
Record the inventory in the migration report. This is the parity checklist.
Phase 2: Align packages
Update every IWSDK package already used by the application to 0.5.0. Keep
IWSDK packages on one version; do not mix 0.4.x and 0.5.x packages.
Remove these retired packages when present:
@iwsdk/glxf
@iwsdk/vite-plugin-gltf-optimizer
@iwsdk/vite-plugin-metaspatial
@iwsdk/vite-plugin-uikitml
vite-plugin-mkcert
Do not add @iwsdk/scene-composition merely because it is new. It is already a
core dependency; add it directly only if application code imports its document,
validation, or composition APIs.
After editing package.json, use the project's package manager to update the
lockfile and installation. Do not delete the lockfile as a shortcut.
Phase 3: Simplify Vite configuration
Remove imports and plugin entries for mkcert, Meta Spatial, UIKitML compilation, and the glTF optimizer. A migrated config should follow this shape:
import { iwsdkDev } from '@iwsdk/vite-plugin-dev';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
iwsdkDev({
assetManifest: './src/assets.ts',
componentManifest: './src/components.ts',
emulator: { device: 'metaQuest3' },
ai: {},
}),
],
server: { host: '0.0.0.0', open: false },
});
Important behavior:
ai: {}opens the headed, Playwright-managed collaborate browser. Useai: { mode: 'agent' }only when explicitly requesting headless automation.- The managed browser is the browser surface. Keep Vite
server.openfalse so it does not create a second unmanaged tab. - HTTPS is on by default. IWSDK caches an untrusted certificate without installing a local CA. Managed Playwright accepts it automatically; a physical headset shows the expected certificate warning.
- Use
iwsdkDev({ https: false })only when HTTP is intentional. A customserver.httpscertificate takes precedence. - If agent tooling is not wanted but the managed editor is, use
workspace: { enabled: true }instead ofai. - Keep
assetManifestandcomponentManifestfree of system imports and side effects so the editor can load them in its own realm.
Remove obsolete generated-output ignore rules only after confirming nothing else creates those directories. Common stale paths are generated UIKit JSON, Meta Spatial GLXF output, and plugin-generated glTF folders.
Phase 4: Create shared manifests
Move the asset catalog into a dedicated module:
// src/assets.ts
import { AssetType, type AssetManifest } from '@iwsdk/core';
const assets = {
environment: {
name: 'Environment',
type: AssetType.GLTF,
url: '/models/environment.glb',
},
'settings-panel': {
name: 'Settings Panel',
type: AssetType.UIKitML,
url: '/ui/settings.uikitml',
},
} satisfies AssetManifest;
export default assets;
An asset manifest may also contain parentless procedural Object3D prototypes.
Do not place a prototype in the Three scene or parent it before registration.
Declare application components separately:
// src/components.ts
import { defineComponents } from '@iwsdk/core';
import { MyBehavior } from './components/my-behavior.js';
export default defineComponents([MyBehavior]);
Pass both exact exports to the runtime:
import { World } from '@iwsdk/core';
import assets from './assets.js';
import components from './components.js';
const world = await World.create(container, {
assets,
components,
level: './scenes/main.iwsdk.scene.json',
});
The same manifest modules must be configured in iwsdkDev(). Do not create a
second editor-only catalog.
Delete GLXF registry setup and field mappers. Native scene component objects store ordinary props keyed by the component id, and the shared component manifest supplies their schemas to both runtime and editor.
Phase 5: Replace GLXF or code-authored static layout
Create public/scenes/main.iwsdk.scene.json. A minimal asset-backed panel and
model look like this:
{
"version": "iwsdk.scene.v1",
"units": "meters",
"components": {},
"resources": {},
"nodes": [
{
"id": "environment",
"content": { "type": "asset", "asset": "environment" },
"transform": { "position": [0, 0, 0] },
"components": { "LocomotionEnvironment": {} }
},
{
"id": "settings-panel",
"content": { "type": "asset", "asset": "settings-panel" },
"transform": {
"position": [0, 1.5, -2],
"scale": 0.4
},
"components": {
"RayInteractable": {},
"ScreenSpace": {
"top": "20px",
"left": "20px",
"width": "25vw",
"height": "40vh"
}
}
}
]
}
Migration rules:
- Node
idis the stable runtime/editor identity. Preserve meaningful unique identifiers and use them from code; do not locate authored objects by array position or display name. - Scene asset references must resolve in
src/assets.ts. - Move static component values into the scene. Keep systems and event logic in code.
- Preserve hierarchy with
children. Use a nodeparentof typeplayer-spacefor content attached toplayer,camera,head, target-ray, or grip spaces. - Author the player origin under the top-level
player.transform. Tracked head/controller transforms are runtime-owned and overridden by XR tracking. - Use
visible: falsefor authored initial visibility. Visibility and Transform are intrinsic editor properties, not ordinary add-component UI. - Put fog, tone mapping, exposure, and shadow renderer settings under the scene
environmentobject. UseDomeGradient/DomeTexturefor the visible background andIBLGradient/IBLTexturefor image-based lighting. There is no separate AR background policy; immersive AR remains transparent. - Remove
render.defaultLighting. IWSDK no longer injects either environment component. Author both gradient components for the former default look, or omit either independently when the scene intentionally has no background or no image-based lighting. - Use IWSDK light components on scene nodes for authored ambient, hemisphere, directional, point, spot, or rect-area lights.
There is no supported 0.5 runtime path for .glxf. For a Meta Spatial/GLXF
project, use the old scene and screenshots as the visual reference, recreate
its static hierarchy in native scene JSON, then compare multiple editor and
runtime views before deleting legacy sources. If parity cannot be established,
stop and report that migration as incomplete.
Code-created dynamic entities can stay in code. It is valid to migrate the static shell first and leave gameplay spawning, effects, and variable-count objects in systems.
Phase 6: Migrate UIKitML
Move source UIKitML files into public/ui/ and delete the generated intermediate
JSON once no code references it. Change panel URLs from .json to .uikitml.
For editor-authored panels, prefer an AssetType.UIKitML manifest entry and an
asset-backed scene node, as shown above. PanelUI remains a compatibility path
for code-created panels, but it is hidden from generic editor authoring.
Remove maxWidth and maxHeight from PanelUI; 0.5 no longer performs a
second fit. The UIKitML document owns intrinsic dimensions and the entity
transform owns world scale. Give ScreenSpace explicit CSS dimensions rather
than relying on auto.
Replace spatial-UI kit configuration:
features: {
spatialUI: {
kit: 'horizon',
componentSets: [],
},
}
The default kit is horizon. UIKitML can load TTF fonts declared with
@font-face, including remote HTTPS URLs. Keep font loading CORS-compatible and
verify text after the document reports stable layout; do not add arbitrary
frame-count sleeps.
Locate and manipulate an authored panel by stable scene and element ids:
import { UIKitMLAsset } from '@iwsdk/core';
const panel = world.requireSceneObject<UIKitMLAsset>('settings-panel');
const saveButton = panel.requireElementById('save-button');
saveButton.addEventListener('click', onSave);
Do not traverse the entire Three scene looking for an anonymous
UIKitDocument, and do not key logic off generated JSON paths.
Phase 7: Resolve behavior-level compatibility
Audit these cases even when TypeScript compiles:
createTransformEntity()now gives every transform entity intrinsicVisibility. If old code addsVisibilityitself, change it to set the existing value or assignentity.object3D.visible.- Prefer
RayInteractableover the deprecatedInteractablealias. - Remove
xr.features.lightEstimation; IWSDK 0.5 no longer requests the unsupported feature. Replace its visual role with authored lights and IBL. - Immersive AR always hides authored dome/background visuals for passthrough while retaining IBL. Re-test any app that previously expected a virtual AR background.
AssetManager.getGLTF()returns a fresh clone by default. Use{ shared: true }only when shared mutable state is intentional.ScreenSpacewidth/height: 'auto'warns and falls back to viewport sizing. Author explicit dimensions and test browser resize plus XR exit.- If custom UIKitML components were passed through
kits, migrate them tocomponentSets; select the built-in collection withkit. - If systems stored references to startup-created objects, replace static
object plumbing with
world.getSceneObject,requireSceneObject,getSceneEntity, orrequireSceneEntityand stable node ids. - Preserve cleanup functions for signal/query subscriptions and DOM/UIKit
listeners.
World.destroy()is now available for hot reload, tests, and multi-world hosts.
Phase 8: Verify in increasing scope
Run the project's normal formatter, typecheck, tests, and production build. Then verify the actual app:
- Start the 0.5 dev server and wait for
npx iwsdk dev status --jsonto reportbrowserConnected: trueandbrowserCommandReady: true. - Validate and open every native scene. Fix missing manifest assets, components, entity references, and file paths.
- In Editor view, compare hierarchy, transforms, visibility, authored lights, panels, player-space children, and representative camera views with the pre-migration inventory.
- In Runtime view, test every interaction and inspect console logs. Browser screenshots are runtime-only by design.
- Enter and exit XR through both the application UI and the emulator/session controls. Confirm screen-space panels return after XR exit.
- Resize the desktop window and verify UIKit layout, clipping, fonts, rounded corners, and perceived scale.
- If a physical headset is available, open the reported HTTPS network URL, accept its self-signed-certificate warning, and enter XR.
- Run a production build from a clean install using the committed lockfile.
Do not regenerate IWSDK's library reference corpus as part of an application migration.
Completion report
Return a concise report containing:
- detected source and target versions;
- package additions/removals;
- old GLXF/Meta Spatial/UIKit generated artifacts retained or deleted;
- scene, asset, component, and UIKitML files migrated;
- behavior changes made for compatibility;
- exact automated and live tests run;
- any visual or physical-headset checks still requiring a human;
- any unresolved parity gap that prevents calling the migration complete.
Optional 0.5 modernization (not required for parity)
After migration is green, consider these additions separately: signal helpers
re-exported from @iwsdk/core, authored light components, raw XR frame/session
and hit-test helpers, World.destroy(), World.loadSceneDocument(), renderable
asset instantiation, player-space authoring, and managed scene review tools.
Do not mix these refactors into the compatibility pass unless the user asks.
More skills from the immersive-web-sdk repository
View all 9 skillsiwsdk-debug
debug continuous behavior in WebXR
Aug 3DebuggingImmersiveInteractionIWSDK +1iwsdk-depth-occlusion
implement depth sensing and occlusion in IWSDK
Jul 21ARIWSDKVRWebXRiwsdk-grab
grab and move objects in WebXR scenes
Aug 3ARImmersiveInteractionVR +1iwsdk-physics
implement physics in IWSDK projects
Aug 3ImmersiveInteractionIWSDKPhysics +1iwsdk-planner
plan IWSDK projects and architecture
Aug 3ArchitectureImmersiveIWSDKStrategy +1iwsdk-ray
implement ray-based interactions in WebXR
Aug 3ARImmersiveInteractionVR +1
More from Meta Open Source
View publisherrelay-best-practices
write idiomatic Relay code
relay
Apr 22EngineeringFrontendGraphQLReact +1relay-performance
optimize Relay application performance
relay
Jun 10FrontendGraphQLPerformanceReact +1add-shape-types-to-torch-model
annotate PyTorch models with tensor shapes
pyrefly
Jul 18Data ModelingDeep LearningPythonPyTorchcamera-streaming
configure camera streaming and photo capture
meta-wearables-dat-ios
May 15CameraHardwareiOSVideodat-conventions
develop iOS applications with DAT SDK
meta-wearables-dat-ios
May 15iOSMobileSDKSwiftdebugging
debug wearable device software
meta-wearables-dat-ios
May 15DebuggingEngineeringiOS