diff --git a/src/system/Sandpack.ts b/src/system/Sandpack.ts
index ae854ed4..863305bf 100644
--- a/src/system/Sandpack.ts
+++ b/src/system/Sandpack.ts
@@ -68,6 +68,18 @@ export interface SandpackConfig {
    * The list of sandpack presets that can be used.
    */
   presets: Array<SandpackPreset>
+
+  /**
+   * The list of sandpack panes to be displayed.
+   */
+  panes?: {
+    /** the console pane, off by defult */
+    console?: boolean
+    /** the preview pane, on by defult */
+    preview?: boolean
+    /** the tests pane, on by defult */
+    tests?: boolean
+  }
 }
 
 const defaultSnippetContent = `
diff --git a/src/ui/NodeDecorators/SandpackEditor.tsx b/src/ui/NodeDecorators/SandpackEditor.tsx
index 03232ad7..bd0c9859 100644
--- a/src/ui/NodeDecorators/SandpackEditor.tsx
+++ b/src/ui/NodeDecorators/SandpackEditor.tsx
@@ -1,4 +1,12 @@
-import { SandpackCodeEditor, SandpackLayout, SandpackPreview, SandpackProvider, useSandpack } from '@codesandbox/sandpack-react'
+import {
+  SandpackCodeEditor,
+  SandpackConsole,
+  SandpackLayout,
+  SandpackPreview,
+  SandpackProvider,
+  SandpackTests,
+  useSandpack
+} from '@codesandbox/sandpack-react'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import React from 'react'
 import { useEmitterValues, usePublisher } from '../../system/EditorSystemComponent'
@@ -65,7 +73,13 @@ export const SandpackEditor = ({ nodeKey, code, meta, onChange, focusEmitter }:
     >
       <SandpackLayout>
         <SandpackCodeEditor showLineNumbers showInlineErrors ref={codeMirrorRef} />
-        <SandpackPreview />
+
+        {/*show console and tests if explicitly set */}
+        {config.panes?.console ? <SandpackConsole /> : null}
+        {config.panes?.tests ? <SandpackTests /> : null}
+
+        {/*show preview by default */}
+        {config.panes?.preview === false ? null : <SandpackPreview />}
       </SandpackLayout>
       <CodeUpdateEmitter onChange={wrappedOnChange} snippetFileName={preset.snippetFileName} />
     </SandpackProvider>