{title}

{nav ?? title}

\n {routes.map((r) =>\n r.type === \"directory\"\n ? \n : \n )}\n

\n );\n}\n\nasync function File({ path }) {\n const link = path\n .replace(/^pages\\//, \"\") // remove leading \"pages/\"\n .replace(/(?:^|\\/)index\\.md$/, \"\") // remove \"index.md\" at end, root or nested\n .replace(/\\.md$/, \"\"); // remove \".md\" from other files\n\n const plaintext = await readFile(path);\n const { data } = matter(plaintext);\n const { title } = data;\n\n return {title};\n}\n\nasync function getRoutes(path: string) {\n const paths = await Array.fromAsync(\n vt.vals.files.retrieve(id, { path, recursive: false }),\n );\n\n return paths.sort((a, b) => a.path.localeCompare(b.path));\n}",[],[151,171],[151],{"_102":182,"_95":183,"_152":184,"_154":-5,"_155":137,"_156":185,"_158":159,"_104":186,"_99":161,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":187,"_98":299},"106c28d6-aa8d-11f0-abeb-0224a6c84d84","pages","0f59cc3c-aa8d-11f0-ae8e-0224a6c84d84",6,["D",1760618329098],[188,291],{"_102":189,"_95":190,"_152":191,"_154":184,"_155":137,"_156":192,"_158":159,"_104":193,"_99":161,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":194,"_98":290},"c5086d6c-aa8e-11f0-81ba-0224a6c84d84","vals","c395b246-aa8e-11f0-845a-0224a6c84d84",13,["D",1760619061611],[195,224,234,244,254,262,272,281],{"_102":196,"_95":197,"_152":198,"_154":191,"_155":137,"_156":199,"_158":159,"_104":200,"_99":201,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":202,"_98":223},"2602d224-aa8f-11f0-a983-0224a6c84d84","http","f0cf0596-aa8e-11f0-8496-0224a6c84d84",17,["D",1760619224312],2,[203,214],{"_102":204,"_95":205,"_152":206,"_154":198,"_155":137,"_156":207,"_158":159,"_104":208,"_99":209,"_162":210,"_164":211,"_165":22,"_166":-5,"_167":212,"_98":213},"56cfb56c-aa98-11f0-90e9-0224a6c84d84","index.md","27edd926-aa8f-11f0-9080-0224a6c84d84",98,["D",1760623171651],7,"file","---\ntitle: HTTP\ndescription: A kind of val that can serve a website or an API using web-standard Request & Response objects\n---\n\nHTTP triggers let you serve a scalable API or website.\n\nThey are built on the web-standard\n[Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) and\n[Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) objects,\nso are compatible with a number of web frameworks like\n[Hono](https://hono.dev/).\n\n\n\n- [Basic examples](/vals/http/basic-examples)\n- [Routing](/vals/http/routing)\n- [Rendering HTML & JSX](/vals/http/jsx)\n- [Early-returning responses](/vals/http/early-return)",[],[183,190,197,205],{"_102":215,"_95":216,"_152":217,"_154":198,"_155":137,"_156":218,"_158":159,"_104":219,"_99":185,"_162":210,"_164":220,"_165":22,"_166":-5,"_167":221,"_98":222},"941f67aa-aa98-11f0-bee2-0224a6c84d84","jsx.md","cefc2678-aa8f-11f0-99b6-0224a6c84d84",100,["D",1760623274521],"---\ntitle: HTML & JSX\ndescription: You can use JSX syntax in Val Town to render HTML using React, Preact, Vue, Solid, etc.\n---\n\nTo use JSX, you'll need to insert what TypeScript calls a\n\"[per-file pragma](https://www.typescriptlang.org/tsconfig#jsxImportSource)\" - a\ncomment that uses `@jsxImportSource` to specify where the JSX methods are going\nto come from. For example, if you're implementing JSX with Preact, the pragma\nwill look like this at the top of your file:\n\n```tsx\n/** @jsxImportSource https://esm.sh/react */\n```\n\n## React\n\nWe recommend using React:\n\n\n\n## Preact\n\nPreact is a great alternative to React:\n\n\n\n## Vue\n\n\n\n## Solid\n\n\n\n## Hono\n\n",[],[183,190,197,216],[183,190,197],{"_102":225,"_95":226,"_152":227,"_154":191,"_155":137,"_156":228,"_158":159,"_104":229,"_99":230,"_162":210,"_164":231,"_165":22,"_166":-5,"_167":232,"_98":233},"e94ab3c6-aa96-11f0-b587-0224a6c84d84","branches.md","5780147e-aa8f-11f0-996e-0224a6c84d84",82,["D",1760622558416],5,"---\ntitle: Branches\ndescription: Val Branches are used for feature development, testing, and sharing\n---\n\nEvery val has a `main` branch, which is the default branch. You can create branches off the `main` branch for feature development, testing, and sharing.\n\n## Managing branches\n\nYou need to be the owner of a val to create a branch. If you are not the owner, you can [remix the val](/vals/remixes) and send a pull request.\n\nYou can branch off `main` or any other branch from the default val page.\n\nYou can create, delete or rename any branch from the val's navigation sidebar.\n\n## Merging\n\nYou can merge changes from a branch back into its parent branch or from the parent into the branch.\n\n### Merging into parent branch\n\nA branch can only be merged into its parent if there are no conflicts. All edits are copied to the parent val, including file and folder renames, additions, deletions, and relocations.\n\n### Merging from parent branch\n\nYou can pull updates from the parent val into your branch.\n\n### Merge conflicts\n\nMerges cannot proceed if there are merge conflicts. Merge conflicts happen when the same line has been edited in both the parent and the branch.\n\nYou can resolve conflicts by:\n\n1. Merging from the parent into the branch\n2. Finding all merge conflicts in the val and resolving them. They will look like:\n\n```\n<<<<<<< main\nThis is the main branch\n=======\nThis is the branch\n>>>>>>> branch\n```\n\n3. Once all merge conflicts are resolved, you can then merge the branch back into the parent.\n\n### Limitations\n\n- Parent-child relationships are fixed. You can't change the base branch or re-parent a branch. You can only merge a branch into what it was originally forked from.⁠\n- There is no support for squashing or rebasing changes.\n- You cannot change the name of the `main` branch.",[],[183,190,226],{"_102":235,"_95":236,"_152":237,"_154":191,"_155":137,"_156":238,"_158":159,"_104":239,"_99":240,"_162":210,"_164":241,"_165":22,"_166":-5,"_167":242,"_98":243},"b536276c-aaa2-11f0-b0bf-0224a6c84d84","cron.md","408639f6-aa8f-11f0-bc3e-0224a6c84d84",143,["D",1760627625001],9,"---\ntitle: Cron\ndescription: Schedules let code on Val Town run every day, every hour, or whenever you'd like\n---\n\nCron triggers let you schedule code to run repeatedly on a schedule.\n\nSome common examples include:\n\n- Checking an RSS feed every hour\n- Getting notified when a website updates\n- Sending a reminder email every morning\n\nCrons can be configured with [cron syntax](https://en.wikipedia.org/wiki/Cron),\nor simple intervals like \"once an hour\"\n\nFunctions can run up to once every 15 minutes, or\n[once a minute, with the Pro plan](https://www.val.town/pricing).\n\n## Type Signature\n\nCrons take an `Interval` object as a parameter, and can return anything as a\nresult. The return value is ignored.\n\n```tsx title=\"Example\" val\nexport function cronValHandler(interval: Interval) {\n console.log(\"Cron val ran!\");\n}\n```\n\nThe Interval type has the following shape:\n\n```ts\ninterface Interval {\n lastRunAt: Date | undefined;\n}\n```\n\n## Schedule types\n\nThere are two kinds of schedules: either simple intervals, like \"run every two\nhours\", or you can use cron syntax to define more complex schedules.\n\nYou can consult [crongpt.com](https://crongpt.com) for help on writing cron\nexpressions. For example the following cron runs every two hours, on the first\nday of the month:\n\n```\n0 */2 1 * *\n```\n\n**Note: Crons run in UTC.**\n\nCron expressions are always evaluated in the\n[UTC timezone](https://en.wikipedia.org/wiki/Coordinated_Universal_Time), so if\nyou want to specify a certain hour in your local timezone, you may need to\nadjust the cron expression.\n\n## Example\n\nThis example polls an RSS feed for new items since the last run. This val runs\nevery 1 hour.\n\n",[],[183,190,236],{"_102":245,"_95":246,"_152":247,"_154":191,"_155":137,"_156":248,"_158":159,"_104":249,"_99":250,"_162":210,"_164":251,"_165":22,"_166":-5,"_167":252,"_98":253},"bce5af00-aaa2-11f0-9293-0224a6c84d84","email.md","3411b178-aa8f-11f0-bc3e-0224a6c84d84",146,["D",1760627637895],12,"---\ntitle: Email\ndescription: A kind of val that is able to receive emails sent to it\n---\n\nEmail triggers provide a unique email address for your val. When Val Town\nreceives an email at that address, it triggers the corresponding file within the\nval with the email as its first argument.\n\nSome common examples include:\n\n- Automatically forwarding emails\n- Posting support team emails to Discord / Slack\n\n_Vals can send email, too! Using the\n[email function in the standard library](/reference/std/email)._\n\n## Type Signature\n\nFiles triggered by Email receive an argument called `Email` that represents the\nemail that was sent. Here's an example:\n\n```ts\nexport async function emailValHandler(email: Email) {\n console.log(\"Email received!\", email.from, email.subject, email.text);\n for (const file of email.attachments) {\n console.log(`Filename: ${file.name}`);\n console.log(`Content Type: ${file.type}`);\n console.log(`Content: ${await file.text()}`);\n }\n}\n```\n\nThe `Email` type has this shape:\n\n```ts\ninterface Email {\n from: string;\n to: string[];\n cc: string | string[] | undefined;\n bcc: string | string[] | undefined;\n subject: string | undefined;\n text: string | undefined;\n html: string | undefined;\n attachments: File[];\n}\n```\n\n## Example\n\nThis Email trigger forwards any email it receives to me. Try it out by sending\nan email to `stevekrouse.forwarder@valtown.email`.\n\n\n\n## Custom email address\n\nSimilar to [HTTP endpoints](/vals/http/custom-subdomains/), you can set a custom\nemail address by clicking on the `Email` trigger and selecting\n`Custom email address`.\n\nYou can choose any available email address ending in `@valtown.email`.\n\n![custom-email-add.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8250546d-36fc-49eb-75cc-8caf4f51ed00/public)\n\n## Limitations\n\n**Note: Email size limit**\n\nThe total size of inbound emails, including attachments, must be less than 30MB.\n\nEmail triggers are powered internally by\n[Sendgrid Inbound Parse](https://www.twilio.com/docs/sendgrid/ui/account-and-settings/inbound-parse).",[],[183,190,246],{"_102":255,"_95":205,"_152":256,"_154":191,"_155":137,"_156":257,"_158":159,"_104":258,"_99":230,"_162":210,"_164":259,"_165":22,"_166":-5,"_167":260,"_98":261},"540a251e-aaa3-11f0-a71f-0224a6c84d84","1bc9984a-aa96-11f0-82f8-0224a6c84d84",151,["D",1760627891470],"---\nnav: Vals\ntitle: Overview\ndescription: Learn about the basics of Vals\n---\n\nVals are the building blocks of Val Town. They can be used to create APIs,\ncrons, websites, and email handlers with JavaScript.\n\nA val is a collaborative, versioned folder of deployed code. It includes\neverything you need to run code in the cloud, including:\n\n- [HTTP](/vals/http), [Cron](/vals/cron), and [Email](/vals/email) triggers\n- Environment variables [↗](/reference/environment-variables/)\n- Import from other NPM, JSR, and more [↗](/reference/import/)\n- Access controls [↗](/reference/permissions/)\n- Version control & collaboration: reversions, [branching](/vals/branches),\n [remixes](/vals/remixes), [pull requests](/vals/pull-requests)\n- The Deno runtime [↗](/reference/runtime/)\n- Logs & traces\n\n## Triggers\n\nThere are **3 types of triggers** that JavaScript files within a val can have:\n\n- [HTTP: Triggered by https requests. You can make APIs or websites](/vals/http)\n- [Cron: Triggered by a timer or cron expression](/vals/cron)\n- [Email: Triggered by an incoming email](/vals/email)\n\n## Versioning & Collaboration\n\nEvery file change is automatically versioned. Rollbacks are instantaneous. You\ncan create branches and remixes for development and collaborating.\n\n- [Branches: Create branches for feature development, testing, and sharing](/vals/branches)\n- [Remixes: Remix another user's val to make changes and send a pull request](/vals/remixes)\n- [Pull Requests: Merge changes from a branch or remix back into the parent val](/vals/pull-requests)",[],[183,190,205],{"_102":263,"_95":264,"_152":265,"_154":191,"_155":137,"_156":266,"_158":159,"_104":267,"_99":268,"_162":210,"_164":269,"_165":22,"_166":-5,"_167":270,"_98":271},"cefff72e-aa96-11f0-8ab6-0224a6c84d84","limitations.md","63751d2e-aa8f-11f0-bf8b-0224a6c84d84",81,["D",1760622514300],4,"---\ntitle: Limitations\ndescription: Learn about the limitations of vals\n---\n\n- Maximum files per val: 1000\n- Maximum branches per val: 100\n- Binary files are not supported. We recommend\n [Blob Storage](/reference/std/blob).\n- Free tier users are limited to 5 private or unlisted vals. Pro users can have\n unlimited private vals. All users can have unlimited public vals.\n\nPlease contact us if you need more resources or have any questions.",[],[183,190,264],{"_102":273,"_95":274,"_152":275,"_154":191,"_155":137,"_156":276,"_158":159,"_104":277,"_99":230,"_162":210,"_164":278,"_165":22,"_166":-5,"_167":279,"_98":280},"c4bb68e8-aa96-11f0-977b-0224a6c84d84","pull-requests.md","5fac6922-aa8f-11f0-a983-0224a6c84d84",80,["D",1760622497077],"---\ntitle: Pull Requests\ndescription: Pull Requests are used to merge changes from a branch or remix back into the parent\n---\n\nPull Requests are used to merge changes from a branch or remix back into the\nparent. They are a way to propose changes to a val, and they are the primary way\nto collaborate on vals with other users.\n\nTo make a PR, create a remix of the parent val, then visit the parent val's\n**Pull requests** page where you will see an \"Open pull request\" button. If\nyou're the owner of the parent val, you can also create a PR from a branch of\nthat val.",[],[183,190,274],{"_102":282,"_95":283,"_152":284,"_154":191,"_155":137,"_156":285,"_158":159,"_104":286,"_99":230,"_162":210,"_164":287,"_165":22,"_166":-5,"_167":288,"_98":289},"be70749c-aa96-11f0-87f6-0224a6c84d84","remixes.md","5add43c6-aa8f-11f0-b4f0-0224a6c84d84",79,["D",1760622486521],"---\ntitle: Remixes\ndescription: Other users can remix your Val, and you can remix other user's Vals\n---\n\nRemixes are a way to create a copy of a val in your account while maintaining\nreferences to the original. They can be used for cross-account collaboration.\nChanges in a remix can be merged back via [pull requests](/vals/pull-requests).\n\n## Remixing\n\nRemixing creates a copy of a val in your account while maintaining references to\nthe original. This process includes the `main` branch even when a non-main\nbranch is remixed to maintain consistency.\n\n## Merging\n\nA remix can only be merged into its parent if there are no conflicts. All edits\nare copied to the parent val, and the version is updated to match the latest\nversion in the parent.",[],[183,190,283],[183,190],{"_102":292,"_95":205,"_152":293,"_154":184,"_155":137,"_156":294,"_158":159,"_104":295,"_99":209,"_162":210,"_164":296,"_165":22,"_166":-5,"_167":297,"_98":298},"d6e7b916-aa98-11f0-905b-0224a6c84d84","290df658-aa8d-11f0-880a-0224a6c84d84",101,["D",1760623386556],"---\ntitle: Getting Started\ndescription: Create deployed apps, APIs, sites, and crons with JavaScript\n---\n\nVal Town is a collaborative website to write and scale serverless JavaScript.\n\nCreate APIs, crons, and store data – in your browser, deployed in milliseconds.\n\n## Where to start\n\nIf you're new to Val Town and want to learn the core building blocks first,\nread: [What is a val?](/vals/)\n\nIf you'd rather jump right into the code, remix this val: [hello-val](https://www.val.town/x/petermillspaugh/hello-val)\n\nWe also have starter guides for:\n\n- [Your first HTTP endpoint](/guides/first-website)\n- [Your first cron val](/guides/first-cron)\n\n## Learn more\n\n### Local development\n\nEdit your vals from your favorite IDE (VSCode, Cursor, vim, etc) via our CLI.\n\n- [Val Town CLI: Deploy vals from your terminal](https://github.com/val-town/vt)\n- [LLM Prompting: Edit vals with Claude Code, Cursor, et al](/guides/prompting)\n\n### Val Town Standard Library\n\nOur standard library includes some hosted services for data storage, email, and\nAI.\n\n- [SQLite: Store and retrieve structured data](/reference/std/sqlite)\n- [Blob: Store and retrieve any data](/reference/std/blob)\n- [OpenAI: Use the OpenAI API](/reference/std/openai)\n- [Email: Send emails](/reference/std/email)\n\n### API and SDK\n\n- [REST API: Access Val Town programmatically](/reference/api/)\n- [JavaScript SDK: Interact with Val Town from JavaScript](https://sdk.val.town)\n\n## Contact us\n\nWe're here to help! If you have any questions or feedback, please reach out to\nus on [Discord](https://discord.gg/dHv45uN5RY) or\n[email](mailto:docs-help@val.town).",[],[183,205],[183],{"_102":301,"_95":302,"_152":303,"_154":-5,"_155":137,"_156":304,"_158":159,"_104":305,"_99":201,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":306,"_98":315},"3c3a8380-aaa7-11f0-b2a6-0224a6c84d84","styles","352ed0aa-aaa7-11f0-a14d-0224a6c84d84",172,["D",1760629569510],[307],{"_102":308,"_95":309,"_152":310,"_154":303,"_155":137,"_156":136,"_158":159,"_104":311,"_99":230,"_162":210,"_164":312,"_165":22,"_166":-5,"_167":313,"_98":314},"b36661e0-aaa7-11f0-bb61-0224a6c84d84","index.css","3ecc202c-aaa7-11f0-9129-0224a6c84d84",["D",1760629769441],"/* CSS reset adapted from https://www.joshwcomeau.com/css/custom-css-reset */\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n line-height: 1.6;\n max-width: 100vw;\n overflow-x: hidden;\n font-family: sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\nbody::selection {\n background: black;\n color: white;\n}\n\nimg,\npicture,\nvideo,\ncanvas,\nsvg {\n display: block;\n max-width: 100%;\n}\n\ninput,\nbutton,\ntextarea,\nselect {\n font: inherit;\n}\n\np,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n overflow-wrap: break-word;\n word-break: break-word;\n}\n\np {\n text-wrap: pretty;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n text-wrap: balance;\n}",[],[302,309],[302],{"_102":317,"_95":318,"_152":319,"_154":-5,"_155":137,"_156":320,"_158":159,"_104":321,"_99":322,"_162":197,"_164":323,"_165":22,"_166":-5,"_167":324,"_98":325},"2fa9a092-aaa7-11f0-9d1a-0224a6c84d84","index.tsx","de16c252-aa8b-11f0-8499-0224a6c84d84",169,["D",1760629548427],35,"/** @jsxImportSource npm:hono@4.9.12/jsx */\nimport { Hono } from \"https://esm.sh/hono@4.9.12\";\nimport { listFiles, readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport matter from \"npm:gray-matter@4.0.3\";\nimport { marked } from \"npm:marked@16.4.0\";\nimport Nav from \"./components/Nav.tsx\";\n\nconst app = new Hono();\n\napp.get(\"/:route{.*}\", async (c) => {\n const { route } = c.req.param(); // e.g. vals/http or vals/http/jsx\n const files = await listFiles(import.meta.url);\n\n const normalized = route.replace(/\\/+$/, \"\") || \"index\"; // trim trailing slash, default to index when empty\n const mdPath = `pages/${normalized}.md`; // e.g. vals/http/jsx.md\n const indexPath = `pages/${normalized}/index.md`; // e.g. vals/http/index.md\n const file = files.find((f) => f.path === mdPath) ??\n files.find((f) => f.path === indexPath);\n\n if (!file || file.type !== \"file\") return c.text(\"Not found\", 404);\n\n const plaintext = await readFile(file.path);\n const { data, content } = matter(plaintext);\n const { title, description } = data;\n const body = await marked(content);\n\n const css = await readFile(\"styles/index.css\", import.meta.url);\n \n return c.html(\n \n \n {title}\n \n