FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
panphora
panphorahyperclay
a single-tenant version of hyperclay
Public
Like
hyperclay
Home
Code
5
ARCHITECTURE.md
DEBUG_GUIDE.md
DEV_GUIDE.md
README.md
H
index.ts
Branches
1
Pull requests
Remixes
1
History
Environment variables
3
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
9/5/2025
README.md

Hyperclay Single Tenant

A self-updating web application with visual editing, authentication, and version control. Build and edit your website directly in the browser - no code required.

šŸš€ Quick Setup Guide

1. Remix This Val

Click the remix button in Val.town to create your own copy of this project.

2. Set Environment Variables

In your Val.town settings, add these environment variables:

  • ADMIN_EMAIL - Your email address (required for authentication)
  • APP_NAMESPACE - Optional namespace for storage (defaults to "default")

3. Deploy

The val is already configured as an HTTP trigger. Just save and it's live at your Val.town URL.

4. Test Public Access

Visit your Val.town URL (e.g., https://yourusername-yourval.web.val.run) - you should see the Hyperclay starter template in read-only mode.

5. Authenticate as Admin

  1. Go to /auth/edit (e.g., https://yourusername-yourval.web.val.run/auth/edit)
  2. Enter your admin email address
  3. Check your email for the magic link
  4. Click the magic link to authenticate

6. Start Editing

After authentication, return to your main URL. You should now see:

  • Edit controls and buttons
  • Contenteditable areas become editable
  • Auto-save functionality (Ctrl+S)
  • Access to version history at /versions

7. Share Your App

Your public URL is now ready to share! Others will see the read-only version while you can edit by authenticating.

šŸŽØ What is Hyperclay?

Hyperclay is a platform for hosting and editing HTML applications. It provides code editing capabilities, multi-tenant support, and instant deployment - think of it as "Google Docs meets web hosting." Users can edit content directly in the browser without touching code.

How Hyperclay Works

  1. Hosting Platform: Hyperclay hosts your HTML applications with built-in persistence
  2. Visual Editing: Authorized users can edit content directly in the browser
  3. Multi-Tenant Support: Build apps that support multiple users/organizations
  4. Instant Updates: Changes are live immediately - no deployment needed
  5. Version Control: Automatic versioning and history tracking

This Integration

This Val.town app provides a single-tenant implementation of Hyperclay so anyone can experience an HTML app with 0 effort:

  • Self-hosted: Runs on Val.town's infrastructure, but can be run anywhere
  • Single Admin: One admin user per HTML App vs Hyperclay's multi-tenant support
  • Custom Auth: Email-based authentication instead of Hyperclay's built-in auth
  • Val.town Storage: Uses Val.town's blob storage for persistence

Editable Elements

<!-- Text editing --> <div persist edit-mode-input> Click to edit this text </div> <!-- Rich text editing --> <div persist edit-mode-rich> <h2>Format me</h2> <p>Bold, italic, lists, etc.</p> </div> <!-- Image editing --> <img persist edit-mode-image src="photo.jpg" />

šŸ’” What Can You Build?

Here are some ideas to get you started:

Personal Website

Create your portfolio or personal site. Edit your bio, update projects, change styling - all from your browser.

Landing Page

Build product landing pages that you can update instantly. Change headlines, update pricing, test different CTAs.

Documentation Site

Maintain docs that stay current. Fix typos immediately, add new sections on the fly.

Blog

Write and publish posts directly on your site. No CMS needed.

Interactive Prototype

Build and iterate on designs in real-time. Perfect for demos and user testing.

🌐 Val.town Basics

Val.town is a cloud platform for running JavaScript/TypeScript code instantly.

Key Concepts

  • Vals: Units of code that run in the cloud
  • HTTP Vals: Web endpoints (like this app)
  • Automatic Hosting: Every val gets a public URL
  • Built-in Services: Storage, email, cron jobs
  • No Build Step: Just save and it's deployed

Your App URL

https://[username]-[valname].web.val.run

Storage

Val.town provides built-in blob storage:

  • Free: 10MB
  • Pro: 1GB

Troubleshooting

Common Issues

  1. Can't authenticate: Check ADMIN_EMAIL environment variable matches exactly
  2. Magic link not received: Check spam folder, verify email service is working
  3. Magic link expired: Links expire after 15 minutes, request a new one
  4. Changes not saving: Verify you're authenticated (check browser cookies for session)
  5. Version history empty: Versions are only created after first save
  6. Edit mode not working: Ensure Hyperclay.js is loading (check browser console)

Debug Steps

  1. Enable debug logging: Set DEBUG=true in environment variables
  2. Check browser cookies for session and isAdminOfCurrentResource=true
  3. Verify network requests to /save/app are successful
  4. Test authentication flow by visiting /auth/edit
  5. Check Val.town logs for server-side errors (especially with DEBUG=true)
  6. Verify ADMIN_EMAIL environment variable is set correctly

License

Open source - use freely on Val.town.


Need help? Check out DEV_GUIDE.md for development documentation or valtown.md for Val.town platform details.

Go to top
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Product
FeaturesCLIAI agentsCode intelligenceSlack integrationsGTMPricing
Developers
DocsStatusAPI ExamplesNPM Package Examples
Explore
ShowcaseTemplatesNewest ValsTrending ValsNewsletter
Company
AboutBlogCareersBrandhi@val.town
Terms of usePrivacy policyAbuse contact
Ā© 2025 Val Town, Inc.