• Townie
    AI
  • Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
jxnblk

jxnblk

valTownBadge

Unlisted
Like
valTownBadge
Home
Code
2
README.md
main.tsx
Branches
1
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
README.md
Code
/
README.md
Search
5/15/2024
Viewing readonly version of main branch: v11
View latest version
README.md

Add a Val Town badge to your own HTTP vals

View source on Val Town

Option 1: Middleware

  1. Import the middleware from https://www.val.town/v/jxnblk/valTownBadgeMiddleware
  2. Wrap your HTML request handler with middleware, and pass import.meta.url to link to your val
Create val
import wrapper from "https://esm.town/v/jxnblk/valTownBadgeMiddleware"; async function handler(req: Request): Promise<Response> { const html = ` <h1>Hello, world</h1> `; return new Response(html, { headers: { "Content-Type": "text/html; charset=utf-8", }, }); } export default wrapper(handler, import.meta.url);

Option 2: HTML string generator

  1. Get the HTML string for the badge using https://www.val.town/v/jxnblk/valTownBadge
  2. Add the HTML to your response's HTML string wherever you like
Create val
import valTownBadge from "https://esm.town/v/jxnblk/valTownBadge"; export default async function(req: Request): Promise<Response> { const badge = valTownBadge(import.meta.url); const html = ` <h1>Hello, world</h1> ${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

<a href="https://www.val.town/v/jxnblk/valTownBadgeExample" target="_blank" style="text-decoration:none;color:inherit"> <img src="https://jxnblk-valtownbadgesvg.web.val.run/" width="160" height="160"> </a>

Or markdown:

[![View source on Val Town](https://jxnblk-valtownbadgesvg.web.val.run/)](https://www.val.town/v/jxnblk/valTownBadgeExample)

Vals used to create this

  • https://www.val.town/v/jxnblk/valTownBadgeSVG SVG badge image service
  • https://www.val.town/v/jxnblk/valTownLogotypeReact Val Town logo React component
  • https://www.val.town/v/jxnblk/codeIconReact Code icon React component
  • https://www.val.town/v/jxnblk/valTownBadge HTML generator that uses import.meta.url to create a link to your val
  • https://www.val.town/v/jxnblk/valTownBadgeMiddleware Middleware to inject badge HTML in the lower right corner of your page

Migrated from folder: _LEAVE_AS_IS/badge_LEAVE_AS_IS/valTownBadge

FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.