diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
index a0c7b34d..f0f5875d 100644
--- a/.github/workflows/static.yml
+++ b/.github/workflows/static.yml
@@ -87,13 +87,6 @@ jobs:
           cp ./packages/fonts/dist/* ./public/fonts
           cp ./packages/fonts/LICENSE public/fonts/LICENSE
 
-# Yoga Wasm
-      - name: Copy wasm files
-        run: |
-          mkdir public/yoga
-          cp packages/uikit/node_modules/yoga-wasm-web/dist/yoga.wasm public/yoga/yoga.wasm
-          cp ./packages/uikit/THIRD_PARTY_LICENSES public/yoga/THIRD_PARTY_LICENSES
-
 # Examples
       - name: Building Examples
         run: |  
diff --git a/README.md b/README.md
index 223623a2..122e6a2d 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,6 @@ TODO Release
 - feat: drag/click threshold
 - feat: input
 - fix: decrease clipping rect when scrollbar present
-- feat: upgrade to yoga2.0
 
 Roadmap
 
diff --git a/examples/uikit/src/App.tsx b/examples/uikit/src/App.tsx
index 3c870cb2..b082c8fb 100644
--- a/examples/uikit/src/App.tsx
+++ b/examples/uikit/src/App.tsx
@@ -1,6 +1,6 @@
 import { Suspense, useMemo, useState } from 'react'
 import { Canvas } from '@react-three/fiber'
-import { Gltf, Box, PerspectiveCamera } from '@react-three/drei'
+import { Gltf, Box, PerspectiveCamera, RenderTexture } from '@react-three/drei'
 import { signal } from '@preact/signals-core'
 import {
   DefaultProperties,
@@ -14,7 +14,6 @@ import {
   Portal,
   SuspendingImage,
 } from '@react-three/uikit'
-import { RenderTexture } from '@react-three/drei'
 import { Texture } from 'three'
 import { Skeleton } from '../../../packages/kits/default/skeleton'
 
diff --git a/packages/uikit/THIRD_PARTY_LICENSES b/packages/uikit/THIRD_PARTY_LICENSES
index f677f005..87cbf536 100644
--- a/packages/uikit/THIRD_PARTY_LICENSES
+++ b/packages/uikit/THIRD_PARTY_LICENSES
@@ -1,32 +1,6 @@
-yoga-wasm-web:
-
-MIT License
-
-Copyright (c) 2022 Shu Ding
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-yoga-layout-wasm:
-
 MIT License
 
-Copyright (c) 2020 黄祺
+Copyright (c) Facebook, Inc. and its affiliates.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/packages/uikit/package.json b/packages/uikit/package.json
index b2143e5e..349f7602 100644
--- a/packages/uikit/package.json
+++ b/packages/uikit/package.json
@@ -29,8 +29,6 @@
   "scripts": {
     "test": "mocha ./tests/allocation.spec.ts",
     "build": "tsc",
-    "inline-wasm": "wasmwrap --include-decode false --input node_modules/yoga-wasm-web/dist/yoga.wasm --output src/flex/wasm.ts",
-    "fix:inline-wasm": "replace-in-files --string 'const base64 =' --replacement 'const base64: string =' src/flex/wasm.ts",
     "generate": "node --loader ts-node/esm scripts/flex-generate-setter.ts",
     "check:prettier": "prettier --check src scripts tests",
     "check:eslint": "eslint 'src/**/*.{tsx,ts}'",
@@ -44,12 +42,11 @@
   },
   "dependencies": {
     "@preact/signals-core": "^1.5.1",
-    "base64-js": "^1.5.1",
     "chalk": "^5.3.0",
     "commander": "^12.0.0",
     "ora": "^8.0.1",
     "prompts": "^2.4.2",
-    "yoga-wasm-web": "^0.3.3",
+    "yoga-layout": "^2.0.1",
     "zod": "^3.22.4"
   },
   "devDependencies": {
@@ -63,7 +60,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "replace-in-files-cli": "^2.2.0",
-    "three": "^0.161.0",
-    "wasmwrap": "^1.0.0"
+    "three": "^0.161.0"
   }
 }
diff --git a/packages/uikit/scripts/flex-generate-setter.ts b/packages/uikit/scripts/flex-generate-setter.ts
index c857c1a2..93a208be 100644
--- a/packages/uikit/scripts/flex-generate-setter.ts
+++ b/packages/uikit/scripts/flex-generate-setter.ts
@@ -1,20 +1,8 @@
 import { writeFileSync } from 'fs'
-import {
-  EDGE_BOTTOM,
-  EDGE_LEFT,
-  EDGE_RIGHT,
-  EDGE_TOP,
-  Node,
-  UNIT_AUTO,
-  UNIT_PERCENT,
-  UNIT_POINT,
-  UNIT_UNDEFINED,
-} from 'yoga-wasm-web'
-import { GUTTER_ROW, GUTTER_COLUMN } from 'yoga-wasm-web'
-import { loadYogaBase64 } from '../src/flex/load-base64.js'
+import { loadYoga, Edge, Gutter, Unit, Node } from 'yoga-layout/wasm-async'
 
 async function main() {
-  const yoga = await loadYogaBase64()
+  const yoga = await loadYoga()
   const node = yoga.Node.create()
 
   const propertiesWithEdge = new Set(['border', 'padding', 'margin', 'position'])
@@ -34,15 +22,16 @@ async function main() {
   }
 
   const edgeMap = {
-    Top: EDGE_TOP,
-    Left: EDGE_LEFT,
-    Right: EDGE_RIGHT,
-    Bottom: EDGE_BOTTOM,
+    Top: Edge.Top,
+    Left: Edge.Left,
+    Right: Edge.Right,
+    Bottom: Edge.Bottom,
   }
   const gutterMap = {
-    Row: GUTTER_ROW,
-    Column: GUTTER_COLUMN,
+    Row: Gutter.Row,
+    Column: Gutter.Column,
   }
+
   const yogaKeys = Object.entries(yoga)
 
   const kebabCaseFromSnakeCase = (str: string) =>
@@ -119,11 +108,11 @@ async function main() {
       }
     }
     if (propertiesWithEdge.has(propertyName)) {
+      importedTypesFromYoga.add('Edge')
       for (const [edgeKey, edge] of Object.entries(edgeMap)) {
         const defaultValue = fromYoga(propertyName, node[`get${functionName}` as 'getBorder'](edge))
         const edgePropertyName = `${propertyName}${edgeKey}`
-        const edgeType = `EDGE_${edgeKey.toUpperCase()}`
-        importedTypesFromYoga.add(edgeType)
+        const edgeType = `Edge.${edgeKey}`
         setterFunctions.push([
           edgePropertyName,
           `(node: Node, precision: number, input: ${types.join(' | ')}) =>
@@ -135,11 +124,11 @@ async function main() {
         ])
       }
     } else if (propertiesWithGutter.has(propertyName)) {
+      importedTypesFromYoga.add('Gutter')
       for (const [gutterKey, gutter] of Object.entries(gutterMap)) {
         const defaultValue = fromYoga(propertyName, node[`get${functionName}` as 'getGap'](gutter))
         const gutterPropertyName = `${propertyName}${gutterKey}`
-        const gutterType = `GUTTER_${gutterKey.toUpperCase()}`
-        importedTypesFromYoga.add(gutterType)
+        const gutterType = `Gutter.${gutterKey}`
         setterFunctions.push([
           gutterPropertyName,
           `(node: Node, precision: number, input: ${types.join(' | ')}) =>
@@ -166,8 +155,8 @@ async function main() {
 
   writeFileSync(
     'src/flex/setter.ts',
-    `import { Node } from "yoga-wasm-web"
-    import type { ${Array.from(importedTypesFromYoga).join(', ')} } from "yoga-wasm-web"
+    `import { Node } from "yoga-layout/wasm-async"
+    import type { ${Array.from(importedTypesFromYoga).join(', ')} } from "yoga-layout/wasm-async"
     function convertEnum<T extends { [Key in string]: number }>(lut: T, input: keyof T | undefined, defaultValue: T[keyof T]): T[keyof T] {
       if(input == null) {
         return defaultValue
@@ -199,8 +188,7 @@ function createLookupTable(
   return `const ${name} = {
     ${values
       .map(([key, value, type]) => {
-        importedTypesFromYoga.add(type)
-        return `"${key}": ${value} as ${type}`
+        return `"${key}": ${value}`
       })
       .join(',\n')}
   } as const`
@@ -209,13 +197,13 @@ function createLookupTable(
 function fromYoga(name: string, value: any): 'auto' | `${number}%` | number | null {
   if (typeof value === 'object') {
     switch (value.unit) {
-      case UNIT_AUTO:
+      case Unit.Auto:
         return 'auto'
-      case UNIT_PERCENT:
+      case Unit.Percent:
         return `${value.value}%`
-      case UNIT_POINT:
+      case Unit.Point:
         return value.value ?? null
-      case UNIT_UNDEFINED:
+      case Unit.Undefined:
         return null
     }
   }
diff --git a/packages/uikit/src/clipping.ts b/packages/uikit/src/clipping.ts
index bb293b80..818cd74e 100644
--- a/packages/uikit/src/clipping.ts
+++ b/packages/uikit/src/clipping.ts
@@ -4,7 +4,7 @@ import { RefObject, createContext, useContext, useMemo } from 'react'
 import { Group, Matrix4, Plane, Vector3 } from 'three'
 import type { Vector2Tuple } from 'three'
 import { Inset } from './flex/node.js'
-import { OVERFLOW_VISIBLE, Overflow } from 'yoga-wasm-web'
+import { Overflow } from 'yoga-layout/wasm-async'
 
 const dotLt45deg = Math.cos((45 / 180) * Math.PI)
 
@@ -157,7 +157,7 @@ export function useClippingRect(
     () =>
       computed(() => {
         const global = globalMatrix.value
-        if (global == null || overflow.value === OVERFLOW_VISIBLE) {
+        if (global == null || overflow.value === Overflow.Visible) {
           return parentClippingRect?.value
         }
         const [width, height] = size.value
diff --git a/packages/uikit/src/components/fullscreen.tsx b/packages/uikit/src/components/fullscreen.tsx
index 50e948b9..d2dcdf98 100644
--- a/packages/uikit/src/components/fullscreen.tsx
+++ b/packages/uikit/src/components/fullscreen.tsx
@@ -3,7 +3,6 @@ import { DEFAULT_PIXEL_SIZE, Root, RootProperties } from './root.js'
 import { batch, signal } from '@preact/signals-core'
 import { RootState, createPortal, useFrame, useStore, useThree } from '@react-three/fiber'
 import { EventHandlers } from '@react-three/fiber/dist/declarations/src/core/events.js'
-import { Yoga } from 'yoga-wasm-web'
 import { ScrollListeners } from '../scroll.js'
 import { ComponentInternals, LayoutListeners } from './utils.js'
 import { Group, PerspectiveCamera } from 'three'
@@ -11,7 +10,6 @@ import { Group, PerspectiveCamera } from 'three'
 export const Fullscreen = forwardRef<
   ComponentInternals,
   RootProperties & {
-    loadYoga?: () => Promise<Yoga>
     children?: ReactNode
     precision?: number
     attachCamera?: boolean
diff --git a/packages/uikit/src/components/root.tsx b/packages/uikit/src/components/root.tsx
index 416ceaad..08bc1f6e 100644
--- a/packages/uikit/src/components/root.tsx
+++ b/packages/uikit/src/components/root.tsx
@@ -1,4 +1,3 @@
-import { Yoga } from 'yoga-wasm-web'
 import { ReactNode, forwardRef, useEffect, useMemo, useRef } from 'react'
 import { FlexNode, YogaProperties } from '../flex/node.js'
 import { RootGroupProvider, alignmentXMap, alignmentYMap, useLoadYoga } from '../utils.js'
@@ -48,7 +47,6 @@ import { WithClasses, useApplyProperties } from '../properties/default.js'
 import { InstancedGlyphProvider, useGetInstancedGlyphGroup } from '../text/react.js'
 import { PanelProperties } from '../panel/instanced-panel.js'
 import { RootSizeProvider, useApplyResponsiveProperties } from '../responsive.js'
-import { loadYogaFromGH } from '../flex/load-binary.js'
 import { ElementType, OrderInfoProvider, patchRenderOrder, useOrderInfo } from '../order.js'
 import { useApplyPreferredColorSchemeProperties } from '../dark.js'
 import { useApplyActiveProperties } from '../active.js'
@@ -73,7 +71,6 @@ const vectorHelper = new Vector3()
 export const Root = forwardRef<
   ComponentInternals,
   RootProperties & {
-    loadYoga?: () => Promise<Yoga>
     children?: ReactNode
     precision?: number
     anchorX?: keyof typeof alignmentXMap
@@ -99,7 +96,7 @@ export const Root = forwardRef<
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
   )
-  const yoga = useLoadYoga(properties.loadYoga ?? loadYogaFromGH)
+  const yoga = useLoadYoga()
   const distanceToCameraRef = useMemo(() => ({ current: 0 }), [])
   const groupRef = useRef<Group>(null)
   const requestLayout = useDeferredRequestLayoutCalculation()
diff --git a/packages/uikit/src/flex/index.ts b/packages/uikit/src/flex/index.ts
index db8cb885..2ab4094b 100644
--- a/packages/uikit/src/flex/index.ts
+++ b/packages/uikit/src/flex/index.ts
@@ -1,6 +1,4 @@
 export * from './utils.js'
 export * from './setter.js'
-export * from './load-base64.js'
-export * from './load-binary.js'
 export * from './node.js'
 export * from './react.js'
diff --git a/packages/uikit/src/flex/load-base64.ts b/packages/uikit/src/flex/load-base64.ts
deleted file mode 100644
index d3672ffb..00000000
--- a/packages/uikit/src/flex/load-base64.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import createYoga, { Yoga } from 'yoga-wasm-web'
-import { base64 } from './wasm.js'
-import { toByteArray } from 'base64-js'
-
-export function loadYogaBase64(): Promise<Yoga> {
-  return createYoga(toByteArray(base64))
-}
diff --git a/packages/uikit/src/flex/load-binary.ts b/packages/uikit/src/flex/load-binary.ts
deleted file mode 100644
index bf438fc6..00000000
--- a/packages/uikit/src/flex/load-binary.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { initStreaming } from 'yoga-wasm-web'
-
-export async function loadYogaFromGH() {
-  const response = await fetch('https://pmndrs.github.io/uikit/yoga/yoga.wasm')
-  return initStreaming(response)
-}
diff --git a/packages/uikit/src/flex/node.ts b/packages/uikit/src/flex/node.ts
index 015b9b08..ebc7a394 100644
--- a/packages/uikit/src/flex/node.ts
+++ b/packages/uikit/src/flex/node.ts
@@ -1,16 +1,6 @@
 import { Group, Object3D, Vector2Tuple } from 'three'
 import { Signal, batch, computed, effect, signal } from '@preact/signals-core'
-import {
-  EDGE_TOP,
-  EDGE_LEFT,
-  EDGE_RIGHT,
-  EDGE_BOTTOM,
-  Node,
-  Yoga,
-  OVERFLOW_VISIBLE,
-  Overflow,
-  OVERFLOW_SCROLL,
-} from 'yoga-wasm-web'
+import { Edge, Node, Yoga, Overflow } from 'yoga-layout/wasm-async'
 import { setter } from './setter.js'
 import { setMeasureFunc, yogaNodeEqual } from './utils.js'
 import { WithImmediateProperties } from '../properties/immediate.js'
@@ -28,7 +18,7 @@ export class FlexNode implements WithImmediateProperties {
   public readonly relativeCenter = signal<Vector2Tuple>([0, 0])
   public readonly borderInset = signal<Inset>([0, 0, 0, 0])
   public readonly paddingInset = signal<Inset>([0, 0, 0, 0])
-  public readonly overflow = signal<Overflow>(OVERFLOW_VISIBLE)
+  public readonly overflow = signal<Overflow>(Overflow.Visible)
   public readonly maxScrollPosition = signal<Partial<Vector2Tuple>>([undefined, undefined])
   public readonly scrollable = signal<[boolean, boolean]>([false, false])
 
@@ -214,16 +204,16 @@ export class FlexNode implements WithImmediateProperties {
     const relativeCenterY = -(y + height * 0.5 - parentHeight * 0.5)
     updateVector2Signal(this.relativeCenter, relativeCenterX, relativeCenterY)
 
-    const paddingTop = this.yogaNode.getComputedPadding(EDGE_TOP) * this.precision
-    const paddingLeft = this.yogaNode.getComputedPadding(EDGE_LEFT) * this.precision
-    const paddingRight = this.yogaNode.getComputedPadding(EDGE_RIGHT) * this.precision
-    const paddingBottom = this.yogaNode.getComputedPadding(EDGE_BOTTOM) * this.precision
+    const paddingTop = this.yogaNode.getComputedPadding(Edge.Top) * this.precision
+    const paddingLeft = this.yogaNode.getComputedPadding(Edge.Left) * this.precision
+    const paddingRight = this.yogaNode.getComputedPadding(Edge.Right) * this.precision
+    const paddingBottom = this.yogaNode.getComputedPadding(Edge.Bottom) * this.precision
     updateInsetSignal(this.paddingInset, paddingTop, paddingRight, paddingBottom, paddingLeft)
 
-    const borderTop = this.yogaNode.getComputedBorder(EDGE_TOP) * this.precision
-    const borderRight = this.yogaNode.getComputedBorder(EDGE_RIGHT) * this.precision
-    const borderBottom = this.yogaNode.getComputedBorder(EDGE_BOTTOM) * this.precision
-    const borderLeft = this.yogaNode.getComputedBorder(EDGE_LEFT) * this.precision
+    const borderTop = this.yogaNode.getComputedBorder(Edge.Top) * this.precision
+    const borderRight = this.yogaNode.getComputedBorder(Edge.Right) * this.precision
+    const borderBottom = this.yogaNode.getComputedBorder(Edge.Bottom) * this.precision
+    const borderLeft = this.yogaNode.getComputedBorder(Edge.Left) * this.precision
     updateInsetSignal(this.borderInset, borderTop, borderRight, borderBottom, borderLeft)
 
     for (const layoutChangeListener of this.layoutChangeListeners) {
@@ -242,7 +232,7 @@ export class FlexNode implements WithImmediateProperties {
     maxContentWidth -= borderLeft
     maxContentHeight -= borderTop
 
-    if (this.overflow.value === OVERFLOW_SCROLL) {
+    if (this.overflow.value === Overflow.Scroll) {
       maxContentWidth += paddingRight
       maxContentHeight += paddingLeft
 
@@ -263,7 +253,7 @@ export class FlexNode implements WithImmediateProperties {
       updateVector2Signal(this.scrollable, false, false)
     }
 
-    const overflowVisible = this.overflow.value === OVERFLOW_VISIBLE
+    const overflowVisible = this.overflow.value === Overflow.Visible
 
     return [
       x + Math.max(width, overflowVisible ? maxContentWidth : 0),
diff --git a/packages/uikit/src/flex/utils.ts b/packages/uikit/src/flex/utils.ts
index 1c8a6eda..8b6fbcaf 100644
--- a/packages/uikit/src/flex/utils.ts
+++ b/packages/uikit/src/flex/utils.ts
@@ -1,4 +1,4 @@
-import { MeasureFunction, Node } from 'yoga-wasm-web'
+import { Node, MeasureFunction } from 'yoga-layout/wasm-async'
 
 export function yogaNodeEqual(n1: Node, n2: Node): boolean {
   return (n1 as any)['L'] === (n2 as any)['L']
diff --git a/packages/uikit/src/index.ts b/packages/uikit/src/index.ts
index 66b9da07..8fed1ea2 100644
--- a/packages/uikit/src/index.ts
+++ b/packages/uikit/src/index.ts
@@ -5,7 +5,6 @@ export {
   type PreferredColorScheme,
 } from './dark.js'
 export { FontFamilyProvider } from './text/react.js'
-export { loadYogaBase64 } from './flex/load-base64.js'
 export { useRootSize } from './responsive.js'
 export type { ComponentInternals } from './components/utils.js'
 export type { MaterialClass } from './panel/react.js'
diff --git a/packages/uikit/src/text/react.tsx b/packages/uikit/src/text/react.tsx
index 4ea60660..8ba87e80 100644
--- a/packages/uikit/src/text/react.tsx
+++ b/packages/uikit/src/text/react.tsx
@@ -8,7 +8,7 @@ import { ClippingRect } from '../clipping.js'
 import { ManagerCollection, useGetBatchedProperties } from '../properties/utils.js'
 import { readReactive, useSignalEffect } from '../utils.js'
 import { loadCachedFont } from './cache.js'
-import { MEASURE_MODE_UNDEFINED, MeasureFunction } from 'yoga-wasm-web'
+import { MeasureFunction, MeasureMode } from 'yoga-layout/wasm-async'
 import { Font } from './font.js'
 import { GlyphLayout, GlyphLayoutProperties, buildGlyphLayout, measureGlyphLayout } from './layout.js'
 import { useFrame, useThree } from '@react-three/fiber'
@@ -258,7 +258,7 @@ export function useMeasureFunc(
         const wordBreak = get('wordBreak') ?? 'break-word'
 
         return (width, widthMode) => {
-          const availableWidth = widthMode === MEASURE_MODE_UNDEFINED ? undefined : width
+          const availableWidth = widthMode === MeasureMode.Undefined ? undefined : width
           return measureGlyphLayout(
             (propertiesRef.current = {
               font,
diff --git a/packages/uikit/src/utils.tsx b/packages/uikit/src/utils.tsx
index eb64bb01..57c7ade0 100644
--- a/packages/uikit/src/utils.tsx
+++ b/packages/uikit/src/utils.tsx
@@ -4,7 +4,7 @@ import { Vector2Tuple, BufferAttribute, Color, Group } from 'three'
 import { Color as ColorRepresentation } from '@react-three/fiber'
 import { Inset } from './flex/node.js'
 import { ManagerCollection, Properties } from './properties/utils.js'
-import { Yoga } from 'yoga-wasm-web'
+import { Yoga, loadYoga } from 'yoga-layout/wasm-async'
 
 export const alignmentXMap = { left: 0.5, center: 0, right: -0.5 }
 export const alignmentYMap = { top: -0.5, center: 0, bottom: 0.5 }
@@ -18,10 +18,10 @@ export function useSignalEffect(fn: () => (() => void) | void, deps: Array<any>)
 
 let yoga: Signal<Yoga | undefined> | undefined
 
-export function useLoadYoga(fn: () => Promise<Yoga>): Signal<Yoga | undefined> {
+export function useLoadYoga(): Signal<Yoga | undefined> {
   if (yoga == null) {
     const result = (yoga = signal<Yoga | undefined>(undefined))
-    fn().then((value) => (result.value = value))
+    loadYoga().then((value) => (result.value = value))
   }
   return yoga
 }
diff --git a/packages/uikit/tests/flex.spec.ts b/packages/uikit/tests/flex.spec.ts
index 8886b807..34910b1a 100644
--- a/packages/uikit/tests/flex.spec.ts
+++ b/packages/uikit/tests/flex.spec.ts
@@ -1,24 +1,19 @@
 import { expect } from 'chai'
 import {
-  ALIGN_CENTER,
-  ALIGN_FLEX_END,
-  ALIGN_SPACE_AROUND,
-  DISPLAY_NONE,
-  EDGE_BOTTOM,
-  EDGE_LEFT,
-  EDGE_RIGHT,
-  FLEX_DIRECTION_ROW_REVERSE,
-  JUSTIFY_SPACE_EVENLY,
+  Align,
+  Overflow,
   Node,
-  OVERFLOW_SCROLL,
-  POSITION_TYPE_ABSOLUTE,
-  UNIT_PERCENT,
-  UNIT_POINT,
-  WRAP_WRAP_REVERSE,
   Yoga,
-} from 'yoga-wasm-web'
-import { EDGE_TOP } from 'yoga-wasm-web'
-import { FlexNode, YogaProperties, loadYogaBase64, setMeasureFunc, setter } from '../src/flex/index.js'
+  Edge,
+  Display,
+  FlexDirection,
+  Wrap,
+  Justify,
+  PositionType,
+  Unit,
+  loadYoga,
+} from 'yoga-layout/wasm-async'
+import { FlexNode, YogaProperties, setMeasureFunc, setter } from '../src/flex/index.js'
 import { signal } from '@preact/signals-core'
 
 const testValues: YogaProperties = {
@@ -60,22 +55,22 @@ const testValues: YogaProperties = {
 }
 
 export const rawTestValues = {
-  alignContent: ALIGN_CENTER,
-  alignItems: ALIGN_FLEX_END,
-  alignSelf: ALIGN_SPACE_AROUND,
+  alignContent: Align.Center,
+  alignItems: Align.FlexEnd,
+  alignSelf: Align.SpaceAround,
   aspectRatio: 2,
   borderBottom: 3,
   borderLeft: 4,
   borderRight: 5,
   borderTop: 6,
-  display: DISPLAY_NONE,
+  display: Display.None,
   flexBasis: 7,
-  flexDirection: FLEX_DIRECTION_ROW_REVERSE,
+  flexDirection: FlexDirection.RowReverse,
   flexGrow: 8,
   flexShrink: 9,
-  flexWrap: WRAP_WRAP_REVERSE,
+  flexWrap: Wrap.WrapReverse,
   height: 10,
-  justifyContent: JUSTIFY_SPACE_EVENLY,
+  justifyContent: Justify.SpaceEvenly,
   marginBottom: 11,
   marginLeft: 12,
   marginRight: 13,
@@ -84,7 +79,7 @@ export const rawTestValues = {
   maxWidth: 16,
   minHeight: 17,
   minWidth: 18,
-  overflow: OVERFLOW_SCROLL,
+  overflow: Overflow.Scroll,
   paddingBottom: 19,
   paddingLeft: 20,
   paddingRight: 21,
@@ -93,7 +88,7 @@ export const rawTestValues = {
   positionLeft: 24,
   positionRight: 25,
   positionTop: 26,
-  positionType: POSITION_TYPE_ABSOLUTE,
+  positionType: PositionType.Absolute,
   width: 50, //50%
 }
 
@@ -109,16 +104,16 @@ function getRawValue(property: string, node: Node): any {
   for (const propertyWithEdge of propertiesWithEdge) {
     if (property.startsWith(propertyWithEdge)) {
       if (property.endsWith('Top')) {
-        return flatten(node[`get${capitalize(property.slice(0, -3))}` as 'getBorder'](EDGE_TOP))
+        return flatten(node[`get${capitalize(property.slice(0, -3))}` as 'getBorder'](Edge.Top))
       }
       if (property.endsWith('Bottom')) {
-        return flatten(node[`get${capitalize(property.slice(0, -6))}` as 'getBorder'](EDGE_BOTTOM))
+        return flatten(node[`get${capitalize(property.slice(0, -6))}` as 'getBorder'](Edge.Bottom))
       }
       if (property.endsWith('Right')) {
-        return flatten(node[`get${capitalize(property.slice(0, -5))}` as 'getBorder'](EDGE_RIGHT))
+        return flatten(node[`get${capitalize(property.slice(0, -5))}` as 'getBorder'](Edge.Right))
       }
       if (property.endsWith('Left')) {
-        return flatten(node[`get${capitalize(property.slice(0, -4))}` as 'getBorder'](EDGE_LEFT))
+        return flatten(node[`get${capitalize(property.slice(0, -4))}` as 'getBorder'](Edge.Left))
       }
     }
   }
@@ -132,7 +127,7 @@ describe('set & get properties', () => {
   const rawValues: any = {}
 
   before(async () => {
-    yoga = await loadYogaBase64().catch(console.error)
+    yoga = await loadYoga().catch(console.error)
     node = yoga.Node.create()
   })
 
@@ -174,12 +169,12 @@ describe('set & get properties', () => {
   it('it should set value with and without precision', () => {
     setter.width(node, 0.01, 1)
     expect(node.getWidth()).to.deep.equal({
-      unit: UNIT_POINT,
+      unit: Unit.Point,
       value: 100,
     })
     setter.width(node, 0.01, '50%')
     expect(node.getWidth()).to.deep.equal({
-      unit: UNIT_PERCENT,
+      unit: Unit.Percent,
       value: 50,
     })
   })
@@ -199,7 +194,7 @@ describe('flex node', () => {
   let child2: FlexNode
 
   before(async () => {
-    yoga = await loadYogaBase64()
+    yoga = await loadYoga()
     parent = new FlexNode(signal(yoga), 0.01, 1, () => {})
     child1 = parent.createChild()
     child2 = parent.createChild()
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0f467b7d..4529b155 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -422,9 +422,6 @@ importers:
       '@preact/signals-core':
         specifier: ^1.5.1
         version: 1.5.1
-      base64-js:
-        specifier: ^1.5.1
-        version: 1.5.1
       chalk:
         specifier: ^5.3.0
         version: 5.3.0
@@ -437,9 +434,9 @@ importers:
       prompts:
         specifier: ^2.4.2
         version: 2.4.2
-      yoga-wasm-web:
-        specifier: ^0.3.3
-        version: 0.3.3
+      yoga-layout:
+        specifier: ^2.0.1
+        version: 2.0.1
       zod:
         specifier: ^3.22.4
         version: 3.22.4
@@ -477,9 +474,6 @@ importers:
       three:
         specifier: ^0.161.0
         version: 0.161.0
-      wasmwrap:
-        specifier: ^1.0.0
-        version: 1.0.0
 
 packages:
 
@@ -3130,11 +3124,6 @@ packages:
       type-fest: 1.4.0
     dev: true
 
-  /camelcase@5.3.1:
-    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
-    engines: {node: '>=6'}
-    dev: true
-
   /camelcase@6.3.0:
     resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
     engines: {node: '>=10'}
@@ -3256,14 +3245,6 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
-  /cliui@6.0.0:
-    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
-    dependencies:
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wrap-ansi: 6.2.0
-    dev: true
-
   /cliui@7.0.4:
     resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
     dependencies:
@@ -4100,14 +4081,6 @@ packages:
       to-regex-range: 5.0.1
     dev: true
 
-  /find-up@4.1.0:
-    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
-    engines: {node: '>=8'}
-    dependencies:
-      locate-path: 5.0.0
-      path-exists: 4.0.0
-    dev: true
-
   /find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -4956,13 +4929,6 @@ packages:
       xhr: 2.6.0
       xtend: 4.0.2
 
-  /locate-path@5.0.0:
-    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
-    engines: {node: '>=8'}
-    dependencies:
-      p-locate: 4.1.0
-    dev: true
-
   /locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -5550,13 +5516,6 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
-  /p-limit@2.3.0:
-    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
-    engines: {node: '>=6'}
-    dependencies:
-      p-try: 2.2.0
-    dev: true
-
   /p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -5564,13 +5523,6 @@ packages:
       yocto-queue: 0.1.0
     dev: true
 
-  /p-locate@4.1.0:
-    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
-    engines: {node: '>=8'}
-    dependencies:
-      p-limit: 2.3.0
-    dev: true
-
   /p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
@@ -5578,11 +5530,6 @@ packages:
       p-limit: 3.1.0
     dev: true
 
-  /p-try@2.2.0:
-    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
-    engines: {node: '>=6'}
-    dev: true
-
   /package-json@6.5.0:
     resolution: {integrity: sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==}
     engines: {node: '>=8'}
@@ -6027,10 +5974,6 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
-  /require-main-filename@2.0.0:
-    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
-    dev: true
-
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -6171,10 +6114,6 @@ packages:
       randombytes: 2.1.0
     dev: true
 
-  /set-blocking@2.0.0:
-    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
-    dev: true
-
   /set-function-length@1.2.1:
     resolution: {integrity: sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==}
     engines: {node: '>= 0.4'}
@@ -6953,15 +6892,6 @@ packages:
     optionalDependencies:
       fsevents: 2.3.3
 
-  /wasmwrap@1.0.0:
-    resolution: {integrity: sha512-USSwELYC5NunOCD+GnBuiWfGB4mp9Pluhl5ulgcoYRBLuMk3mfBwWvE5bW3LPEljlbksjjJHjHk+hX6azFreBQ==}
-    hasBin: true
-    dependencies:
-      chalk: 4.1.2
-      minimist: 1.2.8
-      yargs: 15.4.1
-    dev: true
-
   /webgl-constants@1.1.1:
     resolution: {integrity: sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg==}
 
@@ -7005,10 +6935,6 @@ packages:
       is-weakset: 2.0.2
     dev: true
 
-  /which-module@2.0.1:
-    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
-    dev: true
-
   /which-typed-array@1.1.14:
     resolution: {integrity: sha512-VnXFiIW8yNn9kIHN88xvZ4yOWchftKDsRJ8fEPacX/wl1lOvBrhsJ/OeJCXq7B0AaijRuqgzSKalJoPk+D8MPg==}
     engines: {node: '>= 0.4'}
@@ -7042,15 +6968,6 @@ packages:
     resolution: {integrity: sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==}
     dev: true
 
-  /wrap-ansi@6.2.0:
-    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
-    engines: {node: '>=8'}
-    dependencies:
-      ansi-styles: 4.3.0
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-    dev: true
-
   /wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
@@ -7105,10 +7022,6 @@ packages:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
 
-  /y18n@4.0.3:
-    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
-    dev: true
-
   /y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -7120,14 +7033,6 @@ packages:
   /yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
-  /yargs-parser@18.1.3:
-    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
-    engines: {node: '>=6'}
-    dependencies:
-      camelcase: 5.3.1
-      decamelize: 1.2.0
-    dev: true
-
   /yargs-parser@20.2.4:
     resolution: {integrity: sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==}
     engines: {node: '>=10'}
@@ -7153,23 +7058,6 @@ packages:
       is-plain-obj: 2.1.0
     dev: true
 
-  /yargs@15.4.1:
-    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
-    engines: {node: '>=8'}
-    dependencies:
-      cliui: 6.0.0
-      decamelize: 1.2.0
-      find-up: 4.1.0
-      get-caller-file: 2.0.5
-      require-directory: 2.1.1
-      require-main-filename: 2.0.0
-      set-blocking: 2.0.0
-      string-width: 4.2.3
-      which-module: 2.0.1
-      y18n: 4.0.3
-      yargs-parser: 18.1.3
-    dev: true
-
   /yargs@16.2.0:
     resolution: {integrity: sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==}
     engines: {node: '>=10'}
@@ -7206,8 +7094,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /yoga-wasm-web@0.3.3:
-    resolution: {integrity: sha512-N+d4UJSJbt/R3wqY7Coqs5pcV0aUj2j9IaQ3rNj9bVCLld8tTGKRa2USARjnvZJWVx1NDmQev8EknoczaOQDOA==}
+  /yoga-layout@2.0.1:
+    resolution: {integrity: sha512-tT/oChyDXelLo2A+UVnlW9GU7CsvFMaEnd9kVFsaiCQonFAXd3xrHhkLYu+suwwosrAEQ746xBU+HvYtm1Zs2Q==}
     dev: false
 
   /zod@3.22.4: