A comprehensive HTML generation and export system for Val Town with multiple approaches for different use cases.

• 🎨 Template-based HTML generation with variable substitution
• 🧩 Component-based HTML building for programmatic generation
• 📱 Responsive design with TailwindCSS integration
• ⚛️ React app export support
• 📦 Minification for optimized output
• 💾 Direct download functionality
• 🎯 Custom styling and scripting options

Visit the main endpoint to see available export options:

• / - Main dashboard with export options
• /export/simple - Download a simple HTML page
• /export/react - Download a React application
• /export/custom - Form to create custom HTML exports

import { renderTemplate, generatePage } from "./utils/html.ts";

// Using templates
const html = await renderTemplate("/templates/base.html", {
  title: "My Page",
  content: "<h1>Hello World</h1>",
  scripts: "<script>console.log('loaded');</script>"
});

// Using the page generator
const page = await generatePage({
  title: "My App",
  content: "<div>Content here</div>",
  includeReact: true,
  customCSS: "body { background: #f0f0f0; }"
});

import { HTML, renderComponent, createDocument } from "./components/html.ts";

// Build components
const header = HTML.h1("Welcome", { class: "text-3xl font-bold" });
const paragraph = HTML.p("This is a paragraph", { class: "text-gray-600" });
const button = HTML.button("Click me", { 
  class: "bg-blue-500 text-white px-4 py-2 rounded",
  onclick: "alert('Hello!')"
});

// Create complete document
const html = createDocument({
  title: "Component Example",
  body: [
    HTML.div({ class: "container mx-auto p-8" }, [
      header,
      paragraph,
      button
    ])
  ]
});

import { createHTMLDownload, minifyHTML } from "./utils/html.ts";

// Create downloadable response
const html = await generatePage({
  title: "Export Example",
  content: "<h1>Downloaded Content</h1>"
});

return createHTMLDownload(minifyHTML(html), "my-export.html");

├── main.tsx              # HTTP val with export endpoints
├── templates/
│   └── base.html         # Base HTML template
├── utils/
│   └── html.ts          # Template utilities
├── components/
│   └── html.ts          # Component-based HTML generation
└── README.md            # This file

Main dashboard showing available export options.

Downloads a simple HTML page with current timestamp.

Downloads a React counter application as a standalone HTML file.

Shows a form for creating custom HTML exports.

Processes form data and generates custom HTML download.

Form Parameters:

• title - Page title
• content - HTML content
• includeStyles - Whether to include custom CSS

The base template supports these variables:

• {{title}} - Page title
• {{head}} - Additional head content
• {{content}} - Main page content
• {{scripts}} - JavaScript content

1. Create a new HTML file in /templates/
2. Use {{variable}} syntax for dynamic content
3. Load with renderTemplate()

Extend the HTML object in /components/html.ts:

export const HTML = {
  // ... existing components
  
  customCard: (title: string, content: string): HTMLComponent => ({
    tag: "div",
    attributes: { class: "bg-white p-6 rounded-lg shadow" },
    children: [
      HTML.h3(title, { class: "text-lg font-semibold mb-2" }),
      HTML.p(content, { class: "text-gray-600" })
    ]
  })
};

1. Use templates for consistent layouts
2. Minify HTML for production exports
3. Pin React versions when including React
4. Validate user input in custom exports
5. Use semantic HTML for accessibility
6. Include meta tags for proper rendering

• Template not found: Ensure template files exist in /templates/
• React not loading: Check that versions are pinned to 18.2.0
• Styles not applying: Verify TailwindCSS script is included
• Download not working: Check Content-Disposition headers