diff --git a/deno.json b/deno.json
index 0a1e21b2b..e94daa95d 100644
--- a/deno.json
+++ b/deno.json
@@ -15,7 +15,10 @@
   },
   "fmt": {
     "files": {
-      "exclude": ["static/", "README.md"]
+      "exclude": [
+        "static/",
+        "README.md"
+      ]
     }
   },
   "importMap": "./import_map.json",
@@ -23,4 +26,4 @@
     "jsx": "react-jsx",
     "jsxImportSource": "preact"
   }
-}
+}
\ No newline at end of file
diff --git a/engine/manifest/manifestGen.ts b/engine/manifest/manifestGen.ts
index ba45b6f3b..a5ca3ab36 100644
--- a/engine/manifest/manifestGen.ts
+++ b/engine/manifest/manifestGen.ts
@@ -107,8 +107,8 @@ export const defaultRoutes: {
   },
   {
     block: "routes",
-    from: ["$live/routes/live/release.ts", "deco/routes/live/release.ts"],
-    key: "./routes/live/release.ts",
+    from: ["$live/routes/live/release.tsx", "deco/routes/live/release.tsx"],
+    key: "./routes/live/release.tsx",
     ref: "$live_release",
   },
   {
diff --git a/live.gen.ts b/live.gen.ts
index 40081c7e5..7e028e69a 100644
--- a/live.gen.ts
+++ b/live.gen.ts
@@ -17,8 +17,8 @@ import * as $$$$7 from "./routes/live/workflows/run.ts";
 import * as $$$$8 from "./routes/live/workbench.ts";
 import * as $$$$9 from "./routes/live/previews/index.tsx";
 import * as $$$$10 from "./routes/live/previews/[...block].tsx";
-import * as $$$$11 from "./routes/live/release.ts";
-import * as $$$$12 from "./routes/live/_meta.ts";
+import * as $$$$11 from "./routes/live/_meta.ts";
+import * as $$$$12 from "./routes/live/release.tsx";
 import * as $$$$13 from "./routes/[...catchall].tsx";
 import * as $$$$$$0 from "./handlers/routesSelection.ts";
 import * as $$$$$$1 from "./handlers/router.ts";
@@ -68,14 +68,14 @@ const manifest = {
     "./routes/[...catchall].tsx": $$$$13,
     "./routes/deco/render.ts": $$$$2,
     "./routes/index.tsx": $$$$0,
-    "./routes/live/_meta.ts": $$$$12,
+    "./routes/live/_meta.ts": $$$$11,
     "./routes/live/editorData.ts": $$$$6,
     "./routes/live/inspect/[...block].ts": $$$$3,
     "./routes/live/invoke/[...key].ts": $$$$4,
     "./routes/live/invoke/index.ts": $$$$5,
     "./routes/live/previews/[...block].tsx": $$$$10,
     "./routes/live/previews/index.tsx": $$$$9,
-    "./routes/live/release.ts": $$$$11,
+    "./routes/live/release.tsx": $$$$12,
     "./routes/live/workbench.ts": $$$$8,
     "./routes/live/workflows/run.ts": $$$$7,
   },
diff --git a/plugins/deco.ts b/plugins/deco.ts
index 4c304a02f..3756adda5 100644
--- a/plugins/deco.ts
+++ b/plugins/deco.ts
@@ -4,7 +4,7 @@ import { SourceMap } from "../blocks/app.ts";
 import { buildDecoState, injectLiveStateForPath } from "../blocks/route.ts";
 import { DECO_FILE_NAME, newFsProvider } from "../engine/releases/fs.ts";
 import { Release } from "../engine/releases/provider.ts";
-import { AppManifest, SiteInfo, createResolver } from "../mod.ts";
+import { AppManifest, createResolver, SiteInfo } from "../mod.ts";
 import {
   default as Render,
   handler as entrypoint,
@@ -21,7 +21,10 @@ import {
   handler as previewHandler,
 } from "../routes/live/previews/[...block].tsx";
 import { default as PreviewsPage } from "../routes/live/previews/index.tsx";
-import { handler as releaseHandler } from "../routes/live/release.ts";
+import {
+  default as ReleaseViewer,
+  handler as releaseHandler,
+} from "../routes/live/release.tsx";
 import { handler as workbenchHandler } from "../routes/live/workbench.ts";
 import { handler as workflowHandler } from "../routes/live/workflows/run.ts";
 
@@ -67,6 +70,7 @@ export default function decoPlugin(opt?: Options): Plugin {
     {
       paths: ["/live/release", "/.decofile"],
       handler: releaseHandler,
+      component: ReleaseViewer,
     },
     {
       paths: ["/live/workbench"],
diff --git a/routes/live/release.ts b/routes/live/release.ts
deleted file mode 100644
index 33cbcf0bd..000000000
--- a/routes/live/release.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { HandlerContext } from "$fresh/server.ts";
-import { DecoState } from "../../mod.ts";
-
-export const handler = async (
-  _req: Request,
-  ctx: HandlerContext<unknown, DecoState>,
-) => {
-  return new Response(
-    JSON.stringify(await ctx.state.release.state()),
-    {
-      headers: {
-        "Content-Type": "application/json",
-      },
-    },
-  );
-};
diff --git a/routes/live/release.tsx b/routes/live/release.tsx
new file mode 100644
index 000000000..430700212
--- /dev/null
+++ b/routes/live/release.tsx
@@ -0,0 +1,67 @@
+import { HandlerContext, PageProps } from "$fresh/server.ts";
+import { DecoState } from "../../mod.ts";
+import { groupObjectBy } from "deco/utils/fn/groupObjectBy.ts";
+
+export const handler = async (
+  _req: Request,
+  ctx: HandlerContext<unknown, DecoState>,
+) => {
+  const viewer = new URL(_req.url).searchParams.has("viewer");
+  const release = await ctx.state.release.state();
+
+  console.log("viewer", viewer);
+  if (viewer) {
+    return ctx.render({ release });
+  }
+
+  return new Response(
+    JSON.stringify(release),
+    {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  );
+};
+
+function ReleaseViewer({
+  data: {
+    release,
+  },
+}: PageProps<{ release: any }>) {
+  if (!release) {
+    throw new Error("Release not found");
+  }
+
+  const grouped = groupObjectBy(release, (key, value) => {
+    if (value?.__resolveType?.contains("/sections/")) {
+      return "section";
+    }
+    if (value?.__resolveType?.contains("/loaders/")) {
+      return "loader";
+    }
+    return "other";
+  });
+
+  return (
+    <div>
+      <div>
+        <h1>Release</h1>
+        <span>number of keys: {Object.keys(release).length}</span>
+      </div>
+      <div>
+        keys: {Object.keys(release).map((a) => <p>{a}</p>)}
+      </div>
+      <div>
+        <span>Grouped JSON:</span>
+        <pre>{JSON.stringify(grouped, null, 2)}</pre>
+      </div>
+      <div>
+        <span>Raw JSON:</span>
+        <pre>{JSON.stringify(release, null, 2)}</pre>
+      </div>
+    </div>
+  );
+}
+
+export default ReleaseViewer;
diff --git a/utils/fn/groupObjectBy.ts b/utils/fn/groupObjectBy.ts
new file mode 100644
index 000000000..552a14224
--- /dev/null
+++ b/utils/fn/groupObjectBy.ts
@@ -0,0 +1,12 @@
+// implement in typescript groupObjectBy function using reduce, which traverses an object and return a new object where the keys are the return of the function and the values are the keys of the original object that return the same value.
+// example: groupBy({a: "b", c: "d", f: "b"}, (i) => i) // {b: ['a', 'f'], d: ['c']}
+
+export const groupObjectBy = (obj: object, fn: Function) => {
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    const group = fn(value);
+    return {
+      ...acc,
+      [group]: [...(acc[group] || []), key],
+    };
+  }, {});
+};