processing
diff --git a/‎src/components/CodeEmbed/frameForServer.tsx‎
Lines changed: 4 additions & 0 deletions b/‎src/components/CodeEmbed/frameForServer.tsx‎
Lines changed: 4 additions & 0 deletions
diff --git a/‎src/components/CodeEmbed/index.jsx‎
Lines changed: 5 additions & 1 deletion b/‎src/components/CodeEmbed/index.jsx‎
Lines changed: 5 additions & 1 deletion
diff --git a/‎src/components/EditableSketch/index.astro‎
Lines changed: 2 additions & 1 deletion b/‎src/components/EditableSketch/index.astro‎
Lines changed: 2 additions & 1 deletion
diff --git a/‎src/components/SketchEmbed/index.astro‎
Lines changed: 17 additions & 9 deletions b/‎src/components/SketchEmbed/index.astro‎
Lines changed: 17 additions & 9 deletions
diff --git a/‎src/content/tutorials/config.ts‎
Lines changed: 1 addition & 0 deletions b/‎src/content/tutorials/config.ts‎
Lines changed: 1 addition & 0 deletions
@@ -6,6 +6,7 @@ interface CodeBundle {
   htmlBody?: string;
   js?: string;
   base?: string;
+  scripts?: string[]
 }
 
 /*
@@ -29,6 +30,7 @@ ${code.css || ""}
 <body>${code.htmlBody || ""}</body>
 <script id="code" type="text/javascript">${code.js || ""}</script>
 <script src="${cdnLibraryUrl}"></script>
+${(code.scripts || []).map(src => `<script src="${src}"></script>`).join('\n')}
 `.replace(/\u00A0/g, " ");
 
 export interface CodeFrameProps {
@@ -38,6 +40,7 @@ export interface CodeFrameProps {
   height?: number | string;
   width?: number | string;
   base?: string;
+  scripts?: string[]
 }
 
 /*
@@ -88,6 +91,7 @@ export const CodeFrameForServer = (props: CodeFrameProps) => {
           css: props.cssCode,
           htmlBody: props.htmlBodyCode,
           base: props.base,
+          scripts: props.scripts,
         })}
         sandbox="allow-scripts allow-popups allow-modals allow-forms"
         aria-label="Code Preview"
 
@@ -23,6 +23,7 @@ import { Icon } from "../Icon";
  *   allowSideBySide?: boolean
  *   fullWidth?: boolean
  *   includeSound?: boolean
+ *   scripts?: string[]
  * }
  */
 export const CodeEmbed = (props) => {
@@ -96,7 +97,10 @@ export const CodeEmbed = (props) => {
               base={props.base}
               frameRef={codeFrameRef}
               lazyLoad={props.lazyLoad}
-              scripts={props.includeSound ? [cdnSoundUrl] : []}
+              scripts={[
+                ...(props.includeSound ? [cdnSoundUrl] : []),
+                ...(props.scripts ?? []),
+              ]}
             />
           </div>
           <div className={`flex gap-2.5 ${largeSketch ? "flex-row" : "md:flex-row lg:flex-col"}`}>
 
@@ -6,6 +6,7 @@ interface Props {
   width?: number;
   height?: number;
   base?: string;
+  scripts?: string[];
 }
 
 const { props } = Astro;
@@ -22,4 +23,4 @@ const vertical = !previewWidth || previewWidth > 200
 
 ---
 
-<CodeEmbed client:load initialValue={props.code.trim()} previewWidth={previewWidth} previewHeight={previewHeight} base={props.base} previewable editable allowSideBySide={!vertical} fullWidth={!vertical} />
+<CodeEmbed client:load initialValue={props.code.trim()} previewWidth={previewWidth} previewHeight={previewHeight} base={props.base} previewable editable allowSideBySide={!vertical} fullWidth={!vertical} scripts={props.scripts} />
@@ -1,25 +1,33 @@
 ---
 import { CodeFrameForServer } from "../CodeEmbed/frameForServer";
+import { CodeFrame } from "../CodeEmbed/frame";
 
 interface Props {
   code: string;
   cssCode?: string;
   bodyCode?: string;
   width?: number | string;
   height?: number | string;
+  scripts?: string[];
 }
 
 const defaultHeight = 400,
   defaultWidth = "100%";
 
-const { code, cssCode, bodyCode, height, width } = Astro.props;
+const { code, cssCode, bodyCode, height, width, scripts, hideOffscreen } = Astro.props;
 // A component that displays a full-width sketch without showing its code.
----
 
-<CodeFrameForServer
-  jsCode={code}
-  cssCode={cssCode}
-  htmlBodyCode={bodyCode}
-  height={height || defaultHeight}
-  width={width || defaultWidth}
-/>
+const frameProps = {
+  jsCode: code,
+  cssCode: cssCode,
+  htmlBodyCode: bodyCode,
+  height: height || defaultHeight,
+  width: width || defaultWidth,
+  scripts,
+};
+---
+{hideOffscreen ? (
+  <CodeFrame client:only {...frameProps} />
+) : (
+  <CodeFrameForServer {...frameProps} />
+)}
@@ -2,6 +2,7 @@ import { z, defineCollection } from "astro:content";
 import { relatedContent } from "../shared";
 
 export const categories = [
+  "2.0",
   "introduction",
   "drawing",
   "web-design",