1. What is Code Lab?
TechTube Code Lab (/code-lab) is a zero-setup browser coding environment designed to let you test algorithms, experiment with frontend user interfaces, and run instructor code snippets without installing Node.js, compilers, or desktop IDEs.
It combines an offline Web Sandbox (HTML, CSS, JavaScript with live iframe preview), a Polyglot Execution Engine supporting 10+ compiled and interpreted languages via Piston, and a GitHub Repository Explorer that imports public open-source code with a single click.
2. Why Browser-Based Coding?
No compiler setups, path variables, or gigabyte-heavy SDK downloads. Open the tab and code immediately.
Pause video tutorials, switch to Code Lab, reproduce the code, and verify outputs in seconds.
Works smoothly on Chromebooks, lightweight laptops, tablets, and desktops.
3. Web Sandbox vs. Polyglot Engine
🌐 Web Sandbox (Frontend)
- Languages: HTML5, CSS3, ES6+ JavaScript.
- Execution: 100% Client-Side inside an isolated sandboxed iframe.
- Offline Capable: Yes, works completely without internet access.
- Best for: UI design, DOM manipulation, animations, component prototypes.
⚡ Polyglot Engine (Backend & Systems)
- Languages: Python, TypeScript, Node.js, C++, C, Java, Rust, Go, PHP, etc.
- Execution: Secure Linux container execution via Piston API.
- Offline Capable: Requires internet to reach execution API.
- Best for: Data structures, algorithms, CLI scripts, mathematical problem solving.
4. Web Sandbox (HTML/CSS/JS Live Preview)
The Web Sandbox provides three dedicated editor tabs for HTML, CSS, and JavaScript.
• Live Preview Pane: Automatically builds the combined document and renders it inside an isolated preview iframe.
• Console Tab: Captures console.log(), console.warn(), and console.error() calls and prints them in the bottom output panel.
• Run Code Shortcut: Press Ctrl + Enter (or Cmd + Enter on macOS) to refresh the preview immediately.
• Single-File Export: Click "Export Project" to download your complete HTML+CSS+JS work as a self-contained .html file.
5. Polyglot Runtimes & Piston Execution
Switch to the Polyglot tab to access standard programming language runtimes. Select your language from the dropdown menu to load high-signal starter code:
6. Terminal Console & Standard Input (stdin)
When executing polyglot code, the output panel acts as an interactive terminal console with granular tabs:
- • Output Tab: Shows formatted execution logs, status code badges (
Exit 0,Runtime Error,Build Error), and execution duration in milliseconds. - • Stdout / Stderr: Inspect raw standard output versus error streams separately.
- • Compilation Tab: For compiled languages (C++, Rust, Java), shows any compiler flags or syntax warning diagnostics.
- • Standard Input (stdin) Drawer: Click "Standard Input (stdin)" to enter inputs for interactive programs that use
input()in Python,cinin C++, orScannerin Java.
7. GitHub Repository Explorer & Importer
Code Lab features an integrated GitHub Explorer modal:
1. Click the GitHub Explorer button in the Code Lab toolbar.
2. Search public repositories by keyword (e.g. "threejs starter") or paste any direct GitHub repository URL (e.g. https://github.com/owner/repo).
3. Navigate through folders, view file previews, and read the repository's README.md in rendered Markdown.
4. Click Open in Code Lab on any supported file. The system automatically routes web files to the Web Sandbox and language files to the Polyglot Engine.
8. Tutorial: Run Your First JavaScript Program
Follow these 5 steps to write and execute your first program in Code Lab:
Navigate to /code-lab from the sidebar navigation.
Click on the "Polyglot Engine" tab at the top and ensure "JavaScript (Node.js)" or "TypeScript" is selected.
function calculateFactorial(n) {
if (n <= 1) return 1;
return n * calculateFactorial(n - 1);
}
const num = 5;
console.log(`Factorial of ${num} is: ${calculateFactorial(num)}`);Click the green ▶ Run Code button or press Ctrl + Enter.
Review the output in the bottom terminal panel: Factorial of 5 is: 120 with an Exit 0 (Success) status badge.
9. Offline Projects & Export
Code Lab automatically saves your active buffer in browser memory. You can also click Save Project to name and store named snapshots into IndexedDB.
Open the "Saved Projects" drawer to switch between previously saved web and polyglot experiments.
Export source files directly as standalone .html, .py, .ts, .rs, or .cpp files to your local disk.
10. Troubleshooting & Common Problems
Piston execution containers enforce a 5–10 second CPU limit. Avoid infinite loops (while (true)) without break conditions.
If your code uses input(), ensure you expand the "Standard Input (stdin)" drawer and provide values before clicking Run.
11. Frequently Asked Questions
Does Code Lab send my code to any TechTube database?
No. Web sandbox code stays 100% inside your browser. Polyglot code is sent transiently to the Piston API container to be executed and returned; nothing is saved in remote user databases.
Can I use npm packages in the Polyglot Engine?
Standard runtime libraries (such as math in Python, fs / crypto in Node.js, standard headers in C++) are available. External third-party package installation is limited to pre-bundled standard distributions in Piston runtimes.
Related Documentation & Resources
Explore the companion developer utilities including JSON Formatter, RegEx Tester, and Diff Checker.
How to pair video courses with hands-on practice in Code Lab.
Apply your Code Lab projects toward structured engineering career roadmaps.