diff --git a/components/content/simple-editor/ContainElement.vue b/components/content/simple-editor/ContainElement.vue
new file mode 100644
index 0000000..aae601f
--- /dev/null
+++ b/components/content/simple-editor/ContainElement.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useElementSize, useParentElement } from '@vueuse/core'
+
+const props = defineProps({
+  enabled: { type: Boolean, default: true },
+  aspectRatio: { type: Number, required: true },
+})
+
+const containerRef = ref<HTMLElement | null>(null)
+const parentElementRef = useParentElement()
+
+const { width, height } = useElementSize(parentElementRef)
+
+const containerAspectRatio = computed(() => width.value / height.value)
+
+const isLandscape = computed(() => props.aspectRatio < containerAspectRatio.value)
+const containedWidth = computed(() => isLandscape.value ? height.value * props.aspectRatio : width.value)
+const containedHeight = computed(() => isLandscape.value ? height.value : width.value / props.aspectRatio)
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="absolute"
+    :style="{
+      width: `${enabled ? containedWidth : width}px`,
+      height: `${enabled ? containedHeight : height}px`,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
diff --git a/components/content/simple-editor/CustomTresOrbitControls.vue b/components/content/simple-editor/CustomTresOrbitControls.vue
new file mode 100644
index 0000000..8ac746b
--- /dev/null
+++ b/components/content/simple-editor/CustomTresOrbitControls.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { extend, useTresContext } from '@tresjs/core'
+import { OrbitControls } from 'three-stdlib'
+
+const props = defineProps({
+  enabled: {
+    type: Boolean,
+    default: true,
+  },
+  camera: {
+    type: Object,
+  },
+})
+
+const { camera: contextCamera, renderer } = useTresContext()
+
+const orbitControlsRef = ref()
+
+const internalCamera = computed(() => props.camera ?? contextCamera.value)
+
+extend({ OrbitControls })
+
+defineExpose({ value: orbitControlsRef })
+</script>
+
+<template>
+  <TresOrbitControls
+    v-if="renderer"
+    :key="internalCamera?.uuid"
+    ref="orbitControlsRef"
+    :args="[internalCamera, renderer?.domElement]"
+    :camera="internalCamera"
+    :enabled="enabled"
+  />
+</template>
diff --git a/components/content/simple-editor/SceneNodeBox.vue b/components/content/simple-editor/SceneNodeBox.vue
new file mode 100644
index 0000000..2e25cb0
--- /dev/null
+++ b/components/content/simple-editor/SceneNodeBox.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { type Mesh, Color, MathUtils } from 'three'
+import type { BoxSceneNode } from './types'
+
+const props = defineProps({
+  properties: { 
+    type: Object as PropType<BoxSceneNode['properties']>, 
+    default: () => ({ width: 10, height: 10, length: 10 }), 
+  },
+  first: { type: Boolean, default: false },
+})
+
+// weird bug happening if we don't explicitly emit click instead of letting it flow through
+const emit = defineEmits(['click'])
+
+const { properties } = toRefs(props)
+
+const randomColor = new Color(MathUtils.randInt(0, 0xffffff))
+const color = computed(() => props.first ? new Color('#535353') : randomColor)
+
+const meshRef = ref<Mesh | null>()
+
+defineExpose({ mesh: meshRef })
+</script>
+
+<template>
+  <TresMesh
+    ref="meshRef"
+    @click="emit('click')"
+  >
+    <TresBoxGeometry
+      :args="[properties.width, properties.height, properties.length]"
+    />
+    <TresMeshBasicMaterial :color="color" />
+  </TresMesh>
+</template>
diff --git a/components/content/simple-editor/SceneNodeBoxProps.vue b/components/content/simple-editor/SceneNodeBoxProps.vue
new file mode 100644
index 0000000..2b15380
--- /dev/null
+++ b/components/content/simple-editor/SceneNodeBoxProps.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { BoxSceneNode } from './types'
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<BoxSceneNode>,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { modelValue } = toRefs(props)
+const internalModelValue = ref<BoxSceneNode>(structuredClone(toRaw(modelValue.value)))
+watch(modelValue, () => {
+  internalModelValue.value = structuredClone(toRaw(modelValue.value))
+})
+function handleModelValueUpdate() {
+  emit('update:modelValue', structuredClone(toRaw(internalModelValue.value)))
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-[auto_auto] gap-1">
+    Width:
+    <input
+      v-model="internalModelValue.properties.width"
+      class="dark:text-black"
+      @update:model-value="handleModelValueUpdate"
+    > 
+    Length:
+    <input
+      v-model="internalModelValue.properties.length"
+      class="dark:text-black"
+      @update:model-value="handleModelValueUpdate"
+    >
+    Height:
+    <input
+      v-model="internalModelValue.properties.height"
+      class="dark:text-black"
+      @update:model-value="handleModelValueUpdate"
+    >
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/content/simple-editor/SceneNodeCameraProps.vue b/components/content/simple-editor/SceneNodeCameraProps.vue
new file mode 100644
index 0000000..7b988f9
--- /dev/null
+++ b/components/content/simple-editor/SceneNodeCameraProps.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { CameraSceneNode } from './types'
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<CameraSceneNode>,
+    required: true,
+    validation: (val: CameraSceneNode) => val.type === 'camera',
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { modelValue } = toRefs(props)
+const internalModelValue = ref<CameraSceneNode>(structuredClone(toRaw(modelValue.value)))
+watch(modelValue, () => {
+  internalModelValue.value = structuredClone(toRaw(modelValue.value))
+})
+function handleModelValueUpdate() {
+  emit('update:modelValue', structuredClone(toRaw(internalModelValue.value)))
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-[auto_auto] gap-1">
+    Fov: <input
+      v-model="internalModelValue.properties.fov"
+      class="dark:text-black"
+      @update:model-value="handleModelValueUpdate"
+    >
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/content/simple-editor/SceneNodeCone.vue b/components/content/simple-editor/SceneNodeCone.vue
new file mode 100644
index 0000000..7d38cc6
--- /dev/null
+++ b/components/content/simple-editor/SceneNodeCone.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { type Object3D, Color, MathUtils } from 'three'
+import type { ConeSceneNode } from './types'
+
+const props = defineProps({
+  properties: { 
+    type: Object as PropType<ConeSceneNode['properties']>, 
+    default: () => ({ radius: 5, height: 10 }), 
+  },
+  first: { type: Boolean, default: false },
+})
+
+// weird bug happening if we don't explicitly emit click instead of letting it flow through
+const emit = defineEmits(['click'])
+
+const { properties } = toRefs(props)
+
+const randomColor = new Color(MathUtils.randInt(0, 0xffffff))
+const color = computed(() => props.first ? new Color('#82dbc5') : randomColor)
+
+const meshRef = ref<Object3D | null>()
+
+defineExpose({ mesh: meshRef })
+</script>
+
+<template>
+  <TresMesh
+    ref="meshRef"
+    @click="emit('click')"
+  >
+    <TresConeGeometry
+      :args="[properties.radius, properties.height, 32, 16]"
+    />
+    <TresMeshBasicMaterial :color="color" />
+  </TresMesh>
+</template>
diff --git a/components/content/simple-editor/SceneNodeConeProps.vue b/components/content/simple-editor/SceneNodeConeProps.vue
new file mode 100644
index 0000000..fdd1eed
--- /dev/null
+++ b/components/content/simple-editor/SceneNodeConeProps.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { ConeSceneNode } from './types'
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<ConeSceneNode>,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { modelValue } = toRefs(props)
+const internalModelValue = ref<ConeSceneNode>(structuredClone(toRaw(modelValue.value)))
+watch(modelValue, () => {
+  internalModelValue.value = structuredClone(toRaw(modelValue.value))
+})
+function handleModelValueUpdate() {
+  emit('update:modelValue', structuredClone(toRaw(internalModelValue.value)))
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-[auto_auto] gap-1">
+    Radius: <input
+      v-model="internalModelValue.properties.radius"
+      class="dark:text-black"
+      @update:model-value="handleModelValueUpdate"
+    >
+    Height: <input
+      v-model="internalModelValue.properties.height"
+      class="dark:text-black"
+      @update:model-value="handleModelValueUpdate"
+    >
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/content/simple-editor/SceneNodeProps.vue b/components/content/simple-editor/SceneNodeProps.vue
new file mode 100644
index 0000000..cf71781
--- /dev/null
+++ b/components/content/simple-editor/SceneNodeProps.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { SceneNode } from './types'
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<SceneNode>,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { modelValue } = toRefs(props)
+const internalModelValue = ref<SceneNode>(structuredClone(toRaw(modelValue.value)))
+watch(modelValue, () => {
+  internalModelValue.value = structuredClone(toRaw(modelValue.value))
+}, { deep: true })
+function handleModelValueUpdate() {
+  emit('update:modelValue', structuredClone(toRaw(internalModelValue.value)))
+}
+</script>
+
+<template>
+  <div>
+    Position:
+    <div class="grid grid-cols-[auto_auto] gap-1">
+      x: <input
+        v-model.number="internalModelValue.position[0]"
+        class="dark:text-black"
+        @update:model-value="handleModelValueUpdate"
+      >
+      y: <input
+        v-model.number="internalModelValue.position[1]"
+        class="dark:text-black"
+        @update:model-value="handleModelValueUpdate"
+      >
+      z: <input
+        v-model.number="internalModelValue.position[2]"
+        class="dark:text-black"
+        @update:model-value="handleModelValueUpdate"
+      >
+    </div>
+  </div>
+  <div>
+    Rotation:
+    <div class="grid grid-cols-[auto_auto] gap-1">
+      x: <input
+        v-model.number="internalModelValue.rotation[0]"
+        class="dark:text-black"
+        @update:model-value="handleModelValueUpdate"
+      >
+      y: <input
+        v-model.number="internalModelValue.rotation[1]"
+        class="dark:text-black"
+        @update:model-value="handleModelValueUpdate"
+      >
+      z: <input
+        v-model.number="internalModelValue.rotation[2]"
+        class="dark:text-black"
+        @update:model-value="handleModelValueUpdate"
+      >
+    </div>
+  </div>
+  <div>
+    Scale:
+    <div class="grid grid-cols-[auto_auto] gap-1">
+      x: <input
+        v-model.number="internalModelValue.scale[0]"
+        class="dark:text-black"
+        @update:model-value="handleModelValueUpdate"
+      >
+      y: <input
+        v-model.number="internalModelValue.scale[1]"
+        class="dark:text-black"
+        @update:model-value="handleModelValueUpdate"
+      >
+      z: <input
+        v-model.number="internalModelValue.scale[2]"
+        class="dark:text-black"
+        @update:model-value="handleModelValueUpdate"
+      >
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/content/simple-editor/SceneNodeSphere.vue b/components/content/simple-editor/SceneNodeSphere.vue
new file mode 100644
index 0000000..0177027
--- /dev/null
+++ b/components/content/simple-editor/SceneNodeSphere.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { type Object3D, Color, MathUtils } from 'three'
+import type { SphereSceneNode } from './types'
+
+const props = defineProps({
+  properties: { 
+    type: Object as PropType<SphereSceneNode['properties']>,
+    default: () => ({ radius: 5 }), 
+  },
+  first: { type: Boolean, default: false },
+})
+
+// weird bug happening if we don't explicitly emit click instead of letting it flow through
+const emit = defineEmits(['click'])
+
+const { properties } = toRefs(props)
+
+const randomColor = new Color(MathUtils.randInt(0, 0xffffff))
+const color = computed(() => props.first ? new Color('#efac35') : randomColor)
+
+const meshRef = ref<Object3D | null>()
+
+defineExpose({ mesh: meshRef })
+</script>
+
+<template>
+  <TresMesh
+    ref="meshRef"
+    @click="emit('click')"
+  >
+    <TresSphereGeometry
+      :args="[properties.radius, 32, 16]"
+    />
+    <TresMeshBasicMaterial :color="color" />
+  </TresMesh>
+</template>
diff --git a/components/content/simple-editor/SceneNodeSphereProps.vue b/components/content/simple-editor/SceneNodeSphereProps.vue
new file mode 100644
index 0000000..cfd9c02
--- /dev/null
+++ b/components/content/simple-editor/SceneNodeSphereProps.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { SphereSceneNode } from './types'
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<SphereSceneNode>,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { modelValue } = toRefs(props)
+const internalModelValue = ref<SphereSceneNode>(structuredClone(toRaw(modelValue.value)))
+watch(modelValue, () => {
+  internalModelValue.value = structuredClone(toRaw(modelValue.value))
+})
+function handleModelValueUpdate() {
+  emit('update:modelValue', structuredClone(toRaw(internalModelValue.value)))
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-[auto_auto] gap-1">
+    Radius: <input
+      v-model="internalModelValue.properties.radius"
+      class="dark:text-black"
+      @update:model-value="handleModelValueUpdate"
+    >
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/content/simple-editor/SceneSettingsProps.vue b/components/content/simple-editor/SceneSettingsProps.vue
new file mode 100644
index 0000000..93d8326
--- /dev/null
+++ b/components/content/simple-editor/SceneSettingsProps.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { SceneSettings } from './types'
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<SceneSettings>,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { modelValue } = toRefs(props)
+const internalModelValue = ref<SceneSettings>(structuredClone(toRaw(modelValue.value)))
+watch(modelValue, () => {
+  internalModelValue.value = structuredClone(toRaw(modelValue.value))
+})
+function handleModelValueUpdate() {
+  emit('update:modelValue', structuredClone(toRaw(internalModelValue.value)))
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-[auto_auto] gap-1">
+    Width: <input
+      v-model="internalModelValue.width"
+      class="dark:text-black"
+      @update:model-value="handleModelValueUpdate"
+    >
+    Height: <input
+      v-model="internalModelValue.height"
+      class="dark:text-black"
+      @update:model-value="handleModelValueUpdate"
+    >
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/content/simple-editor/index.vue b/components/content/simple-editor/index.vue
new file mode 100644
index 0000000..0642115
--- /dev/null
+++ b/components/content/simple-editor/index.vue
@@ -0,0 +1,440 @@
+<script setup lang="ts">
+import { type Object3D } from 'three'
+import { TresCanvas } from '@tresjs/core'
+import { TransformControls } from '@tresjs/cientos'
+import { useElementSize, useRefHistory, useDark } from '@vueuse/core'
+
+import type { BoxSceneNode, CameraSceneNode, ConeSceneNode, SceneSettings, SphereSceneNode } from './types'
+
+interface State { 
+  sceneSettings: SceneSettings
+  sceneNodes: (CameraSceneNode | BoxSceneNode | SphereSceneNode | ConeSceneNode)[] 
+}
+const state = ref<State>({ sceneSettings: { width: 800, height: 600 }, sceneNodes: [
+  {
+    id: crypto.randomUUID(),
+    type: 'camera',
+    properties: {
+      fov: 40,
+    },
+    position: [ 0, 5, 50 ],
+    rotation: [ 0, 0, 0 ],
+    scale: [ 1, 1, 1 ],
+  },
+] })
+const history = useRefHistory(state, { deep: true })
+history.clear()
+
+const isDark = useDark()
+
+const currentCameraName = ref('nav')
+const currentCamera = computed(() => ({ render: renderCamRef, nav: navCamRef }[currentCameraName.value]?.value))
+
+const selectedNodeId = ref<string | null>()
+watch(selectedNodeId, () => {
+}, { immediate: true })
+const selectedNode = computed(() => state.value.sceneNodes.find(i => i.id === selectedNodeId.value))
+const cameraNode = computed(() => state.value.sceneNodes.find(i => i.type === 'camera') as CameraSceneNode)
+
+type Mode = 'translate' | 'rotate' | 'scale'
+const currentMode = ref<Mode>('translate')
+const modes: Mode[] = ['translate', 'rotate', 'scale']
+
+type Space = 'world' | 'local'
+const currentSpace = ref<Space>('world')
+const spaces: Space[] = ['world', 'local']
+
+//#region TresJS
+const tresCanvasRef = shallowRef()
+const renderCamRef = shallowRef()
+const navCamRef = shallowRef()
+const cameraHelperRef = shallowRef()
+const canvasContainerRef = shallowRef()
+const sceneNodeRefs = ref<{ [sceneNodeId: string]: Object3D }>({})
+
+// Set cameras to manual during initialization. This runs only once as soon as refs are not null
+const setCamerasManualWatcher = watchEffect(() => {
+  if (renderCamRef.value != null && navCamRef.value != null) {
+    renderCamRef.value.manual = false
+    navCamRef.value.manual = false
+    setCamerasManualWatcher()
+  }
+})
+
+// When switching current camera set it in the tres context
+watchEffect(() => {
+  if (tresCanvasRef.value?.context != null && currentCamera.value != null) {
+    const { setCameraActive } = tresCanvasRef.value.context
+    setCameraActive(currentCamera.value)
+  }
+})
+
+// when render cam is active, update manually what is required. CameraHelper has to be manually update when aspect/fov changes
+watchEffect(() => {
+  if (renderCamRef.value != null) {
+    renderCamRef.value.aspect = state.value.sceneSettings.width / state.value.sceneSettings.height
+    renderCamRef.value.fov = cameraNode.value?.properties?.fov ?? 40
+    renderCamRef.value.updateProjectionMatrix()
+  }
+  if (cameraHelperRef.value != null) {
+    cameraHelperRef.value.update()
+  }
+})
+
+// when nav cam is active, update manually what is required
+const canvasContainerSize = useElementSize(canvasContainerRef)
+watchEffect(() => {
+  if (navCamRef.value != null) {
+    navCamRef.value.aspect = canvasContainerSize.width.value / canvasContainerSize.height.value
+    navCamRef.value.updateProjectionMatrix()
+  }
+})
+
+const transformControlFocused = ref(false)
+const orbitEnabled = computed(() => !transformControlFocused.value && currentCameraName.value === 'nav')
+//#endregion
+
+function addConeSceneNode() {
+  const newSceneNode: ConeSceneNode = {
+    id: crypto.randomUUID(),
+    type: 'cone',
+    properties: {
+      radius: 5,
+      height: 10,
+    },
+    position: [0, 0, 0],
+    rotation: [0, 0, 0],
+    scale: [1, 1, 1],
+  }
+
+  state.value.sceneNodes.push(newSceneNode)
+  selectSceneNode(newSceneNode.id)
+}
+
+function addBoxSceneNode() {
+  const newSceneNode: BoxSceneNode = {
+    id: crypto.randomUUID(),
+    type: 'box',
+    properties: {
+      width: 10,
+      height: 10,
+      length: 10,
+    },
+    position: [0, 0, 0],
+    rotation: [0, 0, 0],
+    scale: [1, 1, 1],
+  }
+
+  state.value.sceneNodes.push(newSceneNode)
+  selectSceneNode(newSceneNode.id)
+}
+
+function addSphereSceneNode() {
+  const newSceneNode: SphereSceneNode = {
+    id: crypto.randomUUID(),
+    type: 'sphere',
+    properties: {
+      radius: 5,
+    },
+    position: [0, 0, 0],
+    rotation: [0, 0, 0],
+    scale: [1, 1, 1],
+  }
+
+  state.value.sceneNodes.push(newSceneNode)
+  selectSceneNode(newSceneNode.id)
+}
+
+function selectSceneNode(sceneNodeId: string) {
+  selectedNodeId.value = sceneNodeId
+}
+
+function handleTransformChange(sceneNodeId: string, object: Object3D) {
+  const sceneNode = state.value.sceneNodes.find(i => i.id === sceneNodeId)
+  if (sceneNode != null) {
+    sceneNode.position = [object.position.x, object.position.y, object.position.z]
+    sceneNode.rotation = [object.rotation.x, object.rotation.y, object.rotation.z]
+    sceneNode.scale = [object.scale.x, object.scale.y, object.scale.z]
+  }
+}
+
+function handleDeleteSceneNode(sceneNodeId: string) {
+  if (selectedNodeId.value === sceneNodeId) {
+    selectedNodeId.value = null
+  }
+  state.value.sceneNodes.splice(
+    state.value.sceneNodes.findIndex(i => i.id === sceneNodeId),
+    1,
+  )
+}
+</script>
+
+<template>
+  <div class="flex w-full inset-0 h-full light">
+    <div class="flex flex-col gap-2 bg-gray-200 dark:bg-gray-800 p-2 min-w-[140px]">
+      <div>
+        Scene Explorer:
+      </div>
+      <div class="flex flex-col items-center justify-center gap-2">
+        <button
+          class="dark:bg-gray-600"
+          @click="addConeSceneNode"
+        >
+          Add Cone
+        </button>
+
+        <button
+          class="dark:bg-gray-600"
+          @click="addBoxSceneNode"
+        >
+          Add Box
+        </button>
+        
+        <button
+          class="dark:bg-gray-600"
+          @click="addSphereSceneNode"
+        >
+          Add Sphere
+        </button>
+      </div>
+      <div class="flex flex-col flex-grow gap-2">
+        <div
+          v-for="sceneNode in state.sceneNodes"
+          :key="sceneNode.id"
+          class="flex justify-between"
+          :class="{ 'ring-2 ring-blue-400': sceneNode.id === selectedNodeId }"
+        >
+          <div @click="selectSceneNode(sceneNode.id) ">
+            {{ sceneNode.type }} 
+          </div>
+          <div
+            v-if="sceneNode.type !== 'camera'"
+            @click="handleDeleteSceneNode(sceneNode.id)"
+          >
+            x
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex flex-col flex-grow"
+    >
+      <div class="flex gap-2 border border-b-0 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-500 p-1">
+        <div class="flex gap-1">
+          <button
+            v-for="mode in modes"
+            :key="mode"
+            class="dark:bg-gray-600"
+            :class="{ 'ring-2 ring-blue-400': currentMode === mode }"
+            @click="currentMode = mode"
+          >
+            {{ mode }}
+          </button>
+        </div>
+        |
+        <div class="flex gap-1">
+          <button
+            class="dark:bg-gray-600"
+            :disabled="!history.canUndo"
+            @click="history.undo"
+          >
+            Undo
+          </button>
+          <button
+            class="dark:bg-gray-600"
+            :disabled="!history.canRedo"
+            @click="history.redo"
+          >
+            Redo
+          </button>
+        </div>
+        |
+        <div class="flex gap-1">
+          <button
+            v-for="space in spaces"
+            :key="space"
+            class="dark:bg-gray-600"
+            :class="{ 'ring-2 ring-blue-400': currentSpace === space }"
+            @click="currentSpace = space"
+          >
+            {{ space }}
+          </button>
+        </div>
+        |
+        <div class="flex gap-1">
+          <button
+            v-for="cameraName in ['render', 'nav']"
+            :key="cameraName"
+            class="dark:bg-gray-600"
+            :class="{ 'ring-2 ring-blue-400': currentCameraName === cameraName }"
+            @click="currentCameraName = cameraName"
+          >
+            {{ cameraName }}
+          </button>
+        </div>
+      </div>
+      <div
+        class="flex flex-grow items-center justify-center border border-slate-200 dark:border-gray-700"
+      >
+        <ContainElement
+          :enabled="currentCameraName === 'render'"
+          :aspect-ratio="state.sceneSettings.width / state.sceneSettings.height"
+          class="border border-slate-400"
+        >
+          <div
+            ref="canvasContainerRef"
+            class="h-full w-full"
+          >
+            <TresCanvas
+              v-if=" cameraNode != null"
+              ref="tresCanvasRef"
+              :clear-color="isDark ? '#252526' : '#FAFAFA'"
+            >
+              <TresPerspectiveCamera
+                :ref="
+                  (el) => {
+                    renderCamRef = el;
+                    sceneNodeRefs[cameraNode.id] = (el as unknown as Object3D);
+                  }
+                "
+                name="render"
+                :position="cameraNode.position"
+                :rotation="cameraNode.rotation"
+              />
+              <TresPerspectiveCamera
+                ref="navCamRef"
+                name="nav"
+                :position="[50, 50, 50]"
+                :far="3000"
+              />
+
+              <TresCameraHelper
+                v-if="navCamRef != null && renderCamRef != null"
+                ref="cameraHelperRef"
+                :visible="currentCameraName === 'nav'"
+                :args="[renderCamRef]"
+              />
+
+              <!-- TODO: couldn't get cientos orbit control to disable -->
+              <CustomTresOrbitControls
+                :enabled="orbitEnabled"
+                :camera="navCamRef"
+              />
+
+              <SceneNodeCone
+                v-for="sceneNode in state.sceneNodes.filter((i) => i.type === 'cone')"
+                :key="sceneNode.id"    
+                :ref="
+                  (el: any) => {
+                    sceneNodeRefs[sceneNode.id] = el?.mesh ;
+                  }
+                "
+                :position="sceneNode.position"
+                :rotation="sceneNode.rotation"
+                :scale="sceneNode.scale"
+                :properties="(sceneNode as ConeSceneNode).properties"
+                :first="state.sceneNodes.filter(i => i.type === 'cone')[0] === sceneNode"
+                @click="selectSceneNode(sceneNode.id)"
+              />
+
+              <SceneNodeBox
+                v-for="sceneNode in state.sceneNodes.filter((i) => i.type === 'box')"
+                :key="sceneNode.id"    
+                :ref="
+                  (el: any) => {
+                    sceneNodeRefs[sceneNode.id] = el?.mesh ;
+                  }
+                "
+                :position="sceneNode.position"
+                :rotation="sceneNode.rotation"
+                :scale="sceneNode.scale"
+                :properties="(sceneNode as BoxSceneNode).properties"
+                :first="state.sceneNodes.filter(i => i.type === 'box')[0] === sceneNode"
+                @click="selectSceneNode(sceneNode.id)"
+              />
+
+              <SceneNodeSphere
+                v-for="sceneNode in state.sceneNodes.filter((i) => i.type === 'sphere')"
+                :key="sceneNode.id"    
+                :ref="
+                  (el: any) => {
+                    sceneNodeRefs[sceneNode.id] = el?.mesh;
+                  }
+                "
+                :position="sceneNode.position"
+                :rotation="sceneNode.rotation"
+                :scale="sceneNode.scale"
+                :properties="(sceneNode as SphereSceneNode).properties"
+                :first="state.sceneNodes.filter(i => i.type === 'sphere')[0] === sceneNode"
+                @click="selectSceneNode(sceneNode.id)"
+              />
+
+              <TransformControls
+                v-if="selectedNodeId != null"
+                :key="currentCameraName"
+                :object="sceneNodeRefs[selectedNodeId!]"
+                :mode="currentMode"
+                :space="currentSpace"
+                @mouse-down="
+                  transformControlFocused = true;
+                  history.pause();
+                "
+                @mouse-up="
+                  transformControlFocused = false;
+                  history.resume(true);
+                "
+                @object-change="handleTransformChange(selectedNodeId!, sceneNodeRefs[selectedNodeId!])"
+              />
+              <TresGridHelper :args="[100, 10, '#44403C', '#E4E4E7']" />
+            </TresCanvas>
+          </div>
+        </ContainElement>
+      </div>
+    </div>
+    <div
+      class="flex flex-col bg-gray-200 dark:bg-gray-800 p-2 gap-2"
+    >
+      <div>
+        <b>
+          Scene Settings
+        </b>
+        <SceneSettingsProps v-model="state.sceneSettings" />
+      </div>
+      <div
+        v-if="selectedNode != null"
+        class="flex flex-col gap-2 "
+      >
+        <b>
+          Scene Node Properties
+        </b>
+        <SceneNodeProps
+          
+          :model-value="selectedNode"
+          @update:model-value="selectedNode!.position = $event.position; 
+                               selectedNode!.rotation = $event.rotation; 
+                               selectedNode!.scale = $event.scale"
+        />
+        <SceneNodeCameraProps
+          v-if="selectedNode.type === 'camera'"
+          :model-value="selectedNode"
+          @update:model-value="selectedNode!.properties = $event.properties"
+        />
+        <SceneNodeConeProps
+          v-if="selectedNode.type === 'cone'"
+          :model-value="selectedNode"
+          @update:model-value="selectedNode!.properties = $event.properties"
+        />
+        <SceneNodeBoxProps
+          v-if="selectedNode.type === 'box'"
+          :model-value="selectedNode"
+          @update:model-value="selectedNode!.properties = $event.properties"
+        />
+        <SceneNodeSphereProps
+          v-if="selectedNode.type === 'sphere'"
+          :model-value="selectedNode"
+          @update:model-value="selectedNode!.properties = $event.properties"
+        />
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/content/simple-editor/types.ts b/components/content/simple-editor/types.ts
new file mode 100644
index 0000000..ba75f27
--- /dev/null
+++ b/components/content/simple-editor/types.ts
@@ -0,0 +1,43 @@
+export interface SceneSettings {
+  width: number
+  height: number
+}
+  
+export interface SceneNode {
+  id: string
+  type: 'camera' | 'box' | 'sphere' | 'cone'
+  position: [number, number, number]
+  rotation: [number, number, number]
+  scale: [number, number, number]
+}
+  
+export interface CameraSceneNode extends SceneNode {
+  type: 'camera'
+  properties: {
+    fov: number
+  }
+}
+  
+export interface BoxSceneNode extends SceneNode {
+  type: 'box'
+  properties: {
+    width: number
+    height: number
+    length: number
+  }
+}
+  
+export interface SphereSceneNode extends SceneNode {
+  type: 'sphere'
+  properties: {
+    radius: number
+  }
+}
+
+export interface ConeSceneNode extends SceneNode {
+  type: 'cone'
+  properties: {
+    radius: number
+    height: number
+  }
+}
\ No newline at end of file
diff --git a/content/authors/franciscohermida.md b/content/authors/franciscohermida.md
new file mode 100644
index 0000000..7c24f7b
--- /dev/null
+++ b/content/authors/franciscohermida.md
@@ -0,0 +1,7 @@
+---
+name: Francisco Hermida
+slug: franciscohermida
+twitter: chicohermida
+github: franciscohermida
+avatar: https://avatars.githubusercontent.com/u/483242?v=4
+---
diff --git a/content/experiments/simple-editor.md b/content/experiments/simple-editor.md
new file mode 100644
index 0000000..0748694
--- /dev/null
+++ b/content/experiments/simple-editor.md
@@ -0,0 +1,12 @@
+---
+thumbnail: /simple-editor.png
+title: Simple Editor
+slug: simple-editor
+author: franciscohermida
+status: published
+description: Simple starting point on how to structure an TresJS Editor
+tags: ['controls']
+---
+
+::simple-editor
+::
\ No newline at end of file
diff --git a/public/simple-editor.png b/public/simple-editor.png
new file mode 100644
index 0000000..c6fa21c
Binary files /dev/null and b/public/simple-editor.png differ