[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_152":153,"_154":155},"routes/_app.x.$handle.$name",{"_94":93,"_32":45,"_102":84,"_27":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":25,"_117":118,"_119":57,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",3,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":37,"_35":36,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","b4327c74-4866-11f0-8a27-76b3cceeab13","name","fileType","script","content","/**\n * This val creates a client-side HTML to SVG converter.\n * It uses a textarea for HTML input and a button to trigger the conversion.\n * To calculate the required SVG dimensions, it renders the input HTML into an off-screen div and measures its bounding box.\n * The resulting SVG, containing the HTML in a , is then displayed in four formats: raw SVG code, an SVG data URL, an HTML tag, and a Markdown image link.\n */\nimport { serve } from \"https://esm.town/v/g/serveUtils\";\nimport { Hono } from \"npm:hono\";\n\nfunction html() {\n /*\n \n \n \n \n \n HTML to SVG Converter\n \n \n \n \n

HTML to SVG Converter

Enter your HTML below. It will be wrapped in a

inside the SVG.

\n \n \n

Outputs

\n\n

\n 1. SVG Code\n \n

\n\n

\n 2. SVG Data URL\n \n

\n\n

\n 3. HTML Image Preview\n

\n HTML Code\n \n

\n\n

\n 4. Markdown Code\n \n

\n \n

\n \n \n */\n}\n\nfunction css() {\n /*\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n line-height: 1.6;\n background-color: #f4f7f9;\n color: #333;\n margin: 0;\n padding: 20px;\n }\n .container {\n max-width: 800px;\n margin: 0 auto;\n background: #fff;\n padding: 20px 30px;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n }\n h1, h2 {\n color: #111;\n border-bottom: 1px solid #eee;\n padding-bottom: 10px;\n margin-top: 0;\n }\n h2 {\n margin-top: 30px;\n }\n textarea {\n width: 100%;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-family: \"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", monospace;\n font-size: 14px;\n box-sizing: border-box;\n resize: vertical;\n }\n textarea[readonly] {\n background-color: #f0f0f0;\n cursor: copy;\n }\n button {\n display: block;\n width: 100%;\n padding: 12px;\n margin-top: 15px;\n font-size: 16px;\n font-weight: bold;\n color: #fff;\n background-color: #007bff;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.2s;\n }\n button:hover {\n background-color: #0056b3;\n }\n .hidden {\n display: none;\n }\n .output-group {\n margin-top: 20px;\n }\n .output-group label {\n display: block;\n font-weight: bold;\n margin-bottom: 8px;\n }\n #outputImageContainer {\n padding: 15px;\n border: 1px dashed #ccc;\n border-radius: 4px;\n margin-bottom: 10px;\n overflow: auto;\n background-color: #f9f9f9;\n }\n */\n}\n\nfunction js() {\n /*\n document.addEventListener(\"DOMContentLoaded\", () => {\n const htmlInput = document.getElementById(\"htmlInput\");\n const generateBtn = document.getElementById(\"generateBtn\");\n const outputContainer = document.getElementById(\"outputContainer\");\n const measurementDiv = document.getElementById(\"measurementDiv\");\n\n const outputSvgCode = document.getElementById(\"outputSvgCode\");\n const outputDataUrl = document.getElementById(\"outputDataUrl\");\n const outputImageContainer = document.getElementById(\"outputImageContainer\");\n const outputImageCode = document.getElementById(\"outputImageCode\");\n const outputMarkdown = document.getElementById(\"outputMarkdown\");\n\n // Pre-fill with example\n htmlInput.value = `\n

✨ HTML in SVG

This is pretty cool!

`.trim();\n\n generateBtn.addEventListener(\"click\", () => {\n const input = htmlInput.value.trim();\n if (!input) {\n alert(\"Please enter some HTML.\");\n return;\n }\n\n // 1. Render HTML in the off-screen div to measure it\n measurementDiv.innerHTML = input;\n\n // Using getBoundingClientRect gives more precise, non-integer values\n const { width, height } = measurementDiv.firstElementChild.getBoundingClientRect();\n measurementDiv.innerHTML = \"\"; // Clean up\n\n if (width === 0 || height === 0) {\n alert(\"Could not determine the size of the HTML content. Make sure it's not empty or display:none.\");\n return;\n }\n\n // We need to escape special characters for the data URL\n const sanitizedInput = input.replace(/\"/g, \"'\").replace(/%/g, \"%25\").replace(/#/g, \"%23\").replace(//g, \"%3E\");\n\n // 2. Construct the SVG string.\n // The content must be wrapped in a div with the xhtml namespace.\n const svgString = ``;\n\n // 3. Create the various output formats\n const svgDataUrl = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgString)))}`;\n const htmlImgTag = ` $\"Generated$ `;\n const markdown = `![Generated Image](${svgDataUrl})`;\n\n // 4. Display the outputs\n outputContainer.classList.remove(\"hidden\");\n\n outputSvgCode.value = svgString;\n outputDataUrl.value = svgDataUrl;\n\n outputImageContainer.innerHTML = htmlImgTag;\n outputImageCode.value = htmlImgTag;\n\n outputMarkdown.value = markdown;\n });\n\n [outputSvgCode, outputDataUrl, outputImageCode, outputMarkdown].forEach(textarea => {\n textarea.addEventListener('click', () => {\n textarea.select();\n document.execCommand('copy');\n });\n });\n });\n */\n}\n\nconst app = new Hono();\napp.get(\"/\", serve(html, \"text/html\"));\napp.get(\"/styles.css\", serve(css, \"text/css\"));\napp.get(\"/main.js\", serve(js, \"text/javascript\"));\n\nexport default app.fetch;","http","createdAt",["D",1749826654270],"branchVersion","branchId","b42ff788-4866-11f0-8a27-76b3cceeab13","id","b42e7bce-4866-11f0-8a27-76b3cceeab13","html2svg",["D",1749826639524],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","8d6857d3-cf1c-4e98-a094-0e379c10badf","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","4f4797d6-1767-45ca-8dc5-5113174ca1c1","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_101":97},"org",{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},"branch",{"_13":14,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","g","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJqRlBqSjdFTUlTVmVORmpObmFqZmJLVWh5VCJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":148,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":149,"_79":150,"_81":151,"_83":25},"tree",[143],"files",[143],"counts",{"_132":61,"_133":134,"_135":61,"_136":137,"_138":139},"contents",[124],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":125,"_32":28,"_30":31,"_126":-5,"_41":42,"_40":14,"_127":57,"_38":128,"_13":129,"_33":37,"_35":36,"_24":25,"_130":45,"_27":131},"bcf95be8-4866-11f0-ade5-76b3cceeab13","parentId","latest",["D",1749826654270],2,"label",[28],"pulls","branches",1,"forks","envVars",{"_140":61,"_142":61},"connections",{"_140":61,"_141":61},"count","unfilledCount","emptyCount",{"_43":125,"_32":28,"_30":31,"_126":-5,"_41":42,"_40":14,"_127":57,"_38":144,"_13":129,"_33":37,"_35":36,"_24":25,"_130":45,"_145":146,"_27":147},["D",1749826654270],"children",[],[28],["D",1749826639524],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},{"_13":14,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"ctx",{"_77":-5,"_121":185,"_186":187,"_188":189,"_190":25,"_191":25,"_192":25,"_193":57,"_194":-5,"_195":-7,"_196":-7,"_197":61,"_198":25,"_199":25,"_200":-5,"_201":25,"_202":25,"_203":25,"_204":-5},"ENV",{"_156":157,"_158":159,"_160":84,"_161":162,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Diff · v3