From 1e801b3ae93ff35e58a6f313c162e0f026dcade2 Mon Sep 17 00:00:00 2001
From: CREDO23 <bakerathierry@gmail.com>
Date: Thu, 23 Jul 2026 20:47:06 +0200
Subject: [PATCH] feat: render api reference schemas with JsonView

---
 .../[workspace_id]/playground/components/api-reference.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-reference.tsx b/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-reference.tsx
index 05434b953..ba7312d7b 100644
--- a/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-reference.tsx
+++ b/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-reference.tsx
@@ -2,6 +2,7 @@
 
 import { Check, ChevronRight, Copy } from "lucide-react";
 import { useMemo, useState } from "react";
+import { JsonView } from "@/components/json-view";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { BACKEND_URL } from "@/lib/env-config";
@@ -51,9 +52,9 @@ function SchemaBlock({ title, schema }: { title: string; schema: Record<string,
 			</summary>
 			<div className="relative border-t border-border/60">
 				<CopyButton text={json} />
-				<pre className="max-h-[360px] overflow-auto p-3 pr-20 text-xs">
-					<code>{json}</code>
-				</pre>
+				<div className="max-h-[360px] overflow-auto p-3 pr-20">
+					<JsonView src={schema} collapsed={2} />
+				</div>
 			</div>
 		</details>
 	);