diff --git a/package.json b/package.json
index 1a5fd3e..1928fd7 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "@antfu/ni": "^0.23.0",
     "@antfu/utils": "^0.7.10",
     "@iconify-json/svg-spinners": "^1.1.3",
-    "@shikijs/core": "^1.14.1",
+    "@shikijs/core": "^1.15.0",
     "@types/adm-zip": "^0.5.5",
     "@types/cson": "^7.20.3",
     "@types/js-yaml": "^4.0.9",
diff --git a/playground/package.json b/playground/package.json
index aba6b1d..90958e4 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -10,8 +10,8 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@shikijs/core": "^1.15.0",
     "@vueuse/core": "^11.0.3",
-    "shiki": "1.0.0-beta.0",
     "vue": "^3.4.38",
     "vue-router": "^4.4.3"
   },
diff --git a/playground/src/App.vue b/playground/src/App.vue
index 201739d..1956620 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { HighlighterCore } from 'shiki/core'
-import { getHighlighterCore } from 'shiki/core'
+import type { HighlighterCore } from '@shikijs/core'
+import { createHighlighterCore, createJavaScriptRegexEngine, createWasmOnigEngine } from '@shikijs/core'
 import { themes } from '../../packages/tm-themes/index'
 import { grammars, injections } from '../../packages/tm-grammars/index'
+import { dependencies } from '../package.json'
+import SegmentControl from './SegmentControl.vue'
+import { engine, grammar, isDark, theme } from './state'
+import Badge from './Badge.vue'
 
-const isDark = useDark()
-
-const theme = useStorage('tm-theme', 'vitesse-dark')
-const grammar = useStorage('tm-grammar', 'javascript')
 const embedded = ref<string[]>([])
 const error = ref<any>(null)
 
@@ -20,6 +20,10 @@ const input = ref('')
 const output = ref('')
 const example = ref('')
 const isFetching = ref(false)
+const duration = ref(0)
+
+const jsEngine = createJavaScriptRegexEngine()
+const wasmEngine = createWasmOnigEngine(() => import('@shikijs/core/wasm-inlined'))
 
 const filteredGrammars = computed(() => {
   const searchTerm = searchInputGrammar.value.trim().toLowerCase()
@@ -50,8 +54,10 @@ let highlighter: HighlighterCore | null = null
 let fetchingTimer: ReturnType<typeof setTimeout> | undefined
 
 async function run(fetchInput = true) {
+  highlighter?.dispose()
   highlighter = null
   error.value = null
+  duration.value = 0
   if (fetchingTimer)
     clearTimeout(fetchingTimer)
   fetchingTimer = setTimeout(() => {
@@ -83,18 +89,19 @@ async function run(fetchInput = true) {
     embedded.value = Array.from(langs.keys())
       .filter(l => l !== grammar.value)
 
-    highlighter = await getHighlighterCore({
+    highlighter = await createHighlighterCore({
       themes: [
         themeObject,
       ],
       langs: await Promise.all(Array.from(langs.values())),
-      loadWasm: () => import('shiki/wasm'),
+      engine: engine.value === 'js' ? jsEngine : wasmEngine,
     })
 
     highlight()
   }
   catch (e) {
     error.value = e
+    duration.value = 0
     throw e
   }
   finally {
@@ -106,10 +113,13 @@ async function run(fetchInput = true) {
 
 function highlight() {
   if (highlighter) {
+    const start = performance.now()
     const result = highlighter.codeToHtml(input.value, {
       lang: grammar.value,
       theme: theme.value,
     })
+    const end = performance.now()
+    duration.value = end - start
     output.value = result
   }
 }
@@ -157,7 +167,7 @@ function share() {
 }
 
 watch(
-  [theme, grammar],
+  [theme, grammar, engine],
   (n, o) => {
     params.theme = theme.value
     params.grammar = grammar.value
@@ -196,7 +206,15 @@ if (import.meta.hot) {
       <a href="https://github.com/shikijs/textmate-grammars-themes" target="_blank" text-lg hover="text-primary">
         Shiki TextMate Grammar & Theme Playground
       </a>
+      <Badge :text="`Shiki v${dependencies['@shikijs/core'].replace('^', '')}`" text-sm :color="160" />
       <div flex-auto />
+      <SegmentControl
+        v-model:modelValue="engine"
+        :options="[
+          { label: 'Oniguruma', value: 'wasm' },
+          { label: 'JavaScript', value: 'js' },
+        ]"
+      />
       <a border="~ base rounded" p2 hover="bg-active" href="https://github.com/shikijs/textmate-grammars-themes" target="_blank">
         <div i-carbon-logo-github />
       </a>
@@ -334,6 +352,9 @@ if (import.meta.hot) {
           <div i-svg-spinners-270-ring-with-bg />
           Loading...
         </div>
+        <div v-else-if="duration" op50 text-sm text-right mr-1>
+          Highlighting finished in <code font-bold>{{ duration.toFixed(2) }}ms</code>
+        </div>
       </div>
     </div>
   </div>
diff --git a/playground/src/Badge.vue b/playground/src/Badge.vue
new file mode 100644
index 0000000..dfa1620
--- /dev/null
+++ b/playground/src/Badge.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { isDark } from './state'
+
+const props = withDefaults(
+  defineProps<{
+    text?: string
+    color?: boolean | number
+    as?: string
+    size?: string
+  }>(),
+  {
+    color: true,
+  },
+)
+
+function getHashColorFromString(
+  name: string,
+  opacity: number | string = 1,
+) {
+  if (name === 'JavaScript')
+    return getHsla(45, opacity)
+
+  let hash = 0
+  for (let i = 0; i < name.length; i++)
+    hash = name.charCodeAt(i) + ((hash << 5) - hash)
+  const hue = hash % 360
+  return getHsla(hue, opacity)
+}
+
+function getHsla(
+  hue: number,
+  opacity: number | string = 1,
+) {
+  const saturation = hue === -1
+    ? 0
+    : isDark.value ? 60 : 100
+  const lightness = isDark.value ? 70 : 20
+  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`
+}
+
+const style = computed(() => {
+  if (!props.text || props.color === false)
+    return {}
+  return {
+    color: typeof props.color === 'number'
+      ? getHsla(props.color)
+      : getHashColorFromString(props.text),
+    background: typeof props.color === 'number'
+      ? getHsla(props.color, 0.1)
+      : getHashColorFromString(props.text, 0.1),
+  }
+})
+const sizeClasses = computed(() => {
+  switch (props.size || 'sm') {
+    case 'sm':
+      return 'px-1.5 text-11px leading-1.6em'
+  }
+  return ''
+})
+</script>
+
+<template>
+  <component :is="as || 'span'" ws-nowrap rounded :class="sizeClasses" :style>
+    <slot>
+      <span v-text="props.text" />
+    </slot>
+  </component>
+</template>
diff --git a/playground/src/SegmentControl.vue b/playground/src/SegmentControl.vue
new file mode 100644
index 0000000..3fffbfd
--- /dev/null
+++ b/playground/src/SegmentControl.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Badge from './Badge.vue'
+
+defineProps<{
+  options: { label: string, value: string }[]
+  modelValue: string
+}>()
+
+defineEmits<{
+  (event: 'update:modelValue', newValue: string): void
+}>()
+</script>
+
+<template>
+  <div
+    flex="~ gap-1 items-center" border="~ base rounded" bg-subtle p1
+  >
+    <Badge
+      v-for="option in options"
+      :key="option.value"
+      class="px-2 py-1 text-xs font-mono"
+      :class="option.value === modelValue ? '' : 'op50'"
+      :color="option.value === modelValue"
+      :aria-pressed="option.value === modelValue"
+      size="none"
+      :text="option.label"
+      as="button"
+      @click="$emit('update:modelValue', option.value)"
+    />
+  </div>
+</template>
diff --git a/playground/src/state.ts b/playground/src/state.ts
new file mode 100644
index 0000000..b0b9b75
--- /dev/null
+++ b/playground/src/state.ts
@@ -0,0 +1,5 @@
+export const isDark = useDark()
+
+export const theme = useStorage('tm-theme', 'vitesse-dark')
+export const grammar = useStorage('tm-grammar', 'javascript')
+export const engine = useStorage<'wasm' | 'js'>('tm-use-engine', 'wasm')
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1450595..1f5ece7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ importers:
         specifier: ^1.1.3
         version: 1.1.3
       '@shikijs/core':
-        specifier: ^1.14.1
-        version: 1.14.1
+        specifier: ^1.15.0
+        version: 1.15.0
       '@types/adm-zip':
         specifier: ^0.5.5
         version: 0.5.5
@@ -138,12 +138,12 @@ importers:
 
   playground:
     dependencies:
+      '@shikijs/core':
+        specifier: ^1.15.0
+        version: 1.15.0
       '@vueuse/core':
         specifier: ^11.0.3
         version: 11.0.3(vue@3.4.38(typescript@5.5.4))
-      shiki:
-        specifier: 1.0.0-beta.0
-        version: 1.0.0-beta.0
       vue:
         specifier: ^3.4.38
         version: 3.4.38(typescript@5.5.4)
@@ -1334,11 +1334,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@shikijs/core@1.0.0-beta.0':
-    resolution: {integrity: sha512-uicyrkx379Q5sxQuGV3kduHPWIAkjxmeA5A4J6syscx8wiEyIV06i/Q6s9GeKLCb857Hi90H8e/FoFSbcjnZsw==}
-
-  '@shikijs/core@1.14.1':
-    resolution: {integrity: sha512-KyHIIpKNaT20FtFPFjCQB5WVSTpLR/n+jQXhWHWVUMm9MaOaG9BGOG0MSyt7yA4+Lm+4c9rTc03tt3nYzeYSfw==}
+  '@shikijs/core@1.15.0':
+    resolution: {integrity: sha512-wUcOmlcEN/ub8i4pcjnAABExIUo7xwhZTBa43CwHu5KO9e/zLJlXYYNjeE+5K7W8VHiVtvRC2wcuaXyd0yG8rg==}
 
   '@sindresorhus/merge-streams@2.3.0':
     resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
@@ -3601,9 +3598,6 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  shiki@1.0.0-beta.0:
-    resolution: {integrity: sha512-CcP0IhEDQ3LWfJC44cfxfId9pjJi9Nephl8DxgrL4tKWprI/oz6deZyL0vB+XWxhTx/1uonzWQKaSQPwKx5dTA==}
-
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
@@ -5119,9 +5113,7 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.21.1':
     optional: true
 
-  '@shikijs/core@1.0.0-beta.0': {}
-
-  '@shikijs/core@1.14.1':
+  '@shikijs/core@1.15.0':
     dependencies:
       '@types/hast': 3.0.4
 
@@ -7800,10 +7792,6 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
-  shiki@1.0.0-beta.0:
-    dependencies:
-      '@shikijs/core': 1.0.0-beta.0
-
   siginfo@2.0.0: {}
 
   signal-exit@4.1.0: {}