Public
HTTP (deprecated)
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
export default async function (req: Request): Promise<Response> {
const templateModal = `
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-black bg-blue-200">
<div role="dialog" id="radix-:R9dea55:" aria-describedby="radix-:R9dea55H2:" aria-labelledby="radix-:R9dea55H1:" data-state="open" class="max-w-4xl md:max-h-[85vh] max-md:max-h-screen max-md:flex-auto w-full md:rounded bg-white md:shadow-md overflow-
<div class="flex items-center justify-between">
<h2 id="radix-:R9dea55H1:" class="text-xl font-bold pb-2">Templates</h2>
<button aria-label="Close" type="button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="text-base text-gray-700">
<h2 class="mt-4 text-base">Imports</h2>
<div class="grid gap-2 pb-2 pt-2 sm:grid-cols-2">
<button class="group bg-gray-50 border-gray-300 flex items-center gap-2 overflow-hidden rounded border p-3 text-left transition-colors hover:border-blue-500 hover:shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"></path>
</svg>
<div class="font-semibold group-hover:text-black">Import from NPM</div>
</button>
<button class="group bg-gray-50 border-gray-300 flex items-center gap-2 overflow-hidden rounded border p-3 text-left transition-colors hover:border-blue-500 hover:shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path>
</svg>
<div class="font-semibold group-hover:text-black">Import from a val</div>
</button>
</div>
<h2 class="mt-4 text-base">Server-Rendered JSX</h2>
<div class="grid gap-2 pb-2 pt-2 sm:grid-cols-2">
<button class="group bg-gray-50 border-gray-300 flex items-center gap-2 overflow-hidden rounded border p-3 text-left transition-colors hover:border-blue-500 hover:shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"></path>
</svg>
<div class="font-semibold group-hover:text-black">ReactJS</div>
</button>
<button class="group bg-gray-50 border-gray-300 flex items-center gap-2 overflow-hidden rounded border p-3 text-left transition-colors hover:border-blue-500 hover:shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"></path>
</svg>
<div class="font-semibold group-hover:text-black">Hono</div>
</button>
<button class="group bg-gray-50 border-gray-300 flex items-center gap-2 overflow-hidden rounded border p-3 text-left transition-colors hover:border-blue-500 hover:shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"></path>
</svg>
<div class="font-semibold group-hover:text-black">Preact</div>
</button>
<button class="group bg-gray-50 border-gray-300 flex items-center gap-2 overflow-hidden rounded border p-3 text-left transition-colors hover:border-blue-500 hover:shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"></path>
</svg>
<div class="font-semibold group-hover:text-black">Vue</div>
</button>
</div>
<h2 class="mt-4 text-base">Storage</h2>
<div class="grid gap-2 pb-2 pt-2 sm:grid-cols-2">
<button class="group bg-gray-50 border-gray-300 flex items-center gap-2 overflow-hidden rounded border p-3 text-left transition-colors hover:border-blue-500 hover:shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.12
</svg>
<div class="font-semibold group-hover:text-black">Store JSON with the Val Town Blob</div>
</button>
<button class="group bg-gray-50 border-gray-300 flex items-center gap-2 overflow-hidden rounded border p-3 text-left transition-colors hover:border-blue-500 hover:shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.
</svg>
<div class="font-semibold group-hover:text-black">Use Val Town SQLite to store data</div>
</button>
</div>
<h2 class="mt-4 text-base">Env variables</h2>
<div class="grid gap-2 pb-2 pt-2 sm:grid-cols-2">
<button class="group bg-gray-50 border-gray-300 flex items-center gap-2 overflow-hidden rounded border p-3 text-left transition-colors hover:border-blue-500 hover:shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"></path>
</svg>
<div class="font-semibold group-hover:text-black">Use your env variables with <code class="text-sm">Deno.env.get()</code></div>
</button>
<button class="group bg-gray-50 border-gray-300 flex items-center gap-2 overflow-hidden rounded border p-3 text-left transition-colors hover:border-blue-500 hover:shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"></path>
</svg>
<div class="font-semibold group-hover:text-black">Use your env variables with <code class="text-xs">process.env</code></div>
</button>
</div>
<h2 class="mt-4 text-base">Miscellaneous</h2>
<div class="grid gap-2 pb-2 pt-2 sm:grid-cols-2">
<button class="group bg-gray-50 border-gray-300 flex items-center gap-2 overflow-hidden rounded border p-3 text-left transition-colors hover:border-blue-500 hover:shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5
</svg>
<div class="font-semibold group-hover:text-black">Send yourself an email</div>
</button>