Search
daisyui_hono
@lnncoco
@jsxImportSource npm:hono/jsx
HTTP (deprecated)
/** @jsxImportSource npm:hono/jsx **/
const Layout: FC = (props) => {
return (
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>{props.children}</body>
</html>
compileCljsToES6
@liamdanielduffy
An interactive, runnable TypeScript val by liamdanielduffy
Script
import * as squint_core from "npm:squint-cljs/core.js";
globalThis.squint_core = squint_core;
export function compileCljsToES6(cljs: string) {
return compileString(cljs, { repl: true, "elide-exports": true }).replace(
"squint-cljs",
"npm:squint-cljs",
emojiExploder
@iamseeley
@jsxImportSource npm:hono@3/jsx
HTTP (deprecated)
/** @jsxImportSource npm:hono@3/jsx */
const app = new Hono();
app.get("/", async (c) => {
return c.html(
<div>
<h1>Emoji exploder</h1>
<div>Enter an emoji and see what it's composed of</div>
<form action="/emoji" method="get">
<input type="text" name="emoji" /> <input type="submit" />
</form>
honoExample
@maxm
An interactive, runnable TypeScript val by maxm
HTTP (deprecated)
import { Hono } from "npm:hono@3";
const app = new Hono();
app.get("/", (c) => c.text("Hello from Hono!"));
app.get("/yeah", (c) => c.text("Routing!"));
export default app.fetch;
spacexapi
@moe
An interactive, runnable TypeScript val by moe
HTTP (deprecated)
export default async function(req: Request): Promise<Response> {
const data = await getLaunches()
return Response.json(data)
export async function getLaunches() {
var y10to19 = await loadPage(
"https://en.wikipedia.org/wiki/List_of_Falcon_9_and_Falcon_Heavy_launches_(2010%E2%80%932019)",
var y20to22 = await loadPage(
"https://en.wikipedia.org/wiki/List_of_Falcon_9_and_Falcon_Heavy_launches_(2020%E2%80%932022)",
var current = await loadPage("https://en.wikipedia.org/wiki/List_of_Falcon_9_and_Falcon_Heavy_launches")
var data = {
honoExample
@camdenclark
An interactive, runnable TypeScript val by camdenclark
HTTP (deprecated)
import { Hono } from "npm:hono@3";
const app = new Hono();
app.get("/", (c) => c.text("Hello from Hono!"));
app.get("/yeah", (c) => c.text("Routing!"));
export default app.fetch;
homepage
@willthereader
@jsxImportSource https://esm.sh/hono@latest/jsx
HTTP
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
export const homepage = (c: Context) => {
return c.html(
<html>
<head>
<title>Will Krouse</title>
<style
dangerouslySetInnerHTML={{
__html:
`:root{--slate1: hsl(200, 7%, 8.8%);--slate2: hsl(195, 7.1%, 11%);--slate3: hsl(197, 6.8%, 13.6%);--slate4: hsl(198, 6.6%, 15.8%);--slate5: hsl(199, 6.4%, 17.9%);--slate6: hsl(201, 6.2%, 20.5%);--slate7: hsl(203, 6%, 24.3%);--slate8: hsl(207, 5.6%, 31.6%);--slate9: hsl(206, 6%, 43.9%);--slate10: hsl(206, 5.2%, 49.5%);--slate11: hsl(206, 6%, 63%);--slate12: hsl(210, 6%, 93%);--blue1: hsl(212, 35%, 9.2%);--blue2: hsl(216, 50%, 11.8%);--blue3: hsl(214, 59.4%, 15.3%);--blue4: hsl(214, 65.8%, 17.9%);--blue5: hsl(213, 71.2%, 20.2%);--blue6: hsl(212, 77.4%, 23.1%);--blue7: hsl(211, 85.1%, 27.4%);--blue8: hsl(211, 89.7%, 34.1%);--blue9: hsl(206, 100%, 50%);--blue10: hsl(209, 100%, 60.6%);--blue11: hsl(210, 100%, 66.1%);--blue12: hsl(206, 98%, 95.8%)}body{font-family:system-ui,sans-serif;margin:auto;padding:20px;max-width:65ch;text-align:left;word-wrap:break-word;overflow-wrap:break-word;line-height:1.5}h1,h2,h3,h4,h5,h6,strong,b{font-weight:500}a{color:var(--blue10)}nav a{margin-right:10px}textarea{width:100%;font-size:16px}input{font-size:16px}content{line-height:1.6}table{width:100%}img{max-width:100%;height:auto}code{padding:2px 5px;background-color:var(--slate4);font-family:menlo,monospace}pre{padding:1rem}pre>code{all:unset}blockquote{border:1px solid var(--slate10);color:var(--slate11);padding:2px 0 2px 20px;margin:0;font-style:italic}a[data-astro-cid-eimmu3lg]{display:inline-block;text-decoration:none}a[data-astro-cid-eimmu3lg].active{font-weight:600;text-decoration:underline}header[data-astro-cid-3ef6ksr2]{margin:0 0 2em}h2[data-astro-cid-3ef6ksr2]{margin:.5em 0}`,
indieauth_server
@pomdtr
@jsxImportSource npm:hono/jsx
HTTP (deprecated)
/** @jsxImportSource npm:hono/jsx **/
const app = new Hono();
const self = extractValInfo(import.meta.url);
app.get("/", (c) => {
return c.html(
<html>
<head>
<link rel="authorization_endpoint" href={self.httpEndpoint} />
</head>
</html>,
aiHonoHtmxAlpineStreamingExample
@yawnxyz
This Frankenstein of an example shows how well Hono, htmx, and Alpine play together. Hono serves the frameworks, API calls, and functions htmx handles ajax requests, and can very powerfully request html and other content to swap out the front-end alpine handles app-like reactivity without having to always resort to server round trips
HTTP (deprecated)
This Frankenstein of an example shows how well Hono, htmx, and Alpine play together.
- Hono serves the frameworks, API calls, and functions
- htmx handles ajax requests, and can very powerfully request html and other content to swap out the front-end
- alpine handles app-like reactivity without having to always resort to server round trips
const app = new Hono();
const openai = new OpenAI();
app.use('*', cors({
origin: '*',
allowMethods: ['GET'],
allowHeaders: ['Content-Type'],
slogan_history
@timqian
@jsxImportSource https://esm.sh/react
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/react */
const timeline = [
id: 1,
slogan: "git repository hosting - no longer a pain in the ass",
href: "https://web.archive.org/web/20080514210148/http://github.com/",
date: "2008",
imgURL: "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8891cf87-f3aa-4251-4d2d-4861c6cadb00/public",
imageAlt: "GitHub Screenshot 2008",
datetime: "2020-09-20",
iconBackground: "bg-gray-400",
script_jckk670hclf9o7k3rtqn
@zrw
An interactive, runnable TypeScript val by zrw
Script
import _ from "npm:lodash-es";
let numbers = _.range(10);
export const untitled_scarletLlama = numbers.map(n => n * 2);
Fetch
@hunty
Fetch Template Example template to quickly get started with a backend for Fetch in Framer.
HTTP (deprecated)
# Fetch Template
Example template to quickly get started with a backend for Fetch in Framer.
import { cors } from "npm:hono/cors";
const app = new Hono();
app.use(cors());
app.get("/", async (c) => {
return c.json({ text: "Hello World" });
export default app.fetch;
tiny_jest_example
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
Script
import { expect, prettify, Test } from "npm:tiny-jest";
const { it, run, title } = new Test("basic");
it("2+2=4", () => {
expect(2 + 2).toBe(4);
it("1+2=4", async () => {
expect(1 + 2).toBe(4);
run().then(prettify);