BlockRun Studio

A web development skill for building block-based visual programming environments, code playgrounds, and interactive tutorials with live code execution.

When to Use

Choose BlockRun Studio when:

• Building interactive code playgrounds for documentation or education
• Creating visual block-based programming interfaces
• Implementing live code execution environments in web applications
• Developing step-by-step interactive coding tutorials

Consider alternatives when:

• Building a full IDE — use Monaco Editor or CodeMirror with extensions
• Simple code highlighting — use Prism.js or highlight.js
• Server-side code execution — use Docker containers or cloud functions

Quick Start

Copy
# Install core dependencies
npm install @monaco-editor/react sandpack-react @codesandbox/sandpack-themes

Copy
import { Sandpack } from '@codesandbox/sandpack-react';

// Embeddable code playground
function CodePlayground() {
  return (
    <Sandpack
      template="react-ts"
      theme="dark"
      options={{
        showNavigator: true,
        showTabs: true,
        showLineNumbers: true,
        editorHeight: 400
      }}
      files={{
        '/App.tsx': {
          code: `import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <div style={{ padding: 20 }}>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(c => c + 1)}>
        Increment
      </button>
    </div>
  );
}`,
          active: true
        },
        '/styles.css': {
          code: 'button { padding: 8px 16px; font-size: 16px; }'
        }
      }}
      customSetup={{
        dependencies: {
          'react': '^18',
          'react-dom': '^18'
        }
      }}
    />
  );
}

Copy
// Custom block-based editor
interface CodeBlock {
  id: string;
  type: 'function' | 'loop' | 'condition' | 'variable' | 'output';
  label: string;
  code: string;
  children?: CodeBlock[];
  params?: Record<string, string>;
}

class BlockRunner {
  private blocks: CodeBlock[] = [];
  private variables: Map<string, any> = new Map();
  private output: string[] = [];

  addBlock(block: CodeBlock) {
    this.blocks.push(block);
  }

  execute(): string[] {
    this.output = [];
    this.variables.clear();

    for (const block of this.blocks) {
      this.executeBlock(block);
    }
    return this.output;
  }

  private executeBlock(block: CodeBlock) {
    switch (block.type) {
      case 'variable':
        this.variables.set(
          block.params?.name || 'x',
          this.evaluate(block.params?.value || '0')
        );
        break;

      case 'output':
        const value = this.evaluate(block.code);
        this.output.push(String(value));
        break;

      case 'loop':
        const iterations = Number(block.params?.count || 1);
        for (let i = 0; i < iterations; i++) {
          this.variables.set('i', i);
          block.children?.forEach(child => this.executeBlock(child));
        }
        break;

      case 'condition':
        if (this.evaluate(block.code)) {
          block.children?.forEach(child => this.executeBlock(child));
        }
        break;
    }
  }

  private evaluate(expression: string): any {
    // Safe expression evaluation with variables
    let expr = expression;
    this.variables.forEach((value, key) => {
      expr = expr.replace(new RegExp(`\\b${key}\\b`, 'g'), JSON.stringify(value));
    });
    try {
      return Function(`"use strict"; return (${expr})`)();
    } catch {
      return expression;
    }
  }
}

Core Concepts

Code Playground Frameworks

Framework	Features	Best For	Setup Complexity
Sandpack	React-based, hot reload, multi-file	Documentation, tutorials	Low
StackBlitz	Full WebContainer, npm support	Complex projects	Low
CodeSandbox	Full IDE features, collaboration	Prototyping	Low
Pyodide	Python in browser via WASM	Python education	Medium
Monaco Editor	VS Code editor component	Custom IDE building	Medium
Blockly	Google's visual block coding	Beginner education	Medium

Interactive Tutorial System

Copy
interface TutorialStep {
  title: string;
  description: string;
  initialCode: string;
  solution: string;
  hints: string[];
  validation: (output: string) => boolean;
}

function InteractiveTutorial({ steps }: { steps: TutorialStep[] }) {
  const [currentStep, setCurrentStep] = useState(0);
  const [code, setCode] = useState(steps[0].initialCode);
  const [feedback, setFeedback] = useState('');

  const checkSolution = async () => {
    try {
      const output = await executeCode(code);
      if (steps[currentStep].validation(output)) {
        setFeedback('Correct! Moving to next step.');
        setTimeout(() => {
          if (currentStep < steps.length - 1) {
            setCurrentStep(s => s + 1);
            setCode(steps[currentStep + 1].initialCode);
            setFeedback('');
          }
        }, 1500);
      } else {
        setFeedback('Not quite right. Check the hints for guidance.');
      }
    } catch (error) {
      setFeedback(`Error: ${error.message}`);
    }
  };

  return (
    <div className="tutorial-container">
      <div className="step-info">
        <h2>{steps[currentStep].title}</h2>
        <p>{steps[currentStep].description}</p>
      </div>
      <CodeEditor value={code} onChange={setCode} />
      <button onClick={checkSolution}>Run & Check</button>
      {feedback && <div className="feedback">{feedback}</div>}
    </div>
  );
}

Configuration

Option	Description	Default
template	Project template: react, react-ts, vanilla, vue	"react-ts"
theme	Editor theme: light, dark, custom	"dark"
show_preview	Show live preview pane	true
show_console	Show console output panel	true
auto_run	Auto-execute on code change	true
editor_height	Editor height in pixels	400
read_only	Make editor read-only	false
dependencies	NPM dependencies to include	{}

Best Practices

1. Provide starter code that almost works rather than blank editors — students learn better by fixing and completing partially-written code than by staring at an empty editor trying to figure out where to start
2. Include automated validation that checks the output of user code rather than checking exact code matches — there are many ways to write correct solutions, and checking output instead of implementation encourages creative thinking
3. Sandbox code execution in iframes or Web Workers to prevent user code from accessing the parent page's DOM, cookies, or network — never run arbitrary user code in the main thread without isolation
4. Pre-install common dependencies and cache them so the playground starts quickly — users abandon tools that take more than a few seconds to become interactive
5. Support keyboard shortcuts matching VS Code conventions (Ctrl+S to save/run, Ctrl+Z to undo) because developers have strong muscle memory for these shortcuts and will find your playground frustrating without them

Common Issues

Code execution timeout for infinite loops: User code can contain infinite loops that freeze the browser tab. Execute code in a Web Worker with a timeout, and terminate the worker if execution exceeds the limit. Display a clear error message explaining the timeout and suggesting the user check for infinite loops.

Import resolution failures: Sandpack and similar tools may fail to resolve npm packages that are not pre-configured. Explicitly list all dependencies in the playground configuration, use CDN-based imports for additional packages, and show helpful error messages when an import cannot be resolved.

Editor performance with large files: Monaco Editor and similar code editors slow down with files over a few thousand lines. Implement virtual scrolling, limit file sizes in the playground, and use lightweight alternatives like CodeMirror 6 for simple editing needs where full IDE features are not required.