diff --git a/src/examples/DynamicAuthoring.tsx b/src/examples/DynamicAuthoring.tsx
new file mode 100644
index 0000000..e5c3f0d
--- /dev/null
+++ b/src/examples/DynamicAuthoring.tsx
@@ -0,0 +1,86 @@
+import {
+ Entity,
+ Layers,
+ QueryReactor,
+ UUIDComponent,
+ getAuthoringCounterpart,
+ loadEntitiesIntoAuthoring,
+ unloadEntitiesFromAuthoring,
+ useQuery
+} from '@ir-engine/ecs'
+import { AuthoringState } from '@ir-engine/engine/src/authoring/AuthoringState'
+import { GLTFComponent } from '@ir-engine/engine/src/gltf/GLTFComponent'
+import { getState } from '@ir-engine/hyperflux'
+import Button from '@ir-engine/ui/src/primitives/tailwind/Button'
+import React, { useCallback } from 'react'
+
+export default function DynamicAuthoring() {
+ // invoke authoring state
+ getState(AuthoringState)
+
+ return (
+ <>
+
+
+
+ >
+ )
+}
+
+const SourceLoaded = (props: { entity: Entity }) => {
+ const loaded = GLTFComponent.useSceneLoaded(props.entity)
+ if (!loaded) return null
+ return
+}
+
+/**
+ * Contains a button and name of the entity to select and edit it.
+ */
+const SelectEditReactor = (props: { entity: Entity }) => {
+ const { entity } = props
+ const isInAuthoring = !!getAuthoringCounterpart(entity)
+
+ useQuery([UUIDComponent], Layers.Authoring) // trigger rerender
+
+ // Handle loading entity into authoring
+ const handleLoadIntoAuthoring = useCallback(() => {
+ try {
+ const source = GLTFComponent.getSourceID(entity)
+ const entities = UUIDComponent.getEntitiesBySource(source, Layers.Simulation)
+ loadEntitiesIntoAuthoring([entity, ...entities])
+ console.log('Loaded entities into authoring:', [entity, ...entities])
+ } catch (error) {
+ console.error('Failed to load entity into authoring:', error)
+ }
+ }, [])
+
+ // Handle unloading entity from authoring
+ const handleUnloadFromAuthoring = useCallback(() => {
+ try {
+ const authoringEntity = getAuthoringCounterpart(entity)
+ const source = GLTFComponent.getSourceID(authoringEntity)
+ const entities = UUIDComponent.getEntitiesBySource(source, Layers.Authoring)
+ unloadEntitiesFromAuthoring([authoringEntity, ...entities])
+ console.log('Unloaded entities from authoring:', [authoringEntity, ...entities])
+ } catch (error) {
+ console.error('Failed to unload entity from authoring:', error)
+ }
+ }, [])
+
+ return (
+
+
Entity ID: {entity}
+
+ {isInAuthoring ? (
+
+ ) : (
+
+ )}
+
+
+ )
+}
diff --git a/src/examplesRoute.tsx b/src/examplesRoute.tsx
index f936fe8..566a37e 100644
--- a/src/examplesRoute.tsx
+++ b/src/examplesRoute.tsx
@@ -2,6 +2,7 @@ import React from 'react'
import '@ir-engine/client/src/engine'
+import DynamicAuthoring from './examples/DynamicAuthoring'
import { gltfRoutes } from './examples/GLTFs'
import InstanceConnection from './examples/InstanceConnection'
import InstancedLODs from './examples/InstancedLODs'
@@ -117,6 +118,12 @@ export const examples: RouteCategories = [
name: 'Multiple Canvases with different cameras',
description: 'View the same scene from different cameras',
entry: MultipleCanvasCameras
+ },
+ {
+ name: 'Dynamic Authoring',
+ description: 'Allows you to use editor APIs to edit entities at runtime',
+ sceneKey: 'projects/ir-engine/default-project/public/scenes/apartment.gltf',
+ entry: DynamicAuthoring
}
]
},