Search
feistyGrayMouse
@matrex
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react **/
import { renderToString } from "https://esm.sh/react-dom@18/server";
export default (req: Request) => {
return new Response(
TODOLIST
@AppleLamps
An interactive, runnable TypeScript val by AppleLamps
HTTP
#sidebar {
#sidebar.collapsed {
#sidebar.collapsed #list-container,
#sidebar.collapsed #add-list-btn,
#sidebar.collapsed #notes-btn,
#sidebar.collapsed #print-btn {
#sidebar-toggle {
#sidebar, .input-line, #overlay, #notes-modal {
page-break-inside: avoid;
<div id="sidebar">
StayWokeMedia
@LilPimpn86
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
/** @jsxImportSource https://esm.sh/react@18.2.0 **/
import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
export default (req: Request) => {
return new Response(
avatar
@jxnblk
Jxnblk's SVG avatar React import { Avatar } from "https://esm.town/v/jxnblk/avatar"; Props <Avatar
size={96}
color="tomato"
reverse={true}
/> SVG import { svg } from "https://esm.town/v/jxnblk/avatar"; img <img src="https://jxnblk-avatar.web.val.run" alt="Jxnblk" /> img params https://jxnblk-avatar.web.val.run?size=96&color=tomato&reverse=true md 
HTTP
**React**
```tsx
// jxnblk avatar.
/** @jsxImportSource https://esm.sh/react@18.3.1 */
import { renderToStaticMarkup } from "https://esm.sh/react-dom@18.3.1/server";
import { SVGProps } from "https://esm.sh/react@18.3.1";
type AvatarProps = SVGProps<SVGSVGElement> & {
fizzBuzzTest
@willthereader
Test Explorer Click on the play button next to list items to run them. Usage Fork this val Create new tests in any of vals (and export them) (see @pomdtr/example_test) import { assertEquals } from "https://deno.land/std@0.216.0/assert/mod.ts";
import { Test } from "https://esm.town/v/<account>/test_explorer";
export const exampleTestSuccess = new Test(() => {
assertEquals(1 + 1, 2);
});
export const exampleTestFailure = new Test(() => {
assertEquals(1 + 1, 3);
}); Go to https://<account>-test_explorer.web.val.run to run your test click on the val name to go to the val the tests are originating from click on the test name to run it ℹ️ You probably want to protect your test explorer behind an authentication middleware like @pomdtr/basicAuth Discovery mechanism In order to define a test, the user need to import the Test class from https://val.town/v/<account>/Test .
So we can use the api to search for vals containing the https://val.town/v/<account>/Test string to locate the vals containing tests. Next, we need to extract the tests from the val exports. We use exported instanceof Test to filter them (at some point we will probably use static analysis for this). TODO [x] persist test results in sqlite [x] Improve styling (help welcome ❤️) [ ] View logs in a modal [ ] Batch http requests
HTTP
/** @jsxImportSource https://esm.sh/react */
import React, { useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
const fizzBuzzTest = `
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") {
client();
async function runTests(valUrl: string, testCode: string) {
toughPinkPig
@schniggie
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react **/
import { renderToString } from "https://esm.sh/react-dom@18/server";
export default (req: Request) => {
return new Response(
authIdBase
@postpostscript
An interactive, runnable TypeScript val by postpostscript
Script
async function emailSignInLink(clientToken: string) {
qs.set("clientToken", clientToken);
const clientToken = qs.get("clientToken");
let clientPayload;
clientPayload = clientToken && await verifyThirdParty(clientToken, {
console.log("error verifying clientPayload", e);
if (!clientPayload) {
const { returnTo } = clientPayload;
redirectQS.set("clientToken", clientToken);
emailSignInLink(clientToken);
GameAwards2024PredictionGame
@bmitchinson
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
import React, { useEffect, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function App() {
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") {
client();
export default async function server(request: Request): Promise<Response> {
smallweb
@pomdtr
More details about smallweb at https://smallweb.run
Script
import { createClient, type NormalizeOAS } from "npm:fets@0.8.3";
import type openapi from "npm:smallweb@0.14.4";
if (!Deno.env.get("SMALLWEB_API_URL")) {
if (!Deno.env.get("SMALLWEB_API_TOKEN")) {
throw new Error("Missing SMALLWEB_API_TOKEN");
export const smallweb = createClient<NormalizeOAS<typeof openapi>>({
endpoint: Deno.env.get("SMALLWEB_API_URL"),
globalParams: {
anthropicProxy
@cephalization
https://simonwillison.net/2024/Aug/23/anthropic-dangerous-direct-browser-access/ THIS IS NO LONGER NECESSARY This Val will proxy anthropic HTTP requests from some frontend client, like langchain, so that you can utilize anthropic apis from the browser. Convert it to an HTTP val in order to use it (you may want to setup an ENV var / header to protect the endpoint with a secret key)
Script
THIS IS NO LONGER NECESSARY
This Val will proxy anthropic HTTP requests from some frontend client, like langchain, so that you can utilize anthropic apis from the browser.
Convert it to an HTTP val in order to use it (you may want to setup an ENV var / header to protect the endpoint with a secret key)
hnCloneLuciaOauth
@yawnxyz
Added Github Oauth support to the example this needed changes to lucia_middleware to take github auth and callback routes lucia_sqlite also needd changes to add a github_id field
HTTP
* Users can upvote each post exactly once and comment on stories in an infinitely nested style.
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import { luciaMiddleware } from "https://esm.town/v/yawnxyz/lucia_middleware_safe";
</html>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default luciaMiddleware(async function server(request: Request): Promise<Response> {
ChatGPTTextDefinitionUserscript
@willthereader
// @name Improved ChatGPT Text Definition with Follow-up Questions
Script
const contentElement = document.querySelector(".p-body-inner");
if (!contentElement) return { width: window.innerWidth, height: window.innerHeight };
const contentRect = contentElement.getBoundingClientRect();
const availableWidth = window.innerWidth - contentRect.right;
const availableHeight = window.innerHeight;
honoJsxHtmlTemplates
@yawnxyz
Base working example of combining Hono, React/JSX, and html templates
HTTP
Base working example of combining Hono, React/JSX, and html templates
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
import { renderToString } from "npm:react-dom/server";
import { Hono } from 'npm:hono'
import { html } from 'npm:hono/html'
shotclip
@kortina
SHOTCLIP Demo of embedding images with substrate , and querying them for semantic relevance. Use the query parameter prompt to control the search.
HTTP
/** @jsxImportSource npm:react **/
/** kortina
import process from "node:process";
import { renderToString } from "npm:react-dom@18/server";
import { QueryVectorStore, sb, Substrate } from "npm:substrate";
type ShotResult = {
notUberAccount
@vawogbemi
@jsxImportSource https://esm.sh/react@18.2.0
Script
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import { useAuth } from "https://esm.sh/@clerk/clerk-react?bundle-deps&deps=react@18.2.0";
import { init } from "https://esm.sh/@instantdb/react?deps=react@18.2.0";
import React from "https://esm.sh/react@18.2.0";
import { INSTANTDB_APP_ID } from "https://esm.town/v/vawogbemi/notUberConsts";