Search
web_0NANERhZE0
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function web_0NANERhZE0(req) {
return new Response(`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retro Space Interface</title>
<style>
body {
margin: 0;
readmeManager
@postpostscript
@postpostscript/readmeManager: Edit Val Readmes With Persistent Drafts edit this readme Todo: [ ] Upload images [ ] Autosave/save without reloading page [ ] Ctrl+S [ ] Multiple draft versions [ ] Switch to dark codemirror theme which has markdown styling [ ] Allow for checking checkboxes in preview [ ] View with just the preview [ ] Ability to favorite vals on the Home page
HTTP
# @postpostscript/readmeManager: Edit Val Readmes With Persistent Drafts
[edit this readme](https://postpostscript-readmemanager.web.val.run/postpostscript/readmeManager)
Todo:
- [ ] Upload images
/** @jsxImportSource https://esm.sh/hono/jsx */
const app = new Hono<HonoEnv>();
app.use(
authMiddlewareCookie({
val_K1OL6VfLJs
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function val_K1OL6VfLJs(req) {
try {
// Execute the code directly and capture its result
const result = await (async () => {
const visualizeData = (data) => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = 800; canvas.height = 400; document.body.appendChild(canvas); const maxCount = Math.max(...Object.values(data)); const barWidth = canvas.width / Object.keys(data).length; Object.entries(data).forEach(([num, count], index) => { const barHeight = (count / maxCount) * canvas.height; ctx.fillStyle = 'blue'; ctx.fillRect(index * barWidth, canvas.height - barHeight, barWidth - 1, barHeight); ctx.fillStyle = 'black'; ctx.fillText(num, index * barWidth + barWidth / 2 - 5, canvas.height - barHeight - 5); }); }; visualizeData({"0":98,"1":86,"2":97,"3":97,"4":93,"5":112,"6":93,"7":106,"8":108,"9":89,"10":106,"11":108,"12":87,"13":112,"14":96,"15":93,"16":112,"17":96,"18":97,"19":86,"20":100,"21":102,"22":101,"23":85,"24":95,"25":103,"26":86,"27":92,"28":109,"29":107,"30":95,"31":102,"32":107,"33":92,"34":96,"35":99,"36":100,"37":104,"38":88,"39":115,"40":97,"41":90,"42":113,"43":102,"44":103,"45":92,"46":81,"47":101,"48":98,"49":95,"50":88,"51":92,"52":94,"53":100,"54":107,"55":99,"56":102,"57":96,"58":90,"59":95,"60":106,"61":111,"62":83,"63":109,"64":98,"65":98,"66":108,"67":102,"68":122,"69":102,"70":82,"71":98,"72":109,"73":99,"74":94,"75":94,"76":127,"77":103,"78":93,"79":111,"80":106,"81":98,"82":105,"83":111,"84":106,"85":104,"86":94,"87":102,"88":101,"89":99,"90":101,"91":105,"92":98,"93":121,"94":89,"95":110,"96":103,"97":95,"98":103,"99":115});
// Return the result in a properly formatted response
return new Response(JSON.stringify({
result: result,
type: typeof result
headers: { 'Content-Type': 'application/json' }
codemirror_demo
@nbbaier
An interactive, runnable TypeScript val by nbbaier
HTTP
const body = `<html>
<head>
<script
type="module"
src="https://raw.esm.sh/code-mirror-web-component@0.0.20/dist/code-mirror.js"
></script>
<style>
.cm-editor {
height: 300px;
border: 1px solid #ddd;
Server2
@iamseeley
🚧 hono + htmx web app 🚧 idea: linktree-esque profile page w/ widgets powered by vals setup: fork the val and uncomment the /signup and /login routes create a jwt secret token environment variable go to the db setup val and run it to create the tables (as the site is right now, you can only add/edit users and add/edit/delete user links) to do: [ ] create some val town apis for the profile widgets (add vals people have already made) [ ] add profile image (will probably point to val town profile pic) [ ] add delete profile handler [ ] finish public profile page [ ] 🎨🎨🎨🎨🎨
HTTP
# 🚧 hono + htmx web app 🚧
### idea: linktree-esque profile page w/ widgets powered by vals
### setup:
- *fork the val and uncomment the /signup and /login routes*
- *create a jwt secret token environment variable*
- *go to the db setup val and run it to create the tables* (as the site is right now, you can only add/edit users and add/edit/delete user links)
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
const app = new Hono();
app.use(logger());
const SECRET_KEY = Deno.env.get("JWT_SECRET_TOKEN");
val_XVD3rKaITU
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function val_XVD3rKaITU(req) {
try {
// Execute the code directly and capture its result
const result = await (async () => {
const visualizeData = (data) => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = 800; canvas.height = 400; document.body.appendChild(canvas); const maxCount = Math.max(...Object.values(data)); const barWidth = canvas.width / Object.keys(data).length; Object.entries(data).forEach(([num, count], index) => { const barHeight = (count / maxCount) * canvas.height; ctx.fillStyle = 'blue'; ctx.fillRect(index * barWidth, canvas.height - barHeight, barWidth - 1, barHeight); ctx.fillStyle = 'black'; ctx.fillText(num, index * barWidth + barWidth / 2 - 5, canvas.height - barHeight - 5); }); }; visualizeData({"0":98,"1":86,"2":97,"3":97,"4":93,"5":112,"6":93,"7":106,"8":108,"9":89,"10":106,"11":108,"12":87,"13":112,"14":96,"15":93,"16":112,"17":96,"18":97,"19":86,"20":100,"21":102,"22":101,"23":85,"24":95,"25":103,"26":86,"27":92,"28":109,"29":107,"30":95,"31":102,"32":107,"33":92,"34":96,"35":99,"36":100,"37":104,"38":88,"39":115,"40":97,"41":90,"42":113,"43":102,"44":103,"45":92,"46":81,"47":101,"48":98,"49":95,"50":88,"51":92,"52":94,"53":100,"54":107,"55":99,"56":102,"57":96,"58":90,"59":95,"60":106,"61":111,"62":83,"63":109,"64":98,"65":98,"66":108,"67":102,"68":122,"69":102,"70":82,"71":98,"72":109,"73":99,"74":94,"75":94,"76":127,"77":103,"78":93,"79":111,"80":106,"81":98,"82":105,"83":111,"84":106,"85":104,"86":94,"87":102,"88":101,"89":99,"90":101,"91":105,"92":98,"93":121,"94":89,"95":110,"96":103,"97":95,"98":103,"99":115});
// Return the result in a properly formatted response
return new Response(JSON.stringify({
result: result,
type: typeof result
headers: { 'Content-Type': 'application/json' }
valle_tmp_3735050494903109427870190455998034
@janpaul123
// This val will serve an HTML page emulating a Hacker News clone.
HTTP
// This val will serve an HTML page emulating a Hacker News clone.
// It uses plain HTML and CSS to create the frontend. Eventually,
// we can make it interactive with additional scripts.
export default async function(req: Request): Promise<Response> {
const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
honoJsPyodide
@tfayyaz
@jsxImportSource npm:hono/jsx
HTTP
/** @jsxImportSource npm:hono/jsx **/
const app = new Hono();
const title = "Click Button Demo";
const View = () => {
return (
<html>
<head>
<script src="https://cdn.jsdelivr.net/pyodide/v0.26.1/full/pyodide.js"></script>
</head>
<body>
web_qUw9pGGCvn
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function web_qUw9pGGCvn(req) {
return new Response(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ULTIMATE POP-TASTIC WEBSITE!</title>
<style>
body {
background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00);
rabbitstreamUtils
@tempdev
An interactive, runnable TypeScript val by tempdev
Script
const cryptoJs = CryptoJS;
function _kv(a) {
return [(a & 4278190080) >> 24, (a & 16711680) >> 16, (a & 65280) >> 8, a & 255];
const _xor = (a, X) => {
try {
for (let r0 = 0; r0 < a.length; r0++) {
a[r0] = a[r0] ^ X[r0 % X.length];
} catch (r1) {
return null;
export async function decryptURL(a, X) {
browserbase
@stevekrouse
@jsxImportSource npm:hono@3/jsx
HTTP
/** @jsxImportSource npm:hono@3/jsx */
const app = new Hono();
const browserbase = new Browserbase();
function duration(session) {
const startedAt = new Date(session.startedAt).getTime();
if (session.status === "RUNNING") {
return (Date.now() - startedAt) / 1000;
const endedAt = new Date(session.endedAt).getTime();
return (endedAt - startedAt) / 1000;
// Route to list all sessions
valle_tmp_63310026100017965110952142769065
@janpaul123
// This val will serve an HTML page emulating a Hacker News clone.
HTTP
// This val will serve an HTML page emulating a Hacker News clone.
// It uses plain HTML and CSS to create the frontend. Eventually,
// we can make it interactive with additional scripts.
export default async function(req: Request): Promise<Response> {
const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
smallwebDashboard
@pomdtr
smallweb.json {
"permissions": {
"env": true,
"read": true,
"run": [
"smallweb"
]
}
} .env EMAIL=<your-email>
Script
## smallweb.json
```json
"permissions": {
"env": true,
"read": true,
"run": [
/** @jsxImportSource jsr:@hono/hono@4.4.8/jsx */
const auth = lastlogin({
verifyEmail: (email) => email === Deno.env.get("EMAIL"),
const app = new Hono();
notebook
@yieldray
https://yieldray-notebook.web.val.run/
HTTP
<https://yieldray-notebook.web.val.run/>
const html = htm.bind(vhtml);
const markdown = (md) =>
micromark(md, {
extensions: [gfm()],
htmlExtensions: [gfmHtml()],
// components
const layout_html = ({ head, body }) =>
`<!DOCTYPE html>`
+ html`<html lang="en">
web_O5apQ7aQOz
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function web_O5apQ7aQOz(req) {
return new Response(`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simulation Reality Explorer</title>
<style>
body {
margin: 0;