Runtime Template
<!DOCTYPE html>
<html>
<head>
<title>Dev Tek</title>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style>
* {
box-sizing: border-box;
font-family: 'Press Start 2P', system-ui;
line-height: 1.5;
}
body {
margin: 0;
padding: 16px;
font-size: 12px;
}
input, textarea, select {
font-family: 'Press Start 2P', system-ui;
font-size: 12px;
padding: 8px;
}
button {
cursor: pointer;å
font-family: 'Press Start 2P', system-ui;
padding: 8px 16px;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.6;
margin: 0;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState, useEffect, useCallback, useRef } = React;
${code}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App));
</script>
</body>
</html>`;
Overview
This template serves as the runtime environment for all React applications in Dev Tek. It provides a consistent, sandboxed environment with all necessary dependencies and styling pre-configured.
Base HTML Structure
The foundation of every project:
<!DOCTYPE html>
<html>
<head>
<title>Dev Tek</title>
<!-- Dependencies and Styles -->
</head>
<body>
<div id="root"></div>
<!-- Runtime Script -->
</body>
</html>Dependencies
External libraries and resources loaded for each project:
<head>
<!-- Retro-style font for consistent UI -->
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<!-- Core React libraries -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 3D graphics capability -->
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<!-- JSX transformation -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>Base Styling
Consistent styling applied to all projects:
<style>
/* Global box sizing */
* {
box-sizing: border-box;
font-family: 'Press Start 2P', system-ui;
line-height: 1.5;
}
/* Base body styles */
body {
margin: 0;
padding: 16px;
font-size: 12px;
}
/* Form elements styling */
input, textarea, select {
font-family: 'Press Start 2P', system-ui;
font-size: 12px;
padding: 8px;
}
/* Button styling */
button {
cursor: pointer;
font-family: 'Press Start 2P', system-ui;
padding: 8px 16px;
}
/* Heading styles */
h1, h2, h3, h4, h5, h6 {
line-height: 1.6;
margin: 0;
}
</style>Runtime Script
The core script that initializes React and runs the user's code:
<script type="text/babel">
// Common React hooks available to all projects
const { useState, useEffect, useCallback, useRef } = React;
// User's code is injected here
${code}
// Initialize React 18 with createRoot
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App));
</script>Complete Template
The full template used for all projects:
<!DOCTYPE html>
<html>
<head>
<title>Dev Tek</title>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style>
* {
box-sizing: border-box;
font-family: 'Press Start 2P', system-ui;
line-height: 1.5;
}
body {
margin: 0;
padding: 16px;
font-size: 12px;
}
input, textarea, select {
font-family: 'Press Start 2P', system-ui;
font-size: 12px;
padding: 8px;
}
button {
cursor: pointer;
font-family: 'Press Start 2P', system-ui;
padding: 8px 16px;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.6;
margin: 0;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState, useEffect, useCallback, useRef } = React;
${code}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App));
</script>
</body>
</html>Key Features
Isolation
Each project runs in its own sandboxed environment
Prevents conflicts between different projects
Ensures clean execution context
Dependencies
React 18 for modern features
Three.js for 3D graphics
Babel for JSX transformation
CDN delivery for optimal performance
Styling
Retro-themed with Press Start 2P font
Consistent cross-browser rendering
Mobile-responsive defaults
Accessible form elements
Development
Real-time code execution
Live preview capabilities
Error handling support
Development mode React
Usage Contexts
Main sandbox preview
Marketplace thumbnails
Project previews
Downloadable standalone versions
This template is the foundation that enables Dev Tek's live coding and preview functionality, ensuring consistent behavior across all platform features.
Last updated