A tour of the pattern: how a startup can ship a Val Town template that bridges their product with a user's GitHub repos.
β οΈ This is a demo with mock data β no real API calls are made. It shows the architecture, UX flow, and code patterns that a real integration would use.
A startup ("AcmeStartup") wants users to be able to push events from their product to GitHub (issues, PRs, file syncs, etc). Instead of building a full GitHub integration into their backend, they ship a remixable Val Town template.
The user remixes it, adds their tokens, and the val acts as a personal bridge between the two services.
Rendering mermaid diagram...
| For the Startup | For the User |
|---|---|
| No GitHub integration to build/maintain | Full control over the code |
| No user tokens to store | Can customize behavior, add filters |
| Ship a template, not infrastructure | Tokens stay in their own account |
| Users self-serve setup | Can inspect and audit everything |
index.tsβ Hono HTTP backend with mock API routesfrontend/index.htmlβ Shell HTMLfrontend/index.tsxβ React app with 3 tabs: Demo, Architecture, How It Worksfrontend/style.cssβ Dark theme GitHub-inspired styles
Visit the live demo and click through the three tabs. Hit "Push to GitHub" to see the step-by-step API calls that would happen in production.