diff --git a/src/JsonBrowser/DetailsPrePanel.svelte b/src/JsonBrowser/DetailsPrePanel.svelte
new file mode 100644
index 0000000..3eb68ed
--- /dev/null
+++ b/src/JsonBrowser/DetailsPrePanel.svelte
@@ -0,0 +1,30 @@
+
+
+<script>
+    export let jsonData;
+    export let summary;
+</script>
+
+<details>
+    <summary>{summary}</summary>
+    <pre><code>{JSON.stringify(jsonData, null, 2)}</code></pre>
+  </details>
+
+
+<style>
+
+details {
+    font-size: 1.1em;
+    text-align: left;
+  }
+  pre {
+    margin-top: 10px;
+    color: #faebd7;
+    background-color: #2c3e50;
+    padding: 10px;
+    font-size: 14px;
+    border-radius: 10px;
+    overflow: auto;
+  }
+
+</style>
\ No newline at end of file
diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
index 7e9cb45..379ac15 100644
--- a/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
+++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
@@ -2,6 +2,7 @@
   import { getJson, formatBytes, getChunkAndShardShapes, getArrayDtype } from "../../../utils";
   import Cube3D from "./Cube3D.svelte";
   import ChunkLoader from "./ChunkLoader.svelte";
+  import DetailsPrePanel from "../../../JsonBrowser/DetailsPrePanel.svelte";
 
   export let source;
   export let path;
@@ -82,10 +83,9 @@
 
     <Cube3D {zarray} />
 
-    <details>
-      <summary>{path}</summary>
-      <pre><code>{JSON.stringify(zarray, null, 2)}</code></pre>
-    </details>
+    <div style="margin: 0 15px">
+      <DetailsPrePanel jsonData={zarray} summary={path} />
+    </div>
   {:catch error}
     <p style="color: red">{error.message}</p>
   {/await}
@@ -101,13 +101,6 @@
     text-align: center;
   }
 
-  pre {
-    color: #faebd7;
-    background-color: #2c3e50;
-    padding: 10px;
-    font-size: 14px;
-  }
-
   table {
     background-color: white;
     font-size: 14px;
@@ -133,18 +126,4 @@
   a:visited {
     color: #ff512f;
   }
-
-  details {
-    font-size: 1.1em;
-    margin: 0 15px;
-    text-align: left;
-  }
-  pre {
-    margin-top: 10px;
-    color: #faebd7;
-    background-color: #2c3e50;
-    padding: 10px;
-    font-size: 14px;
-    border-radius: 10px;
-  }
 </style>
diff --git a/src/JsonValidator/RoCrate/index.svelte b/src/JsonValidator/RoCrate/index.svelte
new file mode 100644
index 0000000..9a19696
--- /dev/null
+++ b/src/JsonValidator/RoCrate/index.svelte
@@ -0,0 +1,18 @@
+<script>
+  import DetailsPrePanel from "../../JsonBrowser/DetailsPrePanel.svelte";
+  import { getJson } from "../../utils.js";
+
+  export let source;
+
+  const promise = getJson(source + "/ro-crate-metadata.json");
+</script>
+
+{#await promise}
+  <p>Loading ro-crate-metadata.json...</p>
+{:then jsonData}
+  {#if jsonData}
+    <DetailsPrePanel {jsonData} summary="Ro-Crate Metadata" />
+  {/if}
+{:catch error}
+  <p>No ro-crate-metadata.json found</p>
+{/await}
diff --git a/src/JsonValidator/index.svelte b/src/JsonValidator/index.svelte
index 52e008a..75e9778 100644
--- a/src/JsonValidator/index.svelte
+++ b/src/JsonValidator/index.svelte
@@ -1,6 +1,7 @@
 <script>
   import MultiscaleArrays from "./MultiscaleArrays/index.svelte";
   import Plate from "./Plate/index.svelte";
+  import RoCrate from "./RoCrate/index.svelte";
   import Well from "./Well/index.svelte"
   import JsonBrowser from "../JsonBrowser/index.svelte";
   import CheckMark from "../CheckMark.svelte";
@@ -74,6 +75,8 @@
     <JsonBrowser name="" version={msVersion || CURRENT_VERSION} contents={rootAttrs} expanded />
   </div>
 
+  <RoCrate version={msVersion} {source}></RoCrate>
+
   {#await labelsPromise}
     <p>checking for labels...</p>
   {:then labelsAttrs}