[{"_1":2,"_228":-5,"_229":-5},"loaderData",{"_3":4,"_91":92,"_179":180,"_227":-5},"root",{"_5":6,"_32":33,"_58":59,"_89":90},"ctx",{"_7":8,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":31},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferences_keybindings","default","preferences_theme","light","preferences_fixers",false,"preferences_copilot","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","fa80b67e1f763bfb4b247c3f5ca4f0b0730f3f5c","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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","API_URL","https://api.val.town","WORKER_FINGERPRINT","799d99f2805306c2714a7cfefbeae178","clerkState",{"_60":61},"__internal_clerk_state",{"_62":63,"_64":43,"_65":66,"_67":66,"_68":26,"_69":66,"_70":66,"_71":66,"_72":66,"_73":66,"_74":66,"_75":66,"_76":66,"_77":78,"_87":26,"_88":26},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_79":26,"_80":66,"_81":82,"_83":66,"_84":43,"_85":26,"_86":66},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.v.$handle.$name",{"_93":94,"_95":96,"_94":97,"_174":-5,"_175":-5,"_176":177,"_130":131,"_138":108,"_100":101,"_98":99,"_119":-7,"_50":51,"_178":26},"type","val","author","a8270e74-6479-475a-8025-9b69544ee0e7",{"_98":99,"_95":96,"_100":101,"_102":103,"_104":-5,"_105":106,"_107":108,"_109":110,"_111":112,"_113":26,"_114":112,"_115":116,"_117":118,"_119":120,"_121":26,"_122":31,"_123":31,"_124":31,"_125":31,"_126":31,"_127":31,"_128":-5,"_20":129,"_134":-5,"_135":-7,"_136":137,"_138":108,"_139":140},"name","honoJsxHtmlTemplates","valNameId","43686438-6a2f-11ef-99c7-de64eea55b61","parentFolderId","de6c1c10-284c-11ef-a074-cab58f78796a","isOwned","privacy","public","readme","Base working example of combining Hono, React/JSX, and html templates","valType","http","currentVersion","3043b1b2-6b21-11ef-9354-de64eea55b61","legacyPrivate","id","code","/** @jsxImportSource https://esm.sh/hono@latest/jsx **/\nimport { renderToString } from \"npm:react-dom/server\";\n\nimport { Hono } from 'npm:hono'\nimport { html } from 'npm:hono/html'\n\nconst app = new Hono()\n\ninterface SiteData {\n title: string\n children?: any\n}\n\nconst Layout = (props: SiteData) =>\n html`\n \n \n ${props.title}\n \n \n ${props.children}\n \n `\n\nconst Content = (props: { siteData: SiteData; name: string }) => (\n \n

Hello {props.name}

\n \n)\n\napp.get('/', (c) => {\n return c.redirect(\"/wabbit\")\n})\n\napp.get('/:name', (c) => {\n const { name } = c.req.param()\n const props = {\n name: name,\n siteData: {\n title: 'JSX with html sample',\n },\n }\n return c.html()\n})\n\nexport default app.fetch","createdAt",["D",1725497575959],"version",8,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_130":131,"_132":133},"handle","yawnxyz","profileImageUrl","https://images.clerk.dev/oauth_github/img_2NnaHhpxNuH1xWRIRjQNoo16TVc.jpeg","forkedVal","interval","slug","yawnxyz/honoJsxHtmlTemplates","description","versions",[141,144,148,152,156,160,164,167,171],{"_119":120,"_142":-5,"_117":143,"_114":112},"prId",["D",1725497575959],{"_119":145,"_142":-5,"_117":146,"_114":147},7,["D",1725393880506],"c0f56a2c-6a2f-11ef-ad2a-de64eea55b61",{"_119":149,"_142":-5,"_117":150,"_114":151},6,["D",1725393788061],"89db8a12-6a2f-11ef-853a-de64eea55b61",{"_119":153,"_142":-5,"_117":154,"_114":155},5,["D",1725393760070],"792c7122-6a2f-11ef-ad2a-de64eea55b61",{"_119":157,"_142":-5,"_117":158,"_114":159},4,["D",1725393754811],"7609c8c8-6a2f-11ef-a4a0-de64eea55b61",{"_119":161,"_142":-5,"_117":162,"_114":163},3,["D",1725393723446],"63580c12-6a2f-11ef-b5c9-de64eea55b61",{"_119":90,"_142":-5,"_117":165,"_114":166},["D",1725393717837],"600033aa-6a2f-11ef-92a2-de64eea55b61",{"_119":168,"_142":-5,"_117":169,"_114":170},1,["D",1725393714581],"5e0f63cc-6a2f-11ef-a94b-de64eea55b61",{"_119":31,"_142":-5,"_117":172,"_114":173},["D",1725393669888],"436ba922-6a2f-11ef-99c7-de64eea55b61","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":181,"_130":131,"_98":99,"_20":182,"_178":26,"_94":186,"_139":209,"_119":-5,"_223":168,"_224":120,"_225":221,"_226":-5},"list",{"_114":96,"_130":131,"_117":183,"_184":185,"_132":133},["D",1680302214510],"bio","i make ui for ai",{"_98":99,"_95":96,"_100":101,"_102":103,"_104":187,"_105":106,"_107":108,"_109":110,"_111":112,"_113":26,"_114":112,"_115":116,"_117":188,"_119":120,"_121":26,"_122":31,"_123":31,"_124":31,"_125":31,"_126":31,"_127":31,"_128":-5,"_20":189,"_134":-5,"_135":-7,"_136":137,"_138":108,"_139":190},true,["D",1725497575959],{"_130":131,"_132":133},[191,193,195,197,199,201,203,205,207],{"_119":120,"_142":-5,"_117":192,"_114":112},["D",1725497575959],{"_119":145,"_142":-5,"_117":194,"_114":147},["D",1725393880506],{"_119":149,"_142":-5,"_117":196,"_114":151},["D",1725393788061],{"_119":153,"_142":-5,"_117":198,"_114":155},["D",1725393760070],{"_119":157,"_142":-5,"_117":200,"_114":159},["D",1725393754811],{"_119":161,"_142":-5,"_117":202,"_114":163},["D",1725393723446],{"_119":90,"_142":-5,"_117":204,"_114":166},["D",1725393717837],{"_119":168,"_142":-5,"_117":206,"_114":170},["D",1725393714581],{"_119":31,"_142":-5,"_117":208,"_114":173},["D",1725393669888],[210],{"_114":173,"_115":211,"_119":31,"_117":212,"_213":99,"_100":101,"_109":110,"_130":131,"_11":96,"_214":-5,"_215":-5,"_216":-5,"_178":26,"_136":137,"_217":-5,"_218":219},"/** @jsxImportSource https://esm.sh/react */\nimport { renderToString } from \"npm:react-dom/server\";\n\nexport const reactExample = (request: Request) =>\n new Response(renderToString(

Test {1 + 1}

), {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });",["D",1725393669888],"valName","deletedAt","messageId","threadId","previous","stats",{"_220":221,"_222":31},"additions",9,"deletions","page","pageSize","total","redirect","routes/_app","actionData","errors"]

honoJsxHtmlTemplates

Versions

v0