diff --git a/apps/local/package.json b/apps/local/package.json
index b652b39f5..2ed8fe9c6 100644
--- a/apps/local/package.json
+++ b/apps/local/package.json
@@ -17,11 +17,8 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.23",
     "@radix-ui/react-slot": "^1.3.3",
-    "@shikijs/core": "^3.23.0",
-    "@shikijs/engine-javascript": "^3.23.0",
-    "@shikijs/langs": "^3.23.0",
-    "@shikijs/themes": "^3.23.0",
     "@tailwindcss/vite": "^4.3.3",
+    "@twinkleplop/json": "0.1.4",
     "@uidotdev/usehooks": "^2.4.1",
     "@vercel/analytics": "^2.0.1",
     "class-variance-authority": "^0.7.1",
diff --git a/apps/local/src/App.integration.test.tsx b/apps/local/src/App.integration.test.tsx
index bd434522a..94746ce5d 100644
--- a/apps/local/src/App.integration.test.tsx
+++ b/apps/local/src/App.integration.test.tsx
@@ -211,7 +211,7 @@ describe('local receiver to viewer integration', () => {
       fireEvent.click(screen.getByRole('button', { name: 'Copy JSON' }))
       expect(await screen.findByRole('status', { name: 'JSON copied' })).not.toBeNull()
       await waitFor(() => {
-        expect(screen.getByTestId('highlighted-json').querySelector('.shiki')).not.toBeNull()
+        expect(screen.getByTestId('highlighted-json').querySelector('.json-view-code')).not.toBeNull()
       })
       fireEvent.click(events[0]!)
       fireEvent.click(screen.getByRole('tab', { name: 'JSON' }))
diff --git a/apps/local/src/components/json-view.tsx b/apps/local/src/components/json-view.tsx
index 5ae09ba69..f926c046a 100644
--- a/apps/local/src/components/json-view.tsx
+++ b/apps/local/src/components/json-view.tsx
@@ -1,21 +1,12 @@
-import { createHighlighterCore } from '@shikijs/core'
-import { createJavaScriptRegexEngine } from '@shikijs/engine-javascript'
-import json from '@shikijs/langs/json'
-import githubDark from '@shikijs/themes/github-dark'
-import githubLight from '@shikijs/themes/github-light'
+import { language } from '@twinkleplop/json'
 import { Check, Copy } from 'lucide-react'
-import { useEffect, useState } from 'react'
 import { useCopyToClipboard } from '@uidotdev/usehooks'
 
 type JsonViewProps = {
   code: string
 }
 
-const highlighter = createHighlighterCore({
-  engine: createJavaScriptRegexEngine(),
-  langs: [json],
-  themes: [githubLight, githubDark],
-})
+const highlight = language()
 
 function formatJson(code: string) {
   try {
@@ -25,72 +16,43 @@ function formatJson(code: string) {
   }
 }
 
-/** Render JSON with Shiki only after its containing event has been expanded. */
+/** A string token immediately followed by `:` is an object key. */
+function highlightJson(code: string) {
+  return highlight(code, {
+    class_name: 'json-view-code',
+    has_classes: true,
+    token: (type, _start, end) => {
+      if (type === 'string' && code[end] === ':') {
+        return { class: 'tok-key' }
+      }
+    },
+  })
+}
+
+/** Render JSON with Twinkleplop after its containing event has been expanded. */
 export function JsonView({ code }: JsonViewProps) {
-  const [html, setHtml] = useState<string>()
   const [copiedText, copyToClipboard] = useCopyToClipboard()
   const formattedCode = formatJson(code)
+  const html = highlightJson(formattedCode)
   const copied = copiedText === code
 
-  useEffect(() => {
-    let disposed = false
-
-    void highlighter
-      .then((instance) =>
-        instance.codeToHtml(formattedCode, {
-          lang: 'json',
-          themes: {
-            light: 'github-light',
-            dark: 'github-dark',
-          },
-          defaultColor: false,
-        })
-      )
-      .then((result) => {
-        if (!disposed) {
-          setHtml(result)
-        }
-      })
-      .catch(() => {
-        // Keep the readable, escaped source fallback if syntax highlighting cannot load.
-      })
-
-    return () => {
-      disposed = true
-    }
-  }, [formattedCode])
-
   const copyJson = () => {
     void copyToClipboard(code)
   }
 
-  const copyButton = (
-    <button
-      type="button"
-      aria-label="Copy JSON"
-      className="inline-flex items-center gap-1.5 rounded-md border border-border bg-background/90 px-2 py-1 text-xs font-medium text-muted-foreground shadow-xs backdrop-blur transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-      onClick={copyJson}
-    >
-      {copied ? <Check className="size-3.5 text-emerald-500" /> : <Copy className="size-3.5" />}
-      {copied ? 'Copied' : 'Copy JSON'}
-    </button>
-  )
-
-  if (!html) {
-    return (
-      <div className="relative">
-        <div className="absolute top-2 right-3 z-10">{copyButton}</div>
-        {copied ? <span role="status" aria-label="JSON copied" className="sr-only">JSON copied</span> : null}
-        <pre data-testid="highlighted-json" className="json-view whitespace-pre-wrap break-words p-3 pr-28 text-xs leading-6">
-          {formattedCode}
-        </pre>
-      </div>
-    )
-  }
-
   return (
     <div className="relative">
-      <div className="absolute top-2 right-3 z-10">{copyButton}</div>
+      <div className="absolute top-2 right-3 z-10">
+        <button
+          type="button"
+          aria-label="Copy JSON"
+          className="inline-flex items-center gap-1.5 rounded-md border border-border bg-background/90 px-2 py-1 text-xs font-medium text-muted-foreground shadow-xs backdrop-blur transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          onClick={copyJson}
+        >
+          {copied ? <Check className="size-3.5 text-emerald-500" /> : <Copy className="size-3.5" />}
+          {copied ? 'Copied' : 'Copy JSON'}
+        </button>
+      </div>
       {copied ? <span role="status" aria-label="JSON copied" className="sr-only">JSON copied</span> : null}
       <div
         data-testid="highlighted-json"
diff --git a/apps/local/src/index.css b/apps/local/src/index.css
index 2dd5dfc1f..448991bd5 100644
--- a/apps/local/src/index.css
+++ b/apps/local/src/index.css
@@ -82,16 +82,35 @@
     @apply m-0 break-words bg-transparent p-0 font-mono text-inherit whitespace-pre-wrap;
   }
 
-  .json-view .shiki {
-    background-color: transparent !important;
-    padding: 0 !important;
+  .json-view .json-view-code {
+    background-color: transparent;
+    padding: 0;
+    color: #24292e;
   }
 
-  .json-view .shiki span {
-    color: var(--shiki-light);
+  .json-view .tok.string {
+    color: #032f62;
   }
 
-  .dark .json-view .shiki span {
-    color: var(--shiki-dark);
+  .json-view .tok.number,
+  .json-view .tok.boolean,
+  .json-view .tok.keyword,
+  .json-view .tok.tok-key {
+    color: #005cc5;
+  }
+
+  .dark .json-view .json-view-code {
+    color: #e1e4e8;
+  }
+
+  .dark .json-view .tok.string {
+    color: #9ecbff;
+  }
+
+  .dark .json-view .tok.number,
+  .dark .json-view .tok.boolean,
+  .dark .json-view .tok.keyword,
+  .dark .json-view .tok.tok-key {
+    color: #79b8ff;
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a2da95d59..34830e0ab 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -73,21 +73,12 @@ importers:
       '@radix-ui/react-slot':
         specifier: ^1.3.3
         version: 1.3.3(@types/react@19.2.18)(react@19.2.8)
-      '@shikijs/core':
-        specifier: ^3.23.0
-        version: 3.23.0
-      '@shikijs/engine-javascript':
-        specifier: ^3.23.0
-        version: 3.23.0
-      '@shikijs/langs':
-        specifier: ^3.23.0
-        version: 3.23.0
-      '@shikijs/themes':
-        specifier: ^3.23.0
-        version: 3.23.0
       '@tailwindcss/vite':
         specifier: ^4.3.3
         version: 4.3.3(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(tsx@4.23.5)(yaml@2.9.0))
+      '@twinkleplop/json':
+        specifier: 0.1.4
+        version: 0.1.4
       '@uidotdev/usehooks':
         specifier: ^2.4.1
         version: 2.4.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -2453,6 +2444,12 @@ packages:
     peerDependencies:
       typescript: '>=5.7.2'
 
+  '@twinkleplop/core@0.2.1':
+    resolution: {integrity: sha512-e/5EokljcDDsGvh55n0QO+HXDMVbpUhkNpg/QCWlY0Igw4a0qTB7fbJWtFrcRhBqfg+H7Wtw07A6U8YADm9J/A==}
+
+  '@twinkleplop/json@0.1.4':
+    resolution: {integrity: sha512-lal3aivE56eP+i5JhK4eQAN1vOKbyft2Mbbc86+RrZwynN4f9MylQxwJbw/o1dTt5OY0ewO3UGtPaR5XCmctJA==}
+
   '@tybys/wasm-util@0.10.3':
     resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==}
 
@@ -7769,6 +7766,12 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
+  '@twinkleplop/core@0.2.1': {}
+
+  '@twinkleplop/json@0.1.4':
+    dependencies:
+      '@twinkleplop/core': 0.2.1
+
   '@tybys/wasm-util@0.10.3':
     dependencies:
       tslib: 2.8.1