# Runtime Template

```html
<!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:

```html
<!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:

```html
<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:

```css
<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:

```html
<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:

```html
<!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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.devtek.wtf/runtime-template.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
