diff --git a/packages/applet/src/components/state/ChildStateViewer.vue b/packages/applet/src/components/state/ChildStateViewer.vue
index db983d47..9e46718b 100644
--- a/packages/applet/src/components/state/ChildStateViewer.vue
+++ b/packages/applet/src/components/state/ChildStateViewer.vue
@@ -6,8 +6,10 @@ withDefaults(defineProps<{
   data: CustomInspectorState[]
   depth: number
   index: string
+  expandedStateId?: string
 }>(), {
   depth: 0,
+  expandedStateId: '',
 })
 </script>
 
@@ -17,7 +19,7 @@ withDefaults(defineProps<{
       v-for="(item, i) in data"
       :key="i"
     >
-      <StateFieldViewer :data="item" :depth="depth + 1" :index="`${index}-${i}`" />
+      <StateFieldViewer :data="item" :depth="depth + 1" :index="`${index}-${i}`" :expanded-state-id="expandedStateId" />
     </div>
   </div>
 </template>
diff --git a/packages/applet/src/components/state/RootStateViewer.vue b/packages/applet/src/components/state/RootStateViewer.vue
index 456e9dd3..cc266974 100644
--- a/packages/applet/src/components/state/RootStateViewer.vue
+++ b/packages/applet/src/components/state/RootStateViewer.vue
@@ -57,7 +57,7 @@ const { expanded, toggleExpanded } = useToggleExpanded(props.expandedStateId)
       <div
         v-if="item?.length && expanded.includes(`${index}`)"
       >
-        <ChildStateViewer :data="item" :index="`${index}`" />
+        <ChildStateViewer :data="item" :index="`${index}`" :expanded-state-id="expandedStateId" />
       </div>
     </div>
   </div>
diff --git a/packages/applet/src/components/state/StateFieldEditor.vue b/packages/applet/src/components/state/StateFieldEditor.vue
index 47cf85dd..62f80799 100644
--- a/packages/applet/src/components/state/StateFieldEditor.vue
+++ b/packages/applet/src/components/state/StateFieldEditor.vue
@@ -44,8 +44,8 @@ const buttonClass = computed(() => ({
   'opacity-0': !props.hovering,
 }))
 
-function quickEdit(v: unknown, remove: boolean = false) {
-  rpc.value.editInspectorState({
+async function quickEdit(v: unknown, remove: boolean = false) {
+  await rpc.value.editInspectorState({
     path: props.data.path || [props.data.key],
     inspectorId: state.value.inspectorId,
     type: props.data.stateType!,
@@ -57,6 +57,7 @@ function quickEdit(v: unknown, remove: boolean = false) {
       remove,
     },
   } as unknown as DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE])
+  await rpc.value.sendInspectorState(state.value.inspectorId)
 }
 
 function quickEditNum(v: number | string, offset: 1 | -1) {
diff --git a/packages/applet/src/components/state/StateFieldViewer.vue b/packages/applet/src/components/state/StateFieldViewer.vue
index b44618ff..1b05a272 100644
--- a/packages/applet/src/components/state/StateFieldViewer.vue
+++ b/packages/applet/src/components/state/StateFieldViewer.vue
@@ -18,6 +18,7 @@ const props = defineProps<{
   data: CustomInspectorState
   depth: number
   index: string
+  expandedStateId?: string
 }>()
 
 const STATE_FIELDS_LIMIT_SIZE = 30
@@ -30,7 +31,7 @@ const displayedValue = computed(() => formatInspectorStateValue(props.data.value
 }))
 const type = computed(() => getInspectorStateValueType(props.data.value))
 const raw = computed(() => getRaw(props.data.value))
-const { expanded, toggleExpanded } = useToggleExpanded()
+const { expanded, toggleExpanded } = useToggleExpanded(props.expandedStateId ?? '')
 
 // custom state format class
 const stateFormatClass = computed(() => {
@@ -135,9 +136,9 @@ watch(() => editing.value, (v) => {
   }
 })
 
-function submit() {
+async async function submit() {
   const data = props.data
-  rpc.value.editInspectorState({
+  await rpc.value.editInspectorState({
     path: normalizedPath.value,
     inspectorId: state.value.inspectorId,
     type: data.stateType!,
@@ -148,6 +149,7 @@ function submit() {
       value: toSubmit(editingText.value, raw.value.customType),
     },
   } as unknown as DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE])
+  await rpc.value.sendInspectorState(state.value.inspectorId)
   toggleEditing()
 }
 
@@ -162,9 +164,9 @@ function addNewProp(type: EditorAddNewPropType) {
   addNewPropApi(type, raw.value.value)
 }
 
-function submitDrafting() {
+async function submitDrafting() {
   const data = props.data
-  rpc.value.editInspectorState({
+  await rpc.value.editInspectorState({
     path: [...normalizedPath.value, draftingNewProp.value.key],
     inspectorId: state.value.inspectorId,
     type: data.stateType!,
@@ -175,6 +177,7 @@ function submitDrafting() {
       value: toSubmit(draftingNewProp.value.value),
     },
   } as unknown as DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE])
+  await rpc.value.sendInspectorState(state.value.inspectorId)
   resetDrafting()
 }
 
diff --git a/packages/applet/src/composables/custom-inspector.ts b/packages/applet/src/composables/custom-inspector.ts
index a94e3ee7..134057bc 100644
--- a/packages/applet/src/composables/custom-inspector.ts
+++ b/packages/applet/src/composables/custom-inspector.ts
@@ -5,6 +5,7 @@ export interface CustomInspectorType {
   id: string
   label: string
   logo: string
+  icon: string
   packageName: string | undefined
   homepage: string | undefined
 }
diff --git a/packages/applet/src/modules/custom-inspector/components/state/Index.vue b/packages/applet/src/modules/custom-inspector/components/state/Index.vue
index 6955b8d5..86fc3f43 100644
--- a/packages/applet/src/modules/custom-inspector/components/state/Index.vue
+++ b/packages/applet/src/modules/custom-inspector/components/state/Index.vue
@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import { computed, onUnmounted, ref, watch } from 'vue'
 import { Pane, Splitpanes } from 'splitpanes'
-import { DevToolsMessagingEvents, rpc } from '@vue/devtools-core'
+import { DevToolsMessagingEvents, onRpcConnected, rpc } from '@vue/devtools-core'
 import { parse } from '@vue/devtools-kit'
 import type { CustomInspectorNode, CustomInspectorOptions, CustomInspectorState } from '@vue/devtools-kit'
 import { vTooltip } from '@vue/devtools-ui'
 import Navbar from '~/components/basic/Navbar.vue'
-import SelectiveList from '~/components/basic/SelectiveList.vue'
 import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
 import Empty from '~/components/basic/Empty.vue'
 import RootStateViewer from '~/components/state/RootStateViewer.vue'
 import { createExpandedContext } from '~/composables/toggle-expanded'
 import { useCustomInspectorState } from '~/composables/custom-inspector-state'
+import ComponentTree from '~/components/tree/TreeViewer.vue'
 
-const { expanded: expandedStateNodes } = createExpandedContext('vue-query-state')
+const { expanded: expandedTreeNodes } = createExpandedContext()
+const { expanded: expandedStateNodes } = createExpandedContext('custom-inspector-state')
 
 const customInspectState = useCustomInspectorState()
 
@@ -21,11 +22,34 @@ const inspectorId = computed(() => customInspectState.value.id!)
 const nodeActions = ref<CustomInspectorOptions['nodeActions']>([])
 const actions = ref<CustomInspectorOptions['nodeActions']>([])
 
-const selected = ref('')
 const tree = ref<CustomInspectorNode[]>([])
+const treeNodeLinkedList = computed(() => tree.value?.length ? dfs(tree.value?.[0]) : [])
+const selected = ref('')
+
 const state = ref<Record<string, CustomInspectorState[]>>({})
 const emptyState = computed(() => !Object.keys(state.value).length)
 
+// tree
+function dfs(node: { id: string, children?: { id: string }[] }, path: string[] = [], linkedList: string[][] = []) {
+  path.push(node.id)
+  if (node.children?.length === 0)
+    linkedList.push([...path])
+
+  node.children?.forEach((child) => {
+    dfs(child, path, linkedList)
+  })
+  path.pop()
+  return linkedList
+}
+
+function getNodesByDepth(list: string[][], depth: number) {
+  const nodes: string[] = []
+  list.forEach((item) => {
+    nodes.push(...item.slice(0, depth + 1))
+  })
+  return [...new Set(nodes)]
+}
+
 function getNodeActions() {
   rpc.value.getInspectorNodeActions(inspectorId.value).then((actions) => {
     nodeActions.value = actions
@@ -80,6 +104,7 @@ const getInspectorTree = () => {
     tree.value = data
     if (!selected.value && data.length) {
       selected.value = data[0].id
+      expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
       getInspectorState(data[0].id)
     }
   })
@@ -94,10 +119,11 @@ function onInspectorTreeUpdated(_data: string) {
   if (!data.rootNodes.length || data.inspectorId !== inspectorId.value)
     return
   tree.value = data.rootNodes
-  if ((!selected.value && data.rootNodes.length) || (selected.value && !data.rootNodes.find(node => node.id === selected.value))) {
-    selected.value = data.rootNodes[0].id
-    getInspectorState(data.rootNodes[0].id)
-  }
+  expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
+  // if ((!selected.value && data.rootNodes.length) || (selected.value && !data.rootNodes.find(node => node.id === selected.value))) {
+  //   selected.value = data.rootNodes[0].id
+  //   getInspectorState(data.rootNodes[0].id)
+  // }
 }
 
 function onInspectorStateUpdated(_data: string) {
@@ -106,17 +132,19 @@ function onInspectorStateUpdated(_data: string) {
     state: CustomInspectorState
     nodeId: string
   }
-  if (data.inspectorId !== inspectorId.value || !data.state)
+  if (data.inspectorId !== inspectorId.value || !data.state || data.nodeId !== selected.value)
     return
 
   const { inspectorId: _inspectorId, ...filtered } = data.state
 
   state.value = filterEmptyState(filtered as any)
-  expandedStateNodes.value = Array.from({ length: Object.keys(state.value).length }, (_, i) => `${i}`)
+  // expandedStateNodes.value = Array.from({ length: Object.keys(state.value).length }, (_, i) => `${i}`)
 }
 
-rpc.functions.on(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, onInspectorTreeUpdated)
-rpc.functions.on(DevToolsMessagingEvents.INSPECTOR_STATE_UPDATED, onInspectorStateUpdated)
+onRpcConnected(() => {
+  rpc.functions.on(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, onInspectorTreeUpdated)
+  rpc.functions.on(DevToolsMessagingEvents.INSPECTOR_STATE_UPDATED, onInspectorStateUpdated)
+})
 
 onUnmounted(() => {
   rpc.functions.off(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, onInspectorTreeUpdated)
@@ -140,7 +168,7 @@ onUnmounted(() => {
                 </div>
               </div>
             </div>
-            <SelectiveList v-model="selected" :data="tree" />
+            <ComponentTree v-model="selected" :data="tree" />
           </div>
         </Pane>
         <Pane size="60">
@@ -152,7 +180,7 @@ onUnmounted(() => {
                 </div>
               </div>
             </div>
-            <RootStateViewer v-if="selected && !emptyState" :data="state" :node-id="selected" :inspector-id="inspectorId" expanded-state-id="vue-query-state" class="no-scrollbar flex-1 select-none overflow-scroll" />
+            <RootStateViewer v-if="selected && !emptyState" :data="state" :node-id="selected" :inspector-id="inspectorId" expanded-state-id="custom-inspector-state" class="no-scrollbar flex-1 select-none overflow-scroll" />
             <Empty v-else>
               No Data
             </Empty>
diff --git a/packages/client/src/components/common/SideNavItem.vue b/packages/client/src/components/common/SideNavItem.vue
index 20c5d7d4..04dfccb7 100644
--- a/packages/client/src/components/common/SideNavItem.vue
+++ b/packages/client/src/components/common/SideNavItem.vue
@@ -54,6 +54,7 @@ function onClick() {
         <TabIcon
           text-xl
           :icon="tab.icon"
+          :fallback="tab.fallbackIcon"
           title="Settings"
           :show-title="false"
         />
diff --git a/packages/client/src/components/common/TabIcon.vue b/packages/client/src/components/common/TabIcon.vue
index 3aa43432..ac01b762 100644
--- a/packages/client/src/components/common/TabIcon.vue
+++ b/packages/client/src/components/common/TabIcon.vue
@@ -1,23 +1,31 @@
 <script setup lang="ts">
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   icon?: string
   title?: string
   showTitle?: boolean
+  fallback?: string
 }>(), {
   showTitle: true,
 })
+
+const _icon = ref<string | undefined>(props.icon)
+
+function onLoadError() {
+  _icon.value = props.fallback
+}
 </script>
 
 <template>
   <img
-    v-if="icon && (icon.startsWith('/') || icon.match(/^https?:/))"
+    v-if="_icon && (_icon.startsWith('/') || _icon.match(/^https?:/))"
     :style="{
       width: '1em',
       height: '1em',
     }"
     v-bind="$attrs"
-    :src="icon"
+    :src="_icon"
     :alt="title"
+    @error="onLoadError"
   >
   <div
     v-else
@@ -26,7 +34,7 @@ withDefaults(defineProps<{
       height: '1em',
     }"
     v-bind="$attrs"
-    :class="icon || 'i-carbon-bring-forward'"
+    :class="_icon || 'i-carbon-bring-forward'"
     :title="showTitle ? title : undefined"
   />
 </template>
diff --git a/packages/client/src/composables/custom-inspector-tabs.ts b/packages/client/src/composables/custom-inspector-tabs.ts
index 90efa074..d79af648 100644
--- a/packages/client/src/composables/custom-inspector-tabs.ts
+++ b/packages/client/src/composables/custom-inspector-tabs.ts
@@ -13,6 +13,7 @@ export function useCustomInspectorTabs() {
         order: index,
         name: inspector.id,
         icon: inspector.logo,
+        fallbackIcon: inspector.icon,
         title: inspector.label,
         path: `${CUSTOM_INSPECTOR_TAB_VIEW}/${inspector.id}`,
         category: 'modules',
diff --git a/packages/client/src/types/tab.ts b/packages/client/src/types/tab.ts
index 08634a54..0149de45 100644
--- a/packages/client/src/types/tab.ts
+++ b/packages/client/src/types/tab.ts
@@ -2,6 +2,7 @@ import type { MaybeRefOrGetter } from 'vue'
 import type { CustomTab } from '@vue/devtools-kit'
 
 export interface ModuleBuiltinTab extends Pick<CustomTab, 'name' | 'icon' | 'title' | 'category'> {
+  fallbackIcon?: string
   order?: number
   path: string
   show?: () => MaybeRefOrGetter<any>
diff --git a/packages/core/src/rpc/global.ts b/packages/core/src/rpc/global.ts
index 2fcf8361..5fc87845 100644
--- a/packages/core/src/rpc/global.ts
+++ b/packages/core/src/rpc/global.ts
@@ -69,6 +69,9 @@ export const functions = {
   async editInspectorState(payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]) {
     return await devtools.ctx.api.editInspectorState(payload)
   },
+  sendInspectorState(id: string) {
+    return devtools.ctx.api.sendInspectorState(id)
+  },
   inspectComponentInspector() {
     return devtools.ctx.api.inspectComponentInspector()
   },
diff --git a/packages/devtools-kit/src/api/v6/index.ts b/packages/devtools-kit/src/api/v6/index.ts
index 0797689a..28dc9ffe 100644
--- a/packages/devtools-kit/src/api/v6/index.ts
+++ b/packages/devtools-kit/src/api/v6/index.ts
@@ -4,6 +4,7 @@ import { DevToolsContextHookKeys, DevToolsV6PluginAPIHookKeys, DevToolsV6PluginA
 import { devtoolsPluginBuffer } from '../../ctx/plugin'
 import { devtoolsHooks } from '../../hook'
 import { DevToolsHooks } from '../../types'
+import { getActiveInspectors } from '../../ctx/inspector'
 
 export class DevToolsV6PluginAPI {
   private plugin: DevToolsPlugin
@@ -54,18 +55,23 @@ export class DevToolsV6PluginAPI {
 
   // component inspector
   notifyComponentUpdate(instance?: ComponentInstance) {
-    if (instance) {
-      const args = [
-        instance.appContext.app,
-        instance.uid,
-        instance.parent?.uid,
-        instance,
-      ] as const
-      devtoolsHooks.callHook(DevToolsHooks.COMPONENT_UPDATED, ...args)
-    }
-    else {
-      // @ts-expect-error skip type check
-      devtoolsHooks.callHook(DevToolsHooks.COMPONENT_UPDATED)
+    const inspector = getActiveInspectors().find(i => i.packageName === this.plugin.descriptor.packageName)
+    if (inspector?.id) {
+      // @TODO: handler
+      if (instance) {
+        const args = [
+          instance.appContext.app,
+          instance.uid,
+          instance.parent?.uid,
+          instance,
+        ] as const
+        devtoolsHooks.callHook(DevToolsHooks.COMPONENT_UPDATED, ...args)
+      }
+      else {
+        // @ts-expect-error skip type check
+        devtoolsHooks.callHook(DevToolsHooks.COMPONENT_UPDATED)
+      }
+      this.hooks.callHook(DevToolsContextHookKeys.SEND_INSPECTOR_STATE, { inspectorId: inspector.id, plugin: this.plugin })
     }
   }
 
diff --git a/packages/devtools-kit/src/ctx/api.ts b/packages/devtools-kit/src/ctx/api.ts
index cf2f834e..7121f0e8 100644
--- a/packages/devtools-kit/src/ctx/api.ts
+++ b/packages/devtools-kit/src/ctx/api.ts
@@ -7,9 +7,9 @@ import { openInEditor } from '../core/open-in-editor'
 import { normalizeRouterInfo } from '../core/router'
 import { getComponentInspector } from '../core/component-inspector'
 import type { DevToolsContextHooks, DevToolsMessagingHooks, DevToolsV6PluginAPIHookPayloads } from './hook'
-import { DevToolsV6PluginAPIHookKeys } from './hook'
+import { DevToolsContextHookKeys, DevToolsV6PluginAPIHookKeys } from './hook'
 import { activeAppRecord, devtoolsAppRecords, setActiveAppRecord, setActiveAppRecordId } from './state'
-import { callInspectorUpdatedHook } from './inspector'
+import { callInspectorUpdatedHook, getInspector } from './inspector'
 
 export function createDevToolsApi(hooks: Hookable<DevToolsContextHooks & DevToolsMessagingHooks, HookKeys<DevToolsContextHooks & DevToolsMessagingHooks>>) {
   return {
@@ -60,11 +60,20 @@ export function createDevToolsApi(hooks: Hookable<DevToolsContextHooks & DevTool
           stateEditor.set(obj, path, value, cb || stateEditor.createDefaultSetCallback(payload.state))
         },
       }
+
       // @ts-expect-error hookable
       hooks.callHookWith((callbacks) => {
         callbacks.forEach(cb => cb(_payload))
       }, DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE)
     },
+    // send inspector state
+    sendInspectorState(inspectorId: string) {
+      const inspector = getInspector(inspectorId)
+      hooks.callHook(DevToolsContextHookKeys.SEND_INSPECTOR_STATE, { inspectorId, plugin: {
+        descriptor: inspector!.descriptor,
+        setupFn: () => ({}),
+      } })
+    },
     // inspect component inspector
     inspectComponentInspector() {
       return inspectComponentHighLighter()
diff --git a/packages/devtools-kit/src/ctx/hook.ts b/packages/devtools-kit/src/ctx/hook.ts
index 710ad6a8..e1947ab6 100644
--- a/packages/devtools-kit/src/ctx/hook.ts
+++ b/packages/devtools-kit/src/ctx/hook.ts
@@ -189,6 +189,7 @@ export interface DevToolsMessagingHookPayloads {
     id: string
     label: string
     logo: string
+    icon: string
     packageName: string | undefined
     homepage: string | undefined
   }[]
diff --git a/packages/devtools-kit/src/ctx/inspector.ts b/packages/devtools-kit/src/ctx/inspector.ts
index 7e47beb9..14a23a66 100644
--- a/packages/devtools-kit/src/ctx/inspector.ts
+++ b/packages/devtools-kit/src/ctx/inspector.ts
@@ -49,7 +49,8 @@ export function getActiveInspectors() {
       return {
         id: options.id,
         label: options.label,
-        logo: `i-ic-baseline-${options.icon}`,
+        logo: descriptor.logo!,
+        icon: `i-ic-baseline-${options?.icon?.replace(/_/g, '-')}`,
         packageName: descriptor.packageName,
         homepage: descriptor.homepage,
       }
diff --git a/packages/playground/applet/package.json b/packages/playground/applet/package.json
index fcbcd087..d525a338 100644
--- a/packages/playground/applet/package.json
+++ b/packages/playground/applet/package.json
@@ -8,13 +8,16 @@
   },
   "dependencies": {
     "@iconify/json": "^2.2.216",
+    "@tresjs/core": "^4.0.2",
     "@vueuse/core": "^10.10.0",
     "pinia": "^2.1.7",
+    "three": "^0.165.0",
     "unplugin-auto-import": "^0.17.6",
     "vue": "^3.4.27",
     "vue-router": "^4.3.2"
   },
   "devDependencies": {
+    "@types/three": "^0.165.0",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/devtools-applet": "workspace:*",
     "@vue/devtools-core": "workspace:*",
diff --git a/packages/playground/applet/src/App.vue b/packages/playground/applet/src/App.vue
index 92318263..412fb66b 100644
--- a/packages/playground/applet/src/App.vue
+++ b/packages/playground/applet/src/App.vue
@@ -6,6 +6,7 @@ import { createRpcClient } from '@vue/devtools-kit'
 import { useDark } from '@vueuse/core'
 import { useCounterStore } from './stores'
 import Hello from './components/Hello.vue'
+import Tres from './components/Tres.vue'
 
 const isDark = useDark()
 // user app
@@ -37,12 +38,12 @@ function initVueDevToolsState() {
 }
 
 onRpcConnected(() => {
-  initVueDevToolsState()
+  // initVueDevToolsState()
 })
 </script>
 
 <template>
-  <div class="h-screen w-screen flex flex-col items-center justify-center">
+  <!-- <div class="h-screen w-screen flex flex-col items-center justify-center">
     <div i-carbon-sun dark:i-carbon-moon translate-y--1px @click="isDark = !isDark" />
 
     <div select-none>
@@ -56,6 +57,6 @@ onRpcConnected(() => {
         Connecting...
       </div>
     </div>
-  </div>
-  <Hello />
+  </div> -->
+  <Tres />
 </template>
diff --git a/packages/playground/applet/src/components/Tres.vue b/packages/playground/applet/src/components/Tres.vue
new file mode 100644
index 00000000..8b585b13
--- /dev/null
+++ b/packages/playground/applet/src/components/Tres.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { ref, shallowRef } from 'vue'
+
+const boxRef = shallowRef(null)
+const showBox = ref(true)
+
+setInterval(() => {
+  showBox.value = !showBox.value
+}, 3000)
+</script>
+
+<template>
+  <div class="grid grid-cols-2">
+    <div class="aspect-video">
+      <TresCanvas clear-color="#fff">
+        <TresPerspectiveCamera
+          :position="[5, 5, 5]"
+          :look-at="[0, 0, 0]"
+        />
+
+        <TresAmbientLight
+          :intensity="0.5"
+          color="red"
+        />
+        <TresMesh
+          v-if="showBox"
+          ref="boxRef"
+          :position="[0, 2, 0]"
+        >
+          <TresBoxGeometry :args="[1, 1, 1]" />
+          <TresMeshNormalMaterial />
+        </TresMesh>
+        <TresDirectionalLight
+          :position="[0, 2, 4]"
+          :intensity="1"
+          cast-shadow
+        />
+        <TresAxesHelper />
+        <TresGridHelper :args="[10, 10, 0x444444, 'teal']" />
+      </TresCanvas>
+    </div>
+    <div class="aspect-video">
+      <TresCanvas clear-color="#000">
+        <TresPerspectiveCamera
+          :position="[5, 5, 5]"
+          :look-at="[0, 0, 0]"
+        />
+        <TresMesh>
+          <TresSphereGeometry :args="[1, 32, 32]" />
+          <TresMeshNormalMaterial />
+        </TresMesh>
+        <TresAmbientLight
+          :intensity="0.5"
+          color="red"
+        />
+      </TresCanvas>
+    </div>
+  </div>
+</template>
diff --git a/packages/playground/applet/src/main.ts b/packages/playground/applet/src/main.ts
index 29b17cb9..699f57e2 100644
--- a/packages/playground/applet/src/main.ts
+++ b/packages/playground/applet/src/main.ts
@@ -1,6 +1,6 @@
 import { createPinia } from 'pinia'
+import Tres from '@tresjs/core'
 import App from './App.vue'
-
 import './style.css'
 import 'uno.css'
 import '@vue/devtools-applet/style.css'
@@ -9,4 +9,5 @@ const pinia = createPinia()
 const app = createApp(App)
 app.use(pinia)
 
+app.use(Tres)
 app.mount('#app')
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cab7516d..8936755d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -118,7 +118,7 @@ importers:
         version: 2.0.0(sass@1.77.4)(typescript@5.4.5)
       unocss:
         specifier: ^0.60.4
-        version: 0.60.4(postcss@8.4.38)(rollup@4.13.0)(vite@5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.26.0))
+        version: 0.60.4(postcss@8.4.38)(rollup@3.28.1)(vite@5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.26.0))
       vite:
         specifier: ^5.2.12
         version: 5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.26.0)
@@ -489,12 +489,18 @@ importers:
       '@iconify/json':
         specifier: ^2.2.216
         version: 2.2.216
+      '@tresjs/core':
+        specifier: ^4.0.2
+        version: 4.0.2(three@0.165.0)(vue@3.4.27(typescript@5.4.5))
       '@vueuse/core':
         specifier: ^10.10.0
         version: 10.10.0(vue@3.4.27(typescript@5.4.5))
       pinia:
         specifier: ^2.1.7
         version: 2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5))
+      three:
+        specifier: ^0.165.0
+        version: 0.165.0
       unplugin-auto-import:
         specifier: ^0.17.6
         version: 0.17.6(@vueuse/core@10.10.0(vue@3.4.27(typescript@5.4.5)))(rollup@4.13.0)
@@ -505,6 +511,9 @@ importers:
         specifier: ^4.3.2
         version: 4.3.2(vue@3.4.27(typescript@5.4.5))
     devDependencies:
+      '@types/three':
+        specifier: ^0.165.0
+        version: 0.165.0
       '@vitejs/plugin-vue':
         specifier: ^5.0.5
         version: 5.0.5(vite@5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.26.0))(vue@3.4.27(typescript@5.4.5))
@@ -902,6 +911,9 @@ packages:
   '@algolia/transporter@4.22.0':
     resolution: {integrity: sha512-ieO1k8x2o77GNvOoC+vAkFKppydQSVfbjM3YrSjLmgywiBejPTvU1R1nEvG59JIIUvtSLrZsLGPkd6vL14zopA==}
 
+  '@alvarosabu/utils@3.2.0':
+    resolution: {integrity: sha512-aoGWRfaQjOo9TUwrBA6W0zwTHktgrXy69GIFNILT4gHsqscw6+X8P6uoSlZVQFr887SPm8x3aDin5EBVq8y4pw==}
+
   '@ampproject/remapping@2.3.0':
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
@@ -2662,10 +2674,19 @@ packages:
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}
 
+  '@tresjs/core@4.0.2':
+    resolution: {integrity: sha512-+Shy5ch4m9gQSHRlArZAn4nv2apaFJJv21bAvpOKRXTCtGu0BakKGUpWcTzzmDsTs9t6yndbjCWzyifggjFpQQ==}
+    peerDependencies:
+      three: '>=0.133'
+      vue: '>=3.4'
+
   '@trysound/sax@0.2.0':
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
 
+  '@tweenjs/tween.js@23.1.2':
+    resolution: {integrity: sha512-kMCNaZCJugWI86xiEHaY338CU5JpD0B97p1j1IKNn/Zto8PgACjQx0UxbHjmOcLl/dDOBnItwD07KmCs75pxtQ==}
+
   '@types/argparse@1.0.38':
     resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
 
@@ -2828,12 +2849,21 @@ packages:
   '@types/splitpanes@2.2.6':
     resolution: {integrity: sha512-3dV5sO1Ht74iER4jJU03mreL3f+Q2h47ZqXS6Sfbqc6hkCvsDrX1GA0NbYWRdNvZemPyTDzUoApWKeoGbALwkQ==}
 
+  '@types/stats.js@0.17.3':
+    resolution: {integrity: sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==}
+
+  '@types/three@0.165.0':
+    resolution: {integrity: sha512-AJK8JZAFNBF0kBXiAIl5pggYlzAGGA8geVYQXAcPCEDRbyA+oEjkpUBcJJrtNz6IiALwzGexFJGZG2yV3WsYBw==}
+
   '@types/unist@2.0.10':
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
 
   '@types/web-bluetooth@0.0.20':
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
 
+  '@types/webxr@0.5.16':
+    resolution: {integrity: sha512-0E0Cl84FECtzrB4qG19TNTqpunw0F1YF0QZZnFMF6pDw1kNKJtrlTKlVB34stGIsHbZsYQ7H0tNjPfZftkHHoA==}
+
   '@types/ws@8.5.10':
     resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==}
 
@@ -3186,6 +3216,9 @@ packages:
   '@vue/devtools-api@6.6.1':
     resolution: {integrity: sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==}
 
+  '@vue/devtools-api@6.6.3':
+    resolution: {integrity: sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==}
+
   '@vue/devtools-api@7.2.1':
     resolution: {integrity: sha512-6oNCtyFOrNdqm6GUkFujsCgFlpbsHLnZqq7edeM/+cxAbMyCWvsaCsIMUaz7AiluKLccCGEM8fhOsjaKgBvb7g==}
 
@@ -6010,6 +6043,9 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  meshoptimizer@0.18.1:
+    resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
+
   methods@1.1.2:
     resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
     engines: {node: '>= 0.6'}
@@ -7581,6 +7617,9 @@ packages:
     peerDependencies:
       webpack: ^4.27.0 || ^5.0.0
 
+  three@0.165.0:
+    resolution: {integrity: sha512-cc96IlVYGydeceu0e5xq70H8/yoVT/tXBxV/W8A/U6uOq7DXc4/s1Mkmnu6SqoYGhSRWWYFOhVwvq6V0VtbplA==}
+
   thunky@1.1.0:
     resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==}
 
@@ -8569,6 +8608,8 @@ snapshots:
       '@algolia/logger-common': 4.22.0
       '@algolia/requester-common': 4.22.0
 
+  '@alvarosabu/utils@3.2.0': {}
+
   '@ampproject/remapping@2.3.0':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
@@ -10344,8 +10385,20 @@ snapshots:
 
   '@tootallnate/once@2.0.0': {}
 
+  '@tresjs/core@4.0.2(three@0.165.0)(vue@3.4.27(typescript@5.4.5))':
+    dependencies:
+      '@alvarosabu/utils': 3.2.0
+      '@vue/devtools-api': 6.6.3
+      '@vueuse/core': 10.10.0(vue@3.4.27(typescript@5.4.5))
+      three: 0.165.0
+      vue: 3.4.27(typescript@5.4.5)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   '@trysound/sax@0.2.0': {}
 
+  '@tweenjs/tween.js@23.1.2': {}
+
   '@types/argparse@1.0.38': {}
 
   '@types/body-parser@1.19.5':
@@ -10532,10 +10585,22 @@ snapshots:
     dependencies:
       vue: 2.7.15
 
+  '@types/stats.js@0.17.3': {}
+
+  '@types/three@0.165.0':
+    dependencies:
+      '@tweenjs/tween.js': 23.1.2
+      '@types/stats.js': 0.17.3
+      '@types/webxr': 0.5.16
+      fflate: 0.8.2
+      meshoptimizer: 0.18.1
+
   '@types/unist@2.0.10': {}
 
   '@types/web-bluetooth@0.0.20': {}
 
+  '@types/webxr@0.5.16': {}
+
   '@types/ws@8.5.10':
     dependencies:
       '@types/node': 20.14.2
@@ -10628,6 +10693,16 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
+  '@unocss/astro@0.60.4(rollup@3.28.1)(vite@5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.26.0))':
+    dependencies:
+      '@unocss/core': 0.60.4
+      '@unocss/reset': 0.60.4
+      '@unocss/vite': 0.60.4(rollup@3.28.1)(vite@5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.26.0))
+    optionalDependencies:
+      vite: 5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.26.0)
+    transitivePeerDependencies:
+      - rollup
+
   '@unocss/astro@0.60.4(rollup@4.13.0)(vite@5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.26.0))':
     dependencies:
       '@unocss/core': 0.60.4
@@ -10638,6 +10713,24 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
+  '@unocss/cli@0.60.4(rollup@3.28.1)':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@rollup/pluginutils': 5.1.0(rollup@3.28.1)
+      '@unocss/config': 0.60.4
+      '@unocss/core': 0.60.4
+      '@unocss/preset-uno': 0.60.4
+      cac: 6.7.14
+      chokidar: 3.6.0
+      colorette: 2.0.20
+      consola: 3.2.3
+      fast-glob: 3.3.2
+      magic-string: 0.30.10
+      pathe: 1.1.2
+      perfect-debounce: 1.0.0
+    transitivePeerDependencies:
+      - rollup
+
   '@unocss/cli@0.60.4(rollup@4.13.0)':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -10783,6 +10876,22 @@ snapshots:
     dependencies:
       '@unocss/core': 0.60.4
 
+  '@unocss/vite@0.60.4(rollup@3.28.1)(vite@5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.26.0))':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@rollup/pluginutils': 5.1.0(rollup@3.28.1)
+      '@unocss/config': 0.60.4
+      '@unocss/core': 0.60.4
+      '@unocss/inspector': 0.60.4
+      '@unocss/scope': 0.60.4
+      '@unocss/transformer-directives': 0.60.4
+      chokidar: 3.6.0
+      fast-glob: 3.3.2
+      magic-string: 0.30.10
+      vite: 5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.26.0)
+    transitivePeerDependencies:
+      - rollup
+
   '@unocss/vite@0.60.4(rollup@4.13.0)(vite@5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.26.0))':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -11271,6 +11380,8 @@ snapshots:
 
   '@vue/devtools-api@6.6.1': {}
 
+  '@vue/devtools-api@6.6.3': {}
+
   '@vue/devtools-api@7.2.1(vue@3.4.27(typescript@5.4.5))':
     dependencies:
       '@vue/devtools-kit': 7.2.1(vue@3.4.27(typescript@5.4.5))
@@ -14396,6 +14507,8 @@ snapshots:
 
   merge2@1.4.1: {}
 
+  meshoptimizer@0.18.1: {}
+
   methods@1.1.2: {}
 
   micromark@2.11.4:
@@ -16006,6 +16119,8 @@ snapshots:
       schema-utils: 3.3.0
       webpack: 5.89.0(esbuild@0.21.4)
 
+  three@0.165.0: {}
+
   thunky@1.1.0: {}
 
   tinybench@2.5.1: {}
@@ -16248,6 +16363,35 @@ snapshots:
 
   universalify@2.0.1: {}
 
+  unocss@0.60.4(postcss@8.4.38)(rollup@3.28.1)(vite@5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.26.0)):
+    dependencies:
+      '@unocss/astro': 0.60.4(rollup@3.28.1)(vite@5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.26.0))
+      '@unocss/cli': 0.60.4(rollup@3.28.1)
+      '@unocss/core': 0.60.4
+      '@unocss/extractor-arbitrary-variants': 0.60.4
+      '@unocss/postcss': 0.60.4(postcss@8.4.38)
+      '@unocss/preset-attributify': 0.60.4
+      '@unocss/preset-icons': 0.60.4
+      '@unocss/preset-mini': 0.60.4
+      '@unocss/preset-tagify': 0.60.4
+      '@unocss/preset-typography': 0.60.4
+      '@unocss/preset-uno': 0.60.4
+      '@unocss/preset-web-fonts': 0.60.4
+      '@unocss/preset-wind': 0.60.4
+      '@unocss/reset': 0.60.4
+      '@unocss/transformer-attributify-jsx': 0.60.4
+      '@unocss/transformer-attributify-jsx-babel': 0.60.4
+      '@unocss/transformer-compile-class': 0.60.4
+      '@unocss/transformer-directives': 0.60.4
+      '@unocss/transformer-variant-group': 0.60.4
+      '@unocss/vite': 0.60.4(rollup@3.28.1)(vite@5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.26.0))
+    optionalDependencies:
+      vite: 5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.26.0)
+    transitivePeerDependencies:
+      - postcss
+      - rollup
+      - supports-color
+
   unocss@0.60.4(postcss@8.4.38)(rollup@4.13.0)(vite@5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.26.0)):
     dependencies:
       '@unocss/astro': 0.60.4(rollup@4.13.0)(vite@5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.26.0))