Example of how to add a **Val Town badge** to your val Demo: [![View source on Val Town](https://jxnblk-valtownbadge02.web.val.run/)](https://www.val.town/v/jxnblk/valTownBadgeExample) ## Option 1 1. Wrap your HTTP response handler with [^1] ```tsx import wrapper from "https://esm.town/v/jxnblk/valTownBadgeMiddleware"; async function handler(req: Request): Promise { const html = `

Hello, world

`; return new Response(html, { headers: { "Content-Type": "text/html; charset=utf-8", }, }); } export default wrapper(handler, import.meta.url); ``` ## Option 2 1. Get the HTML string for the badge using 1. Add the HTML to your response's HTML string wherever you like ```tsx import valTownBadge from "https://esm.town/v/jxnblk/valTownBadge"; export default async function(req: Request): Promise { const badge = valTownBadge(import.meta.url); const html = `

Hello, world

${badge} `; return new Response(html, { headers: { "Content-Type": "text/html; charset=utf-8", }, }); } ``` ## Manual options You can also edit the snippet below to manually add the badge in HTML ```html

``` Or markdown: ```md [![View source on Val Town](https://jxnblk-valtownbadgesvg.web.val.run/)](https://www.val.town/v/jxnblk/valTownBadgeExample) ``` [^1]: Middleware is not recommended when using client-side hydration in apps like React or when returning a full, valid HTML response

valTownBadgeExample

Version 14