Search
npmExample
@geanu02
An interactive, runnable TypeScript val by geanu02
Script
export let npmExample = (async () => {
const _ = await import("npm:lodash-es"); // The Lodash library exported as ES modules.
return _.shuffle(_.zip([1, 2, 3, 4], [5, 6, 7, 8]));
![yawnxyz avatar](https://images.clerk.dev/oauth_github/img_2NnaHhpxNuH1xWRIRjQNoo16TVc.jpeg)
deletebio
@yawnxyz
An interactive, runnable TypeScript val by yawnxyz
HTTP
const app = new Hono();
app.use('*', cors({
origin: '*',
allowMethods: ['GET', 'POST'],
allowHeaders: ['Content-Type'],
const markdown = marked(`
- [ ] create bacteria
- [x] read bacteria
- [x] update bacteria
- [ ] delete bacteria
![sco avatar](https://images.clerk.dev/uploaded/img_2NngEe2Q3WDvTI4zoXUX7fuEpNa.png)
denoImportEx
@sco
An interactive, runnable TypeScript val by sco
Script
export let denoImportEx = (async () => {
// const { DOMParser } = await import(
// "https://deno.land/x/deno_dom/deno-dom-wasm.ts"
// const { BskyAgent, AtpSessionEvent, AtpSessionData } = await import(
// "npm:atproto/api"
// const _ = await import("npm:lodash-es"); // The Lodash library exported as ES modules.
const { BskyAgent } = await import("npm:@atproto/api");
// return _.shuffle(_.zip([1, 2, 3, 4], [5, 6, 7, 8]));
const agent = new BskyAgent({
service: "https://scottraymond.com",
maroonBadger
@masd1
// Cheerio accepts a CSS selector, here we pick the second <p>
Script
import { html, load } from "npm:cheerio";
const htmlStr = await fetchText(
"https://archive.is/pPFRB",
const $ = load(htmlStr);
// Cheerio accepts a CSS selector, here we pick the second <p>
const intro = $.html();
console.log(intro);
![neverstew avatar](https://secure.gravatar.com/avatar/109fa713caf4e083c57622b7c6dad365.jpg?s=200&d=identicon)
parseCommonElementsExample
@neverstew
An interactive, runnable TypeScript val by neverstew
Script
export const parseCommonElementsExample = (
$: import("npm:cheerio@1.0.0-rc.12").CheerioAPI,
element: import("npm:cheerio@1.0.0-rc.12").Element,
title: $(element).find("title").text(),
description: $(element).find("description, content").text(),
pubDate: $(element).find("pubDate, published, updated").first().text(),
mediaThumbnail: $(element).find("media\\:thumbnail, thumbnail").attr("url"),
tanCrane
@abhudson3
An interactive, runnable TypeScript val by abhudson3
HTTP
export default async function mylittlescraper(req) {
console.log(req.params);
const sourceUrl = `https://ssb.ua.edu/pls/PROD/ua_bwckschd.p_disp_detail_sched?term_in=202340&crn_in=43971`;
let siteText = await fetch(sourceUrl);
const $ = cheerio.load(await siteText.text());
const $numclass = $("table.datadisplaytable:nth-child(16) > tbody:nth-child(2) > tr:nth-child(2) > td:nth-child(3)");
const numberOfSeats = $numclass.text();
let isOpen = false;
if (Number.parseInt(numberOfSeats) > 0) {
isOpen = true;
react
@andreterron2
An interactive, runnable TypeScript val by andreterron2
Script
export const react = await import("npm:react");
iconExplorer
@all
Icon Explorer [ ] Dropdown for Popular Libraries [ ] Color [ ] Fix Filtering
HTTP (preview)
# Icon Explorer
- [ ] Dropdown for Popular Libraries
- [ ] Color
- [ ] Fix Filtering
* This val creates an icon library web explorer using multiple icon sets including Feather Icons.
* It displays a large flex grid of icons that users can search and filter.
* The approach uses React for the frontend and react-icons library for icon rendering.
* It includes a sandbox area where clicked icons are appended and can be copied together.
/** @jsxImportSource https://esm.sh/react */
// Categories for pillbox navigation
limeBadger
@tmcw
@jsxImportSource npm:hono@3/jsx
HTTP
/** @jsxImportSource npm:hono@3/jsx */
const app = new Hono();
app.get("/", async (c) => {
const response = await fetch("https://hacker-news.firebaseio.com/v0/topstories.json");
const storyIds = await response.json();
const storyResponse = await fetch(`https://hacker-news.firebaseio.com/v0/item/${storyIds[0]}.json`);
const story = await storyResponse.json();
return c.html(
<div>
<h1>{story.title}</h1>
npmExample
@phelan
An interactive, runnable TypeScript val by phelan
Script
import { fetch } from "https://esm.town/v/std/fetch";
export let npmExample = (async () => {
const ip = await import("npm:image-pixels"); // The Lodash library exported as ES modules.
const image = await fetch(
"https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png"
).then((r) => console.log(r));
//return ip();
npmExplorer
@all
NPM explorer
HTTP (preview)
# NPM explorer
* This val creates an enhanced NPM package explorer using the npm registry API.
* It displays a grid of npm packages with basic information, categories, and navigation.
* The approach uses React for the frontend and fetch for API calls.
* It includes a details view for each package, a link to the npm page, and category navigation.
* Icons are added for each category, and additional pill boxes are included for specific topics.
* Clicking on a category pill box loads related packages.
* The app includes a left column for categories and a right column for package details.
/** @jsxImportSource https://esm.sh/react */
const ITEMS_PER_PAGE = 30;
npmExample
@mtemple
An interactive, runnable TypeScript val by mtemple
Script
export let npmExample = (async () => {
const _ = await import("npm:lodash-es"); // The Lodash library exported as ES modules.
return _.shuffle(_.zip([1, 2, 3, 4], [5, 6, 7, 8]));
![jonbo avatar](https://images.clerk.dev/oauth_github/img_2TPc6zoaCKXU8JPkSZY3yWTXnA4.jpeg)
nearbyJonBo
@jonbo
// Forked from @tmcw.big_story_visualization
Script
export let nearbyJonBo = async (req, res) => {
const { default: htm } = await import("npm:htm");
const { default: vhtml } = await import("npm:vhtml");
const html = htm.bind(vhtml);
const raw = (html) =>
vhtml(null, {
dangerouslySetInnerHTML: { __html: html },
res.send(html`
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="display: grid; height: 100vh">
![stevekrouse avatar](https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg)
blackRodent
@stevekrouse
@jsxImportSource https://esm.sh/hono@latest/jsx
HTTP
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
export const projects = (c: Context) => {
return c.html(
<html>
<head>
<title>Projects</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}`,
![jplhomer avatar](https://images.clerk.dev/uploaded/img_2TUDCUguEkK3NdLVs1GOcKQ6lLO.jpeg)
honoExample
@jplhomer
// Forked from @tmcw.honoExample
Script
export const honoExample = async (req: Request) => {
const { Hono } = await import("npm:hono");
const app = new Hono();
app.get("/", (c) => c.text("Hono yes?"));
app.get("/yeah", (c) => c.text("Routing ok!"));
return app.fetch(req);
// Forked from @tmcw.honoExample