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.

PreviousHow It Works NextRoadmap

Last updated 11 months ago