diff --git a/src/app/demos/compound-parsers/page.tsx b/src/app/demos/compound-parsers/page.tsx
new file mode 100644
index 00000000..4aab4f07
--- /dev/null
+++ b/src/app/demos/compound-parsers/page.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import { parseAsJson, useQueryState } from '../../../../dist'
+import { parseAsArrayOf } from '../../../lib'
+
+const escaped = '-_.!~*\'()?#/&,"`<>{}[]@$£%+=:;'
+
+export default function CompoundParsersDemo() {
+  const [code, setCode] = useQueryState(
+    'code',
+    parseAsJson<any>().withDefault({})
+  )
+  const [array, setArray] = useQueryState(
+    'array',
+    parseAsArrayOf(parseAsJson<any>()).withDefault([])
+  )
+  return (
+    <>
+      <h1>Compound parsers</h1>
+      <section>
+        <h2>JSON</h2>
+        <button onClick={() => setCode({})}>Set to {'{}'}</button>
+        <button onClick={() => setCode([])}>Set to {'[]'}</button>
+        <button onClick={() => setCode([1, 2, 3])}>Set to {'[1,2,3]'}</button>
+        <button onClick={() => setCode({ hello: 'world' })}>
+          Set to {'{hello:"world"}'}
+        </button>
+        <button onClick={() => setCode({ escaped })}>
+          Set to escaped chars
+        </button>
+        <pre>
+          <code>{JSON.stringify(code, null, 2)}</code>
+        </pre>
+      </section>
+      <section>
+        <h2>Arrays</h2>
+        <button onClick={() => setArray(null)}>Clear</button>
+        <button onClick={() => setArray(a => [...a, {}])}>Push {'{}'}</button>
+        <button onClick={() => setArray(a => [...a, [1, 2, 3]])}>
+          Push {'[1,2,3]'}
+        </button>
+        <button onClick={() => setArray(a => [...a, { hello: 'world' }])}>
+          Push hello world
+        </button>
+        <button onClick={() => setArray(a => [...a, { escaped }])}>
+          Push escaped chars
+        </button>
+        <pre>
+          <code>{JSON.stringify(array, null, 2)}</code>
+        </pre>
+      </section>
+    </>
+  )
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2c4231e2..52b3259d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,7 +5,8 @@ const demos = [
   'subscribeToQueryUpdates',
   'batching',
   'server-side-parsing',
-  'hex-colors'
+  'hex-colors',
+  'compound-parsers'
 ]
 
 export default function IndexPage() {
diff --git a/src/lib/parsers.ts b/src/lib/parsers.ts
index c2cc2d0c..f4b7fba9 100644
--- a/src/lib/parsers.ts
+++ b/src/lib/parsers.ts
@@ -224,7 +224,7 @@ export function parseAsJson<T>(parser?: (value: unknown) => T) {
   return createParser({
     parse: query => {
       try {
-        const obj = JSON.parse(decodeURIComponent(query))
+        const obj = JSON.parse(query)
         if (typeof parser === 'function') {
           return parser(obj)
         } else {
@@ -234,7 +234,7 @@ export function parseAsJson<T>(parser?: (value: unknown) => T) {
         return null
       }
     },
-    serialize: value => encodeURIComponent(JSON.stringify(value))
+    serialize: value => JSON.stringify(value)
   })
 }