custom parser

packages/site/src/components/Playground.tsx

···
 import { lx } from "prototypey";
 import { useMonaco } from "@monaco-editor/react";
 import type * as Monaco from "monaco-editor";
-import { parseAsString, useQueryState } from "nuqs";
-import LZString from "lz-string";
+import { useQueryState } from "nuqs";
 import MonacoEditor from "@monaco-editor/react";
+import { parseAsCompressed } from "../utils/parsers";
 
 let tsWorkerInstance: Monaco.languages.typescript.TypeScriptWorker | null =
 	null;
 
 export function Playground() {
-	const [compressedCode, setCompressedCode] = useQueryState(
+	const [code, setCode] = useQueryState(
 		"code",
-		parseAsString.withDefault(""),
+		parseAsCompressed.withDefault(DEFAULT_CODE),
 	);
-
-	const initialCode =
-		compressedCode && compressedCode.trim() !== ""
-			? LZString.decompressFromEncodedURIComponent(compressedCode) ||
-				DEFAULT_CODE
-			: DEFAULT_CODE;
-
-	const [code, setCode] = useState(initialCode);
 	const [output, setOutput] = useState({ json: "", typeInfo: "", error: "" });
 	const [editorReady, setEditorReady] = useState(false);
 	const [theme, setTheme] = useState<"vs-light" | "vs-dark">(
···
 
 	const handleCodeChange = (newCode: string) => {
 		setCode(newCode);
-		// Compress and update URL
-		const compressed = LZString.compressToEncodedURIComponent(newCode);
-		setCompressedCode(compressed);
 	};
 
 	const handleEditorReady = () => {
···
 	theme: "vs-light" | "vs-dark";
 }) {
 	// Calculate line counts to size editors appropriately
-	const codeLines = code.split("\n").length;
-	const jsonLines = json.split("\n").length;
-
 	const estimateWrappedLines = (text: string, maxCharsPerLine: number) => {
 		return text.split("\n").reduce((total, line) => {
 			const wrappedLines = Math.ceil(

packages/site/src/utils/parsers.ts

···
+import { createParser } from "nuqs";
+import LZString from "lz-string";
+
+/**
+ * Custom nuqs parser for LZ-string compressed values
+ *
+ * This parser automatically compresses values when serializing to URL
+ * and decompresses when parsing from URL, keeping URLs shorter for large data.
+ */
+export const parseAsCompressed = createParser({
+	parse(query: string): string | null {
+		if (!query || query.trim() === "") {
+			return null;
+		}
+
+		// Decompress the value from the URL
+		const decompressed = LZString.decompressFromEncodedURIComponent(query);
+
+		// Return null if decompression fails
+		return decompressed || null;
+	},
+
+	serialize(value: string): string {
+		// Compress the value for the URL
+		return LZString.compressToEncodedURIComponent(value);
+	},
+
+	eq(a: string, b: string): boolean {
+		return a === b;
+	},
+});