Copy <!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/three@0.162.0/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:
Copy <!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:
Copy <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/three@0.162.0/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:
Copy <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:
Copy <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:
Copy <!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/three@0.162.0/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
Babel for JSX transformation
CDN delivery for optimal performance
Styling
Retro-themed with Press Start 2P font
Consistent cross-browser rendering
Mobile-responsive defaults
Development
Live preview capabilities
Usage Contexts
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 3 months ago
