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/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:

<!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/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:

<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/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

  1. Isolation

    • Each project runs in its own sandboxed environment

    • Prevents conflicts between different projects

    • Ensures clean execution context

  2. Dependencies

    • React 18 for modern features

    • Three.js for 3D graphics

    • Babel for JSX transformation

    • CDN delivery for optimal performance

  3. Styling

    • Retro-themed with Press Start 2P font

    • Consistent cross-browser rendering

    • Mobile-responsive defaults

    • Accessible form elements

  4. Development

    • Real-time code execution

    • Live preview capabilities

    • Error handling support

    • Development mode React

  5. 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 WorksNextRoadmap

Last updated