FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
andreterron
andreterroncodeOnValTown
Public
Like
5
codeOnValTown
Home
Code
2
README.md
S
main.tsx
Branches
1
Pull requests
Remixes
12
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 miliseconds.
Sign up now
Code
/
Code
/
Search
README.md

Code on Val Town

Screenshot 2024-02-27 at 1.25.46 PM.png

Adds a "Code on Val Town" ribbon to your page. This lets your website visitors navigate to the code behind it.

This uses github-fork-ribbon-css under the hood.

Usage

Here are 2 different ways to add the "Code on Val Town" ribbon:

1. Wrap your fetch handler (recommended)

Create val
import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=50"; import { html } from "https://esm.town/v/stevekrouse/html?v=5"; export default modifyFetchHandler(async (req: Request): Promise<Response> => { return html(`<h2>Hello world!</h2>`); });

Example: @andreterron/openable_handler

2. Wrap your HTML string

Create val
import { modifyHtmlString } from "https://esm.town/v/andreterron/codeOnValTown?v=50"; import { html } from "https://esm.town/v/stevekrouse/html?v=5"; export default async (req: Request): Promise<Response> => { return html(modifyHtmlString(`<h2>Hello world!</h2>`)); };

Example: @andreterron/openable_html

Other ways

We made sure this was very modular, so you can also add the ribbon using these methods:

  • Get the element string directly: @andreterron/codeOnVT_ribbonElement
  • Modify an HTTP Response: @andreterron/codeOnVT_modifyResponse
  • Use .pipeThrough to append to a stream: @andreterron/InjectCodeOnValTownStream

Customization

Linking to the val

These functions infer the val using the call stack or the request URL. If the inference isn't working, or if you want to ensure it links to a specific val, pass the val argument:

  • modifyFetchHandler(handler, {val: { handle: "andre", name: "foo" }})
  • modifyHtmlString("<html>...", {val: { handle: "andre", name: "foo" }})

Styling

You can set the style parameter to a css string to customize the ribbon. Check out github-fork-ribbon-css to learn more about how to style the element.

  • modifyFetchHandler(handler, {style: ".github-fork-ribbon:before { background-color: #333; }"})
  • modifyHtmlString("<html>...", {style: ".github-fork-ribbon:before { background-color: #333; }"})

Here's how you can hide the ribbon on small screens:

Create val
modifyFetchHandler(handler, {style: `@media (max-width: 768px) { .github-fork-ribbon { display: none !important; } }`})

To-dos

  • Let users customize the ribbon. Some ideas are the text, color or placement.

Migrated from folder: A_Features/_24_02_15_Open_In_ValTown/codeOnValTown

Code
README.md
S
main.tsx
Go to top
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Product
FeaturesPricing
Developers
DocsStatusAPI ExamplesNPM Package Examples
Explore
ShowcaseTemplatesNewest ValsTrending ValsNewsletter
Company
AboutBlogCareersBrandhi@val.town
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.