(null);
+
+ useEffect(() => {
+ return () => {
+ if (resetTimer.current !== null) {
+ window.clearTimeout(resetTimer.current);
+ }
+ };
+ }, []);
+
+ const handleCopy = async () => {
+ const copyCommand = async () => {
+ if (navigator.clipboard?.writeText) {
+ await navigator.clipboard.writeText(command);
+ return true;
+ }
+
+ const textarea = document.createElement('textarea');
+ textarea.value = command;
+ textarea.setAttribute('readonly', '');
+ textarea.style.position = 'absolute';
+ textarea.style.opacity = '0';
+ document.body.appendChild(textarea);
+
+ const selection = document.getSelection();
+ const originalRange =
+ selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+
+ textarea.select();
+ const succeeded = document.execCommand('copy');
+ document.body.removeChild(textarea);
+
+ if (originalRange && selection) {
+ selection.removeAllRanges();
+ selection.addRange(originalRange);
+ }
+
+ return succeeded;
+ };
+
+ try {
+ const didCopy = await copyCommand();
+
+ if (!didCopy) {
+ throw new Error('Copy command failed');
+ }
+
+ setCopied(true);
+
+ if (resetTimer.current !== null) {
+ window.clearTimeout(resetTimer.current);
+ }
+
+ resetTimer.current = window.setTimeout(() => {
+ setCopied(false);
+ }, 2000);
+ } catch (error) {
+ console.error('Failed to copy install command', error);
+ setCopied(false);
+ }
+ };
+
+ return (
+
+
+
+
+ {/** biome-ignore lint/a11y/useSemanticElements: aria-live is used for screen readers */}
+
+ {copied ? 'Copied!' : command}
+
+
+ {copied ? 'done' : 'copy'}
+
+
+
+
+ GitHub
+
+
+
+ );
+}
+
+function Divider() {
+ return (
+
+ );
+}
+
+const LINES = 7;
+
+function GridLine({ className }: { className?: string }) {
+ return (
+
+
+ {Array.from({ length: LINES }).map((_, index) => (
+ // biome-ignore lint/suspicious/noArrayIndexKey: it's fine
+
+ ))}
+
const sandbox = getSandbox(env.Sandbox, "node-app" ); // Write a simple Express server await sandbox.writeFile( "/workspace/app.js" , \`const express = require('express'); const app = express(); app.get('/', (req, res) => { res.json({ message: 'Hello from Cloudflare!' }); }); app.listen(3000);\` ); // Install dependencies and start the server await sandbox.exec( "npm init -y" ); await sandbox.exec( "npm install express" ); const server = await sandbox.startProcess( "node app.js" ); // Expose it to the internet const preview = await sandbox.exposePort(3000); console.log( \`API available at: \${ preview.url }\` ); import { getSandbox } from "@cloudflare/sandbox" ; // Export the Sandbox class in your Worker export { Sandbox } from "@cloudflare/sandbox" ; export default { async fetch(request : Request, env : Env) { const sandbox = getSandbox(env.Sandbox, "test-env" ); // Clone a repository await sandbox.gitCheckout( "https://github.com/cloudflare/agents" ); // Run tests const testResult = await sandbox.exec( "npm test" ); return new Response( JSON.stringify({ tests: testResult.exitCode === 0 ? "passed" : "failed" , output: testResult.stdout, }) ); }, }; import { getSandbox } from '@cloudflare/sandbox' ; export default { async fetch(request : Request, env : Env) { const sandbox = getSandbox(env.Sandbox, 'user-123' ); // Create a Python execution context const ctx = await sandbox.createCodeContext({
+ language: 'python' }); // Execute Python code with automatic result capture const result = await sandbox.runCode( \`import pandas as pd data = {'product': ['A', 'B', 'C'], 'sales': [100, 200, 150]} df = pd.DataFrame(data) df['sales'].sum() # Last expression is automatically returned \` , { context: ctx }); return Response.json({ result: result.results?.[0]?.text, logs: result.logs }); } }; import { getSandbox } from '@cloudflare/sandbox' ; export default { async fetch(request : Request, env : Env) { const sandbox = getSandbox(env.Sandbox, 'user-123' ); // Create a project structure await sandbox.mkdir('/workspace/project/src' , {
+ recursive: true }); // Write files await sandbox.writeFile( '/workspace/project/package.json' , JSON .stringify({ name: 'my-app' , version: '1.0.0' , }); // Read a file back const content = await sandbox.readFile(
+ '/workspace/project/src/package.json'
+ ); return Response.json({ content }); } }; const sandbox = getSandbox(env.Sandbox, "preview-app" ); // Start a Flask web server await sandbox.writeFile( "/workspace/server.py" , \`from flask import Flask app = Flask(__name__) @app.route('/') def hello(): return 'Hello from Cloudflare Sandbox!' app.run(host='0.0.0.0', port=5000)\` ); // Install dependencies and start server await sandbox.exec( "pip install flask" ); await sandbox.startProcess( "python server.py" ); // Expose with public preview URL const preview = await sandbox.exposePort(5000); console.log( \`Preview URL: \${ preview.url }\` ); for i in range (5): print ( f"Hello Python! On step {i}" ) time .sleep(1) import { getSandbox, connect } from '@cloudflare/sandbox' ; export default { async fetch(request : Request, env : Env) { const sandbox = getSandbox( env.Sandbox, 'websocket-app' ); // Check for WebSocket upgrade const upgrade = request.headers .get( 'Upgrade' )?.toLowerCase(); if (upgrade === 'websocket' ) { // Initialize server on first connection if (!initialized.has( 'websocket-app' )) { await sandbox.writeFile( '/workspace/server.js' , \`Bun.serve({ port: 8080, fetch(req, server) { server.upgrade(req); }, websocket: { message(ws, msg) { ws.send(\\\`Echo: \\\${msg}\\\`); } } });\` ); await sandbox.startProcess( 'bun /workspace/server.js' ); initialized.add( 'websocket-app' ); } // Connect to WebSocket server return await connect(sandbox, request, 8080); } return new Response( 'Not a WebSocket request' ); } }; (null);
+
+ useEffect(() => {
+ return () => {
+ if (resetTimer.current !== null) {
+ window.clearTimeout(resetTimer.current);
+ }
+ };
+ }, []);
+
+ const handleCopy = async () => {
+ const copyCommand = async () => {
+ if (navigator.clipboard?.writeText) {
+ await navigator.clipboard.writeText(command);
+ return true;
+ }
+
+ const textarea = document.createElement('textarea');
+ textarea.value = command;
+ textarea.setAttribute('readonly', '');
+ textarea.style.position = 'absolute';
+ textarea.style.opacity = '0';
+ document.body.appendChild(textarea);
+
+ const selection = document.getSelection();
+ const originalRange =
+ selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+
+ textarea.select();
+ const succeeded = document.execCommand('copy');
+ document.body.removeChild(textarea);
+
+ if (originalRange && selection) {
+ selection.removeAllRanges();
+ selection.addRange(originalRange);
+ }
+
+ return succeeded;
+ };
+
+ try {
+ const didCopy = await copyCommand();
+
+ if (!didCopy) {
+ throw new Error('Copy command failed');
+ }
+
+ setCopied(true);
+
+ if (resetTimer.current !== null) {
+ window.clearTimeout(resetTimer.current);
+ }
+
+ resetTimer.current = window.setTimeout(() => {
+ setCopied(false);
+ }, 2000);
+ } catch (error) {
+ console.error('Failed to copy install command', error);
+ setCopied(false);
+ }
+ };
+
+ return (
+
+
+
+
+ {/** biome-ignore lint/a11y/useSemanticElements: aria-live is used for screen readers */}
+
+ {copied ? 'Copied!' : command}
+
+
+ {copied ? 'done' : 'copy'}
+
+
+
+
+ GitHub
+
+
+
+ );
+}
diff --git a/sites/sandbox/src/components/file.tsx b/sites/sandbox/src/components/file.tsx
new file mode 100644
index 00000000..316e765e
--- /dev/null
+++ b/sites/sandbox/src/components/file.tsx
@@ -0,0 +1,23 @@
+export function File() {
+ return (
+
+ );
+}
diff --git a/sites/sandbox/src/components/grid.tsx b/sites/sandbox/src/components/grid.tsx
new file mode 100644
index 00000000..7b9b0b31
--- /dev/null
+++ b/sites/sandbox/src/components/grid.tsx
@@ -0,0 +1,175 @@
+import clsx from 'clsx';
+import {
+ type ComponentPropsWithoutRef,
+ type CSSProperties,
+ type ReactNode,
+ useId,
+ useState
+} from 'react';
+import { DotPattern, StripePattern } from '../stripe-pattern';
+
+type CoordinateProps = {
+ x?: number;
+ y?: number;
+ height?: number;
+ width?: number;
+};
+
+export function GridBox({
+ x = 0,
+ y = 0,
+ height = 1,
+ width = 1,
+ style,
+ className,
+ ...props
+}: CoordinateProps & ComponentPropsWithoutRef<'div'>) {
+ return (
+
+ );
+}
+
+export function CodeBlock({ children }: { children: string }) {
+ const [copied, setCopied] = useState(false);
+
+ const extractPlainText = (html: string): string => {
+ // Create a temporary element to parse the HTML
+ const temp = document.createElement('div');
+ temp.innerHTML = html;
+ return temp.textContent || temp.innerText || '';
+ };
+
+ const handleCopy = async () => {
+ try {
+ const plainText = extractPlainText(children);
+ await navigator.clipboard.writeText(plainText);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (err) {
+ console.error('Failed to copy:', err);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Copy button */}
+
+ {copied ? (
+
+ Copied
+
+ ) : (
+
+ Copy
+
+ )}
+
+
+
+
+
+
+
+
+ {children}
+
+ {Array.from({ length: count }).map((_, index) => (
+
+ {text}
+
+ ))}
+ {text}
+
+ );
+}
diff --git a/sites/sandbox/src/globals.css b/sites/sandbox/src/globals.css
new file mode 100644
index 00000000..79235445
--- /dev/null
+++ b/sites/sandbox/src/globals.css
@@ -0,0 +1,144 @@
+@import 'tailwindcss';
+
+/* Font face declarations */
+@font-face {
+ font-family: 'Inter';
+ src: url('/fonts/inter/Inter.var.woff2') format('woff2');
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Inter';
+ src: url('/fonts/inter/Inter-Italic.var.woff2') format('woff2');
+ font-weight: 100 900;
+ font-style: italic;
+ font-display: swap;
+}
+
+/* IBM Plex Mono will be loaded from Google Fonts via link tag in HTML */
+
+:root {
+ --background: var(--color-neutral-100);
+ --foreground: var(--color-neutral-950);
+ --font-sans: 'Inter', system-ui, sans-serif;
+ --font-mono: 'IBM Plex Mono', monospace;
+ --color-orange-800: #ea580c;
+}
+
+@theme inline {
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --font-sans: var(--font-sans);
+ --font-title: var(--font-title);
+ /* --font-mono: 'Google Sans Code', monospace; */
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --background: #0a0a0a;
+ --foreground: #ededed;
+ --color-orange-800: #fb923c;
+ }
+}
+
+body {
+ background: var(--background);
+ color: var(--foreground);
+ font-family: var(--font-sans);
+}
+
+.title {
+ letter-spacing: -0.05em;
+}
+
+/* Tube animations */
+.tube-path {
+ stroke-dasharray: 6 28;
+ stroke-dashoffset: 0;
+ animation: tube-path-flow var(--tube-duration, 0.8s) linear infinite;
+ animation-delay: var(--tube-delay, 0s);
+ animation-direction: var(--tube-direction, normal);
+ opacity: 0.9;
+}
+
+.tube-bar {
+ position: relative;
+ overflow: hidden;
+}
+
+.tube-bar::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(
+ 90deg,
+ transparent 0%,
+ rgba(234, 88, 12, 0.7) 50%,
+ transparent 100%
+ );
+ /* biome-ignore lint/suspicious/noDuplicateProperties: it's fine */
+ background: linear-gradient(
+ 90deg,
+ transparent 0%,
+ color-mix(in srgb, var(--color-orange-800) 70%, transparent) 50%,
+ transparent 100%
+ );
+ opacity: 0.7;
+ transform: translateX(-100%);
+ animation: tube-bar-horizontal var(--tube-duration, 0.8s) linear infinite;
+ animation-delay: var(--tube-delay, 0s);
+ animation-direction: var(--tube-direction, normal);
+ pointer-events: none;
+}
+
+.tube-bar-vertical::after {
+ background: linear-gradient(
+ 180deg,
+ transparent 0%,
+ rgba(234, 88, 12, 0.7) 50%,
+ transparent 100%
+ );
+ /* biome-ignore lint/suspicious/noDuplicateProperties: it's fine */
+ background: linear-gradient(
+ 180deg,
+ transparent 0%,
+ color-mix(in srgb, var(--color-orange-800) 70%, transparent) 50%,
+ transparent 100%
+ );
+ transform: translateY(-100%);
+ animation: tube-bar-vertical var(--tube-duration, 0.8s) linear infinite;
+ animation-delay: var(--tube-delay, 0s);
+ animation-direction: var(--tube-direction, normal);
+}
+
+@keyframes tube-path-flow {
+ to {
+ stroke-dashoffset: -34;
+ }
+}
+
+@keyframes tube-bar-horizontal {
+ to {
+ transform: translateX(100%);
+ }
+}
+
+@keyframes tube-bar-vertical {
+ to {
+ transform: translateY(100%);
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .tube-path {
+ animation: none;
+ }
+
+ .tube-bar::after,
+ .tube-bar-vertical::after {
+ animation: none;
+ transform: none;
+ }
+}
diff --git a/sites/sandbox/src/layouts/Layout.astro b/sites/sandbox/src/layouts/Layout.astro
new file mode 100644
index 00000000..8c294175
--- /dev/null
+++ b/sites/sandbox/src/layouts/Layout.astro
@@ -0,0 +1,78 @@
+---
+export interface Props {
+ title?: string;
+ description?: string;
+}
+
+const {
+ title = 'Sandbox SDK',
+ description = "Run sandboxed code environments on Cloudflare's edge network",
+} = Astro.props;
+---
+
+
+
+
+ {title}
+
+ Sandbox
+
+
+
+ );
+}
diff --git a/sites/sandbox/src/main.tsx b/sites/sandbox/src/main.tsx
new file mode 100644
index 00000000..8931e813
--- /dev/null
+++ b/sites/sandbox/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './globals.css';
+
+createRoot(document.getElementById('root')!).render(
+
+
+);
diff --git a/sites/sandbox/src/pages/index.astro b/sites/sandbox/src/pages/index.astro
new file mode 100644
index 00000000..950055bf
--- /dev/null
+++ b/sites/sandbox/src/pages/index.astro
@@ -0,0 +1,70 @@
+---
+import Header from '../components/Header';
+import { TextShadow } from '../components/text-shadow';
+import Layout from '../layouts/Layout.astro';
+import { Examples } from '../sections/example';
+import { Features } from '../sections/features';
+import { Footer } from '../sections/footer';
+import { Hero } from '../sections/hero';
+import { Testimonials } from '../sections/testimonials';
+
+const LINES = 7;
+---
+
+
+
+
+
+ {Array.from({ length: LINES }).map((_, _index) => (
+
+ ))}
+
+
+
+ {Array.from({ length: LINES }).map((_, _index) => (
+
+ ))}
+
+
+
+
+
+
+
+
diff --git a/sites/sandbox/src/postcss.config.mjs b/sites/sandbox/src/postcss.config.mjs
new file mode 100644
index 00000000..69f7f59e
--- /dev/null
+++ b/sites/sandbox/src/postcss.config.mjs
@@ -0,0 +1,7 @@
+import tailwindcss from '@tailwindcss/postcss';
+
+const config = {
+ plugins: [tailwindcss]
+};
+
+export default config;
diff --git a/sites/sandbox/src/python-logo.tsx b/sites/sandbox/src/python-logo.tsx
new file mode 100644
index 00000000..252286fe
--- /dev/null
+++ b/sites/sandbox/src/python-logo.tsx
@@ -0,0 +1,207 @@
+export function PythonLogo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/sites/sandbox/src/sections/example.tsx b/sites/sandbox/src/sections/example.tsx
new file mode 100644
index 00000000..8e3b5549
--- /dev/null
+++ b/sites/sandbox/src/sections/example.tsx
@@ -0,0 +1,346 @@
+/** biome-ignore-all lint/suspicious/noArrayIndexKey: it's fine */
+'use client';
+import { useMemo, useState } from 'react';
+import {
+ code,
+ exposeExample,
+ filesExample,
+ nodeExample,
+ processingExample,
+ websocketExample
+} from '../code-sample';
+import { CodeBlock, GridBox, StripeBox } from '../components/grid';
+import { TextShadow } from '../components/text-shadow';
+
+type ExampleType =
+ | 'files'
+ | 'dev'
+ | 'preview'
+ | 'server'
+ | 'interpreter'
+ | 'websocket';
+export function Examples() {
+ const [example, setExample] = useState('files');
+ const exampleCode = useMemo(() => {
+ switch (example) {
+ case 'files':
+ return filesExample;
+ case 'dev':
+ return code;
+ case 'preview':
+ return exposeExample;
+ case 'server':
+ return nodeExample;
+ case 'interpreter':
+ return processingExample;
+ case 'websocket':
+ return websocketExample;
+ default:
+ return filesExample;
+ }
+ }, [example]);
+ return (
+
+ {/* Desktop decorative grid cells */}
+ {Array.from({ length: 15 }).map((_, index) => (
+
+ ))}
+
+ {/* Mobile: Section title */}
+
+
+
+
+ {/* Desktop: Large title */}
+
+
+
+
+
+ {/* Mobile: Example selector */}
+
+
setExample('files')}
+ >
+ File Operations
+
+ File Operations
+
+
+
setExample('dev')}
+ >
+ Interactive development environment
+
+ Expose services with preview URLs
+
+
+
setExample('preview')}
+ >
+ Expose services with preview URLs
+
+ Run a Node.js app
+
+
+
setExample('server')}
+ >
+ Run a Node.js app
+
+ Code Interpreter
+
+
+
setExample('interpreter')}
+ >
+ Code Interpreter
+
+ WebSocket Connections
+
+
+
setExample('websocket')}
+ >
+ WebSocket Connections
+
+ WebSocket Connections
+
+
+
+
+
+
+ {/* Mobile: Code block */}
+
+ {exampleCode}
+
+
+ {/* Desktop: Example selector */}
+
+ setExample('files')}
+ >
+ File Operations
+
+ File Operations
+
+
+ setExample('dev')}
+ >
+ Interactive development environment
+
+ Expose services with preview URLs
+
+
+
+
+ setExample('preview')}
+ >
+ Expose services with preview URLs
+
+ Run a Node.js app
+
+
+ setExample('server')}
+ >
+ Run a Node.js app
+
+ Code Interpreter
+
+
+
+
+ setExample('interpreter')}
+ >
+ Code interpreter
+
+ WebSocket Connections
+
+
+ setExample('websocket')}
+ >
+ WebSocket connections
+
+ WebSocket Connections
+
+
+
+
+
+
+
+
+ {/* Desktop: Code block */}
+
+ {exampleCode}
+
+
+ {/* Desktop decorative grid cells */}
+ {Array.from({ length: 18 }).map((_, index) => (
+
+ ))}
+
+ {/* Mobile: Section title */}
+
+
+
+
+ {/* Desktop: Large title */}
+
+
+
+
+ {/* Feature 1: Long-running processes */}
+
+
+
+ Safely execute tasks that require extended computation or monitoring
+ without risking system stability or security.
+
+
+
+
+
+
+ Safely execute tasks that require extended computation or monitoring
+ without risking system stability or security.
+
+
+
+
+
+
+
+ Processing
+
+
processing...
+
+
+
+ Processing
+
+
+
+
+
+ {/* Feature 2: Real time streaming */}
+
+
+
+ Listen to standard output & error streams live when executing
+ long-running commands
+
+
+
+
+
+
+ Listen to standard output & error streams live when executing
+ long-running commands
+
+
+
+
+
+
+
+ Real time streaming
+
+
+
+
+
+
+
+
+ Sure thing! I can guide you through implementing the issue
+ and opening a pull request. First, I need some details:
+
+
+
+
+
+
+
+
+ {/*
+
+ Safely execute tasks that require extended computation or monitoring
+ without risking system stability or security.
+
+
+
+
+
+
+
+
+ $ git clone https://github.com/cloudflare/agents
+
+
+
+ */}
+ {/* Feature 3: Preview URLs */}
+
+
+
+ Instantly expose any container port as a public URL with automatic
+ subdomain routing
+
+
+
+
+
+
+ Instantly expose any container port as a public URL with automatic
+ subdomain routing
+
+
+
+
+
+
+
+
+
+
+ Hello world!
+
+
+
+
+
+ {/* Feature 4: Code interpreter */}
+
+
+
+ Run Python/JavaScript code directly, with rich outputs (charts,
+ tables, images) parsed automatically for you
+
+
+
+
+
+
+ Run Python/JavaScript code directly, with rich outputs (charts,
+ tables, images) parsed automatically for you
+
+
+
+
+
+
+
+
+ {/* Feature 5: File system */}
+
+
+
+ Easy methods for basic filesystem operations and cloning git
+ repositories on the container filesystem
+
+
+
+
+
+
+ Easy methods for basic filesystem operations and cloning git
+ repositories on the container filesystem
+
+
+
+
+
+
+ {Array.from({ length: 5 }).map((_, i) => {
+ return
+
+
+
+ {/* Feature 6: Command execution */}
+
+
+
+ Run any shell command with proper exit codes, streaming, and error
+ handling
+
+
+
+
+
+
+ Run any shell command with proper exit codes, streaming, and error
+ handling
+
+
+
+
+
+
+
+
+ $ git clone https://github.com/cloudflare/agents
+
+
+
+
+
+ {/* Feature 7: WebSockets */}
+
+
+
+ Enable real-time, bidirectional communication by connecting directly
+ to WebSocket servers running in the sandbox
+
+
+
+
+
+
+ Enable real-time, bidirectional communication by connecting directly
+ to WebSocket servers running in the sandbox
+
+
+
+
+
+
+
+
+
+ WebSockets
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function FeatureSectionMobile({
+ title,
+ children
+}: {
+ title: string;
+ children: ReactNode;
+}) {
+ return (
+
+ );
+}
+
+function StreamingText({ text }: { text: string }) {
+ const [displayedText, setDisplayedText] = useState('');
+ const [currentIndex, setCurrentIndex] = useState(0);
+
+ useEffect(() => {
+ if (currentIndex < text.length) {
+ const timeout = setTimeout(() => {
+ setDisplayedText(text.slice(0, currentIndex + 1));
+ setCurrentIndex(currentIndex + 1);
+ }, 30); // Adjust speed here (lower = faster)
+
+ return () => clearTimeout(timeout);
+ } else {
+ // Wait 2 seconds after completion, then restart
+ const restartTimeout = setTimeout(() => {
+ setDisplayedText('');
+ setCurrentIndex(0);
+ }, 3000);
+
+ return () => clearTimeout(restartTimeout);
+ }
+ }, [currentIndex, text]);
+
+ return (
+
+ {displayedText}
+ {currentIndex < text.length && (
+
+ );
+}
diff --git a/sites/sandbox/src/sections/footer.tsx b/sites/sandbox/src/sections/footer.tsx
new file mode 100644
index 00000000..2c437511
--- /dev/null
+++ b/sites/sandbox/src/sections/footer.tsx
@@ -0,0 +1,70 @@
+/** biome-ignore-all lint/suspicious/noArrayIndexKey: it's fine */
+import { useState } from 'react';
+import { GridBox } from '../components/grid';
+
+export function Footer() {
+ const [copied, setCopied] = useState(false);
+ const installCommand = 'npm i @cloudflare/sandbox';
+
+ const handleCopy = async () => {
+ try {
+ await navigator.clipboard.writeText(installCommand);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (err) {
+ console.error('Failed to copy:', err);
+ }
+ };
+
+ return (
+
+ {/* Desktop decorative grid cells */}
+ {Array.from({ length: 8 }).map((_, index) => (
+
+ ))}
+
+ {/* Mobile: CTA buttons */}
+
+
+ {/* Desktop: CTA buttons */}
+
+
+ Get Started ↗
+
+
+
+
+ {copied ? 'Copied!' : installCommand}
+
+
+
+ {/* Mobile: Simple layout */}
+
+
+
+ Meet Cloudflare Sandboxes.
+
+
+ Execute commands, manage files, run services, and expose them via
+ public URLs - all within secure, sandboxed containers.{' '}
+
+ Get Started
+
+
+
+
+
+
+ {code}
+
+
+
+ {/* Desktop: Description box */}
+
+ Meet Cloudflare Sandboxes.
+
+ Execute commands, manage files, run services, and expose them via
+ public URLs - all within secure, sandboxed containers.{' '}
+
+ Get Started
+
+
+
+
+
+ {/* Desktop: Logo and icons */}
+
+
+
+
+
+
+
+
+
+ {/* Desktop: Main code block */}
+
+ {code}
+
+ {/* Desktop: Decorative corner paths and flow elements */}
+
+
+
+
+
+
+
+
+
+
+ start
+
+
+
+
+
+
+
+
+
+
+
+ finish
+
+
+
+
+
+ {/* Desktop: Terminal and file system visualization */}
+
+
+
+
+
+
+
$ git clone https://github.com/cloudflare/agents
+
$ npm test
+
+
+
+
+
+
+
+
+ {Array.from({ length: 12 }).map((_, i) => {
+ // biome-ignore lint/suspicious/noArrayIndexKey: it's fine
+ return
+
+
+
+
+
+
+
+ {/* Desktop: Decorative stripe boxes */}
+
+
+
+
+
+
+
import { getSandbox } from "@cloudflare/sandbox" ; // Export the Sandbox class in your Worker export { Sandbox } from "@cloudflare/sandbox" ; export default { async fetch(request : Request, env : Env) { const sandbox = getSandbox(env.Sandbox, "test-env" ); // Clone a repository await sandbox.gitCheckout( "${repo}" ); // Run tests const testResult = await sandbox.exec( "${command}" ); return new Response( JSON.stringify({ tests: testResult.exitCode === 0 ? "passed" : "failed" , output: testResult.stdout, }) ); }, }; (null);
+ const outputRef = useRef(null);
+
+ const code = useMemo(() => generateCode(repo, command), [repo, command]);
+
+ // Scroll to bottom when output changes
+ // biome-ignore lint/correctness/useExhaustiveDependencies: we need this to happen when the output changes
+ useEffect(() => {
+ if (outputRef.current) {
+ outputRef.current.scrollTop = outputRef.current.scrollHeight;
+ }
+ }, [output]);
+
+ const handleRun = async () => {
+ setLoading(true);
+ setError(null);
+ setOutput('');
+
+ try {
+ const response = await fetch('/api/execute', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({ repo, command })
+ });
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+
+ // Handle SSE stream
+ const reader = response.body?.getReader();
+ const decoder = new TextDecoder();
+
+ if (!reader) {
+ throw new Error('No response body');
+ }
+
+ let buffer = '';
+ let currentOutput = '';
+
+ while (true) {
+ const { done, value } = await reader.read();
+
+ if (done) break;
+
+ buffer += decoder.decode(value, { stream: true });
+ const lines = buffer.split('\n');
+
+ // Keep the last incomplete line in the buffer
+ buffer = lines.pop() || '';
+
+ for (const line of lines) {
+ if (line.startsWith('data: ')) {
+ try {
+ const event = JSON.parse(line.slice(6));
+
+ switch (event.type) {
+ case 'stdout':
+ currentOutput += event.data;
+ setOutput(currentOutput);
+ break;
+ case 'stderr':
+ currentOutput += `[stderr] ${event.data}`;
+ setOutput(currentOutput);
+ break;
+ case 'complete':
+ currentOutput += `\n\n--- Process completed with exit code: ${event.exitCode} ---`;
+ setOutput(currentOutput);
+ break;
+ case 'error':
+ setError(event.message || 'An error occurred');
+ break;
+ }
+ } catch (parseError) {
+ console.error('Failed to parse SSE event:', parseError);
+ }
+ }
+ }
+ }
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'An error occurred');
+ setOutput('');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+ {/* Desktop decorative grid cells */}
+ {Array.from({ length: 4 }).map((_, index) => (
+
+ ))}
+
+ {/* Mobile: Section title */}
+
+
+
+
+ {/* Desktop: Large title */}
+
+
+
+
+
+ {/* Desktop: Code block */}
+
+ {code}
+
+
+ {/* Mobile: Code block */}
+
+ {code}
+
+
+ {/* Desktop: Interactive panel */}
+
+
+
+
+
+
+
+
+ Repository URL
+
+
+
+
+ Command
+
+
+
+ {loading ? 'Running...' : 'Run'}
+
+
+
+
+ {error ? (
+ Error: {error}
+ ) : output ? (
+ output
+ ) : (
+
+ Output will appear here...
+
+ )}
+
+
+
+
+
+
+ {/* Mobile: Interactive panel */}
+
+
+
+
+
+ Repository URL
+
+
+
+
+ Command
+
+
+
+ {loading ? 'Running...' : 'Run'}
+
+
+
+
+ {error ? (
+ Error: {error}
+ ) : output ? (
+ output
+ ) : (
+
+ Output will appear here...
+
+ )}
+
+
+
+
+
+ {/* Desktop decorative grid cells */}
+ {Array.from({ length: 26 }).map((_, index) => (
+
+ ))}
+
+ {/* Mobile: Section title */}
+
+
+
+
+
+ {/* Desktop: Large title */}
+
+
+
+
+
+ {/* Testimonial 1 */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Testimonial 2 */}
+
+
+
+
+
+
+
+
+
+ {/* Testimonial 3 */}
+
+
+
+
+
+
+
+
+
+
+ {/* Testimonial 4 */}
+ {/**
+
+
+
+
+
+
+ */}
+
+
+
+
+
+
+
+
+
+ {testimonial.quote}
+
+
+
+
+
{testimonial.author}
+
+ {testimonial.role} · {testimonial.company}
+
+
+
+
+ );
+}
+
+function TestimonialMobile({ testimonial }: { testimonial: Testimonial }) {
+ return (
+
+
+
+ Testimonial
+
+
+ {testimonial.quote}
+
+
+
+
{testimonial.author}
+
+ {testimonial.role} · {testimonial.company}
+
+
+
+
+
+
+ );
+}
+
+export function DotPattern({
+ size = 8,
+ ...props
+}: {
+ size?: number;
+} & React.ComponentPropsWithoutRef<'pattern'>) {
+ return (
+
+
+
+
+ );
+}
+
+export function GridPattern({
+ size = 16,
+ ...props
+}: {
+ size?: number;
+} & React.ComponentPropsWithoutRef<'pattern'>) {
+ return (
+
+
+
+
+ );
+}
diff --git a/sites/sandbox/src/tailwind.config.js b/sites/sandbox/src/tailwind.config.js
new file mode 100644
index 00000000..afa2fa9a
--- /dev/null
+++ b/sites/sandbox/src/tailwind.config.js
@@ -0,0 +1,4 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}']
+};
diff --git a/sites/sandbox/tsconfig.json b/sites/sandbox/tsconfig.json
new file mode 100644
index 00000000..c27ae54d
--- /dev/null
+++ b/sites/sandbox/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "extends": "astro/tsconfigs/strict",
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "jsxImportSource": "react",
+ "paths": {
+ "@/*": ["./*"]
+ }
+ },
+ "include": ["src", "env.d.ts"],
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/sites/sandbox/wrangler.jsonc b/sites/sandbox/wrangler.jsonc
new file mode 100644
index 00000000..a70b2279
--- /dev/null
+++ b/sites/sandbox/wrangler.jsonc
@@ -0,0 +1,13 @@
+{
+ "name": "sandbox-site",
+ "compatibility_date": "2025-03-14",
+ "compatibility_flags": ["nodejs_compat"],
+ "assets": {
+ "directory": "./dist"
+ },
+ "observability": {
+ "logs": {
+ "enabled": true
+ }
+ }
+}
diff --git a/turbo.json b/turbo.json
index 4097c74b..75f25d77 100644
--- a/turbo.json
+++ b/turbo.json
@@ -9,6 +9,7 @@
"tsdown.config.ts",
"src/**/*.ts",
"src/**/*.tsx",
+ "src/**/*.astro",
"package.json",
"tsconfig.json",
"tsconfig.*.json",
@@ -22,6 +23,8 @@
"outputs": [],
"inputs": [
"src/**/*.ts",
+ "src/**/*.tsx",
+ "src/**/*.astro",
"tests/**/*.ts",
"vitest.config.ts",
"package.json"
@@ -31,12 +34,18 @@
"typecheck": {
"dependsOn": ["^build"],
"outputs": [],
- "inputs": ["src/**/*.ts", "tsconfig.json", "tsconfig.*.json"]
+ "inputs": [
+ "src/**/*.ts",
+ "src/**/*.tsx",
+ "src/**/*.astro",
+ "tsconfig.json",
+ "tsconfig.*.json"
+ ]
},
"check": {
"dependsOn": ["typecheck"],
"outputs": [],
- "inputs": ["src/**/*.ts", "biome.json"]
+ "inputs": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.astro", "biome.json"]
},
"docker:local": {
"dependsOn": ["^build"],