Hello World

\",\n scripts: \"\"\n});\n\n// Using the page generator\nconst page = await generatePage({\n title: \"My App\",\n content: \"

Content here

\",\n includeReact: true,\n customCSS: \"body { background: #f0f0f0; }\"\n});\n```\n\n### Component-Based Generation\n\n```typescript\nimport { HTML, renderComponent, createDocument } from \"./components/html.ts\";\n\n// Build components\nconst header = HTML.h1(\"Welcome\", { class: \"text-3xl font-bold\" });\nconst paragraph = HTML.p(\"This is a paragraph\", { class: \"text-gray-600\" });\nconst button = HTML.button(\"Click me\", { \n class: \"bg-blue-500 text-white px-4 py-2 rounded\",\n onclick: \"alert('Hello!')\"\n});\n\n// Create complete document\nconst html = createDocument({\n title: \"Component Example\",\n body: [\n HTML.div({ class: \"container mx-auto p-8\" }, [\n header,\n paragraph,\n button\n ])\n ]\n});\n```\n\n### Export with Download\n\n```typescript\nimport { createHTMLDownload, minifyHTML } from \"./utils/html.ts\";\n\n// Create downloadable response\nconst html = await generatePage({\n title: \"Export Example\",\n content: \"

Downloaded Content

\"\n});\n\nreturn createHTMLDownload(minifyHTML(html), \"my-export.html\");\n```\n\n## File Structure\n\n```\n├── main.tsx # HTTP val with export endpoints\n├── templates/\n│ └── base.html # Base HTML template\n├── utils/\n│ └── html.ts # Template utilities\n├── components/\n│ └── html.ts # Component-based HTML generation\n└── README.md # This file\n```\n\n## API Endpoints\n\n### GET `/`\nMain dashboard showing available export options.\n\n### GET `/export/simple`\nDownloads a simple HTML page with current timestamp.\n\n### GET `/export/react`\nDownloads a React counter application as a standalone HTML file.\n\n### GET `/export/custom`\nShows a form for creating custom HTML exports.\n\n### POST `/export/custom`\nProcesses form data and generates custom HTML download.\n\n**Form Parameters:**\n- `title` - Page title\n- `content` - HTML content\n- `includeStyles` - Whether to include custom CSS\n\n## Template Variables\n\nThe base template supports these variables:\n- `{{title}}` - Page title\n- `{{head}}` - Additional head content\n- `{{content}}` - Main page content \n- `{{scripts}}` - JavaScript content\n\n## Customization\n\n### Adding New Templates\n\n1. Create a new HTML file in `/templates/`\n2. Use `{{variable}}` syntax for dynamic content\n3. Load with `renderTemplate()`\n\n### Custom Components\n\nExtend the `HTML` object in `/components/html.ts`:\n\n```typescript\nexport const HTML = {\n // ... existing components\n \n customCard: (title: string, content: string): HTMLComponent => ({\n tag: \"div\",\n attributes: { class: \"bg-white p-6 rounded-lg shadow\" },\n children: [\n HTML.h3(title, { class: \"text-lg font-semibold mb-2\" }),\n HTML.p(content, { class: \"text-gray-600\" })\n ]\n })\n};\n```\n\n## Best Practices\n\n1. **Use templates** for consistent layouts\n2. **Minify HTML** for production exports\n3. **Pin React versions** when including React\n4. **Validate user input** in custom exports\n5. **Use semantic HTML** for accessibility\n6. **Include meta tags** for proper rendering\n\n## Troubleshooting\n\n- **Template not found**: Ensure template files exist in `/templates/`\n- **React not loading**: Check that versions are pinned to 18.2.0\n- **Styles not applying**: Verify TailwindCSS script is included\n- **Download not working**: Check Content-Disposition headers",[128],"087a1562-3bba-11f0-953e-9e149126039e","utils","4fb1fbdc-ab43-4753-b8fc-588d7e249ad4",3,["D",1748433064060],"directory",[134],"018e8d64-3bba-11f0-97d3-9e149126039e","templates","8b593ea4-ed59-4dae-8465-cd7c7a30313e",2,["D",1748433052449],[141],"245bccda-3bba-11f0-bdfd-9e149126039e","components","89bf895d-709c-4253-8d79-351754e4855a",6,["D",1748433110837],[147],"pulls","branches",1,"forks","envVars",{"_160":41,"_162":41},"connections",{"_160":41,"_161":41},"count","unfilledCount","emptyCount",{"_18":146,"_20":147,"_113":148,"_114":-5,"_115":67,"_116":149,"_117":37,"_22":206,"_64":41,"_120":138,"_122":-5,"_124":26,"_125":-5,"_172":207,"_84":208},{"_18":200,"_20":179,"_113":201,"_114":148,"_115":67,"_116":149,"_117":37,"_22":202,"_64":41,"_120":182,"_122":203,"_124":26,"_125":-5,"_172":204,"_84":205},{"_18":140,"_20":141,"_113":142,"_114":-5,"_115":67,"_116":143,"_117":37,"_22":197,"_64":41,"_120":138,"_122":-5,"_124":26,"_125":-5,"_172":198,"_84":199},{"_18":189,"_20":190,"_113":191,"_114":142,"_115":67,"_116":192,"_117":37,"_22":193,"_64":154,"_120":95,"_122":194,"_124":26,"_125":-5,"_172":195,"_84":196},{"_18":133,"_20":134,"_113":135,"_114":-5,"_115":67,"_116":136,"_117":37,"_22":186,"_64":41,"_120":138,"_122":-5,"_124":26,"_125":-5,"_172":187,"_84":188},{"_18":178,"_20":179,"_113":180,"_114":135,"_115":67,"_116":136,"_117":37,"_22":181,"_64":41,"_120":182,"_122":183,"_124":26,"_125":-5,"_172":184,"_84":185},{"_18":127,"_20":128,"_113":129,"_114":-5,"_115":67,"_116":119,"_117":37,"_22":175,"_64":41,"_120":95,"_122":131,"_124":26,"_125":-5,"_172":176,"_84":177},{"_18":111,"_20":112,"_113":35,"_114":-5,"_115":67,"_116":65,"_117":37,"_22":171,"_64":119,"_120":121,"_122":123,"_124":26,"_125":-5,"_172":173,"_84":174},["D",1748433478904],"children",[],[112],["D",1748433135882],[],[128],"0879f118-3bba-11f0-953e-9e149126039e","html.ts","0879f1cc-3bba-11f0-953e-9e149126039e",["D",1748433064060],"script","import { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\ninterface TemplateData {\n title?: string;\n head?: string;\n content: string;\n scripts?: string;\n}\n\n/**\n * Render HTML using a template with variable substitution\n */\nexport async function renderTemplate(templatePath: string, data: TemplateData): Promise {\n let html = await readFile(templatePath, import.meta.url);\n \n // Default values\n const templateData = {\n title: \"My App\",\n head: \"\",\n scripts: \"\",\n ...data\n };\n \n // Replace template variables\n for (const [key, value] of Object.entries(templateData)) {\n const placeholder = `{{${key}}}`;\n html = html.replaceAll(placeholder, value || \"\");\n }\n \n return html;\n}\n\n/**\n * Generate a complete HTML page with common patterns\n */\nexport async function generatePage(options: {\n title: string;\n content: string;\n includeReact?: boolean;\n customCSS?: string;\n customJS?: string;\n}): Promise {\n const { title, content, includeReact = false, customCSS = \"\", customJS = \"\" } = options;\n \n let head = customCSS ? `` : \"\";\n let scripts = customJS ? `` : \"\";\n \n if (includeReact) {\n head += `\n `;\n }\n \n return renderTemplate(\"/templates/base.html\", {\n title,\n head,\n content,\n scripts\n });\n}\n\n/**\n * Create a downloadable HTML file response\n */\nexport function createHTMLDownload(html: string, filename: string = \"export.html\"): Response {\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n \"Content-Disposition\": `attachment; filename=\"${filename}\"`\n }\n });\n}\n\n/**\n * Minify HTML by removing unnecessary whitespace\n */\nexport function minifyHTML(html: string): string {\n return html\n .replace(/\\s+/g, ' ')\n .replace(/>\\s+<')\n .trim();\n}",[],[134,179],["D",1748433064060],[168],[134],"c57fc2f6-3bba-11f0-8229-9e149126039e","base.html","018e55c4-3bba-11f0-97d3-9e149126039e",8,["D",1748433381184],"\n \n \n \n Pixelated 3D Scene with Leva\n \n \n \n \n

\n \n

\n\n \n \n\n

\n \n

background

\n \n

materialType

\n \n

colorPalette

\n \n

pixelSize

\n \n

outlineWidth

\n \n

enableDithering

\n \n

ditheringStrength

\n \n

ditheringScale

\n \n

bayerSize

\n \n

colorLevels

\n \n

rotationSpeed

\n \n

floatSpeed

\n \n

floatAmount

\n \n

\n \n",[],[141,190],["D",1748433052449],[166],[141],"245ba9bc-3bba-11f0-bdfd-9e149126039e","245baa7a-3bba-11f0-bdfd-9e149126039e",["D",1748433110837],"/**\n * Component-based HTML generation utilities\n */\n\nexport interface HTMLComponent {\n tag: string;\n attributes?: Record;\n children?: (string | HTMLComponent)[];\n content?: string;\n}\n\n/**\n * Render an HTML component to string\n */\nexport function renderComponent(component: HTMLComponent): string {\n const { tag, attributes = {}, children = [], content = \"\" } = component;\n \n // Build attributes string\n const attrs = Object.entries(attributes)\n .map(([key, value]) => `${key}=\"${value}\"`)\n .join(\" \");\n \n const attrString = attrs ? ` ${attrs}` : \"\";\n \n // Self-closing tags\n const selfClosing = [\"img\", \"br\", \"hr\", \"input\", \"meta\", \"link\"];\n if (selfClosing.includes(tag)) {\n return `<${tag}${attrString} />`;\n }\n \n // Render children\n const childrenHTML = children\n .map(child => typeof child === \"string\" ? child : renderComponent(child))\n .join(\"\");\n \n return `<${tag}${attrString}>${content}${childrenHTML}`;\n}\n\n/**\n * Create common HTML components\n */\nexport const HTML = {\n div: (attributes?: Record, children?: (string | HTMLComponent)[]): HTMLComponent => ({\n tag: \"div\",\n attributes,\n children\n }),\n \n h1: (content: string, attributes?: Record): HTMLComponent => ({\n tag: \"h1\",\n content,\n attributes\n }),\n \n h2: (content: string, attributes?: Record): HTMLComponent => ({\n tag: \"h2\",\n content,\n attributes\n }),\n \n p: (content: string, attributes?: Record): HTMLComponent => ({\n tag: \"p\",\n content,\n attributes\n }),\n \n a: (content: string, href: string, attributes?: Record): HTMLComponent => ({\n tag: \"a\",\n content,\n attributes: { href, ...attributes }\n }),\n \n button: (content: string, attributes?: Record): HTMLComponent => ({\n tag: \"button\",\n content,\n attributes\n }),\n \n input: (type: string, attributes?: Record): HTMLComponent => ({\n tag: \"input\",\n attributes: { type, ...attributes }\n }),\n \n img: (src: string, alt: string, attributes?: Record): HTMLComponent => ({\n tag: \"img\",\n attributes: { src, alt, ...attributes }\n }),\n \n ul: (children: HTMLComponent[], attributes?: Record): HTMLComponent => ({\n tag: \"ul\",\n attributes,\n children\n }),\n \n li: (content: string, attributes?: Record): HTMLComponent => ({\n tag: \"li\",\n content,\n attributes\n }),\n \n form: (children: HTMLComponent[], attributes?: Record): HTMLComponent => ({\n tag: \"form\",\n attributes,\n children\n }),\n \n label: (content: string, attributes?: Record): HTMLComponent => ({\n tag: \"label\",\n content,\n attributes\n }),\n \n textarea: (attributes?: Record): HTMLComponent => ({\n tag: \"textarea\",\n attributes\n }),\n \n select: (children: HTMLComponent[], attributes?: Record): HTMLComponent => ({\n tag: \"select\",\n attributes,\n children\n }),\n \n option: (content: string, value: string, attributes?: Record): HTMLComponent => ({\n tag: \"option\",\n content,\n attributes: { value, ...attributes }\n })\n};\n\n/**\n * Create a complete HTML document\n */\nexport function createDocument(options: {\n title: string;\n body: HTMLComponent[];\n head?: HTMLComponent[];\n lang?: string;\n}): string {\n const { title, body, head = [], lang = \"en\" } = options;\n \n const document: HTMLComponent = {\n tag: \"html\",\n attributes: { lang },\n children: [\n {\n tag: \"head\",\n children: [\n { tag: \"meta\", attributes: { charset: \"UTF-8\" } },\n { tag: \"meta\", attributes: { name: \"viewport\", content: \"width=device-width, initial-scale=1.0\" } },\n { tag: \"title\", content: title },\n { tag: \"script\", attributes: { src: \"https://cdn.twind.style\", crossorigin: \"\" } },\n ...head\n ]\n },\n {\n tag: \"body\",\n attributes: { class: \"bg-gray-50 min-h-screen\" },\n children: body\n }\n ]\n };\n \n return `\\n${renderComponent(document)}`;\n}",[],[147,179],["D",1748433110837],[164],[147],["D",1748432981111],{"_16":17,"_82":78},{"_16":17,"_76":-5,"_77":78,"_32":33,"_79":80,"_81":26},{"_64":65,"_20":66,"_18":67,"_68":19,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":21,"_75":17},"ctx",{"_57":-5,"_103":246,"_247":248,"_249":250,"_251":26,"_252":26,"_253":26,"_254":37,"_255":-5,"_256":-7,"_257":-7,"_258":41,"_259":26,"_260":26,"_261":-5,"_262":26,"_263":26,"_264":26,"_265":-5},"ENV",{"_217":218,"_219":220,"_221":66,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search