Search

animatedReadmeSVG

@willthereader

Fancy animated SVGs in readmes, along with centering and image sizing. <div align="center"><img width=200 src="https://gpanders.com/img/DEC_VT100_terminal.jpg"></div> <p align="center"> <img src="https://maxm-animatedreadmesvg.web.val.run/comet.svg" /> </p> <p align="center"> <img src="https://maxm-animatedreadmesvg.web.val.run/custom text!" /> </p>

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/react */

import { renderToString } from "npm:react-dom/server";

const genSVG = (request: Request): string => {

</svg>,

export const reactExample = (request: Request) =>

new Response(

createReplitDBClient

@claytn

NOTE: THIS CLIENT DOES NOT WORK AS EXPECTED. ALL VALS IN VAL TOWN ARE JSON.stringify-ied SO RETURNED CLOSURES AREN'T SUPPORTED USE THE INDIVIDUAL FUNCTIONS INSTEAD: @claytn.replitGet @claytn.replitSet @claytn.replitDelete @claytn.replitList

Script

NOTE:

THIS CLIENT DOES NOT WORK AS EXPECTED. ALL VALS IN VAL TOWN

ARE JSON.stringify-ied SO RETURNED CLOSURES AREN'T SUPPORTED

@claytn.replitList

/** Database client for replit's key-value store */

export function createReplitDBClient(REPLIT_DB_URL) {

return {

sparklineEx

@stevekrouse

Server-Rendered React Sparkline Example Vaguely inspired by Easy SVG sparklines , but totally different because that had zero dependencies and this has all the dependencies: react, htm, react-sparklines. This is the live-generated SVG that this very val generates: ![Example SVG Sparkline](https://stevekrouse-sparklineex.web.val.run) It visualizes the amount of times that it itself has been viewed. The data for this val is kept in @stevekrouse.sparklineExData .

HTTP

# Server-Rendered React Sparkline Example

fferent because that had zero dependencies and this has all the dependencies: react, htm, react-sparklines.

This is the live-generated SVG that this very val generates:

/** @jsxImportSource https://esm.sh/react */

import { blob } from "https://esm.town/v/std/blob?v=12";

import { today } from "https://esm.town/v/stevekrouse/today";

import { renderToString } from "npm:react-dom/server";

import { Sparklines, SparklinesLine } from "npm:react-sparklines";

export const sparklineEx = async (req: Request) => {

solidExample

@rayman

@jsxImportSource https://esm.sh/solid-jsx

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/solid-jsx */

import StlViewer from "npm:react-stl-viewer";

import { renderToString } from "npm:solid-js/web";

function StlViewer() {

private_fal_model

@turbo1912

@jsxImportSource https://esm.sh/react

Cron

/** @jsxImportSource https://esm.sh/react */

import fal from "npm:@fal-ai/serverless-client";

import { renderToString } from "npm:react-dom/server";

export default async function(interval: Interval) {

getClientID

@beneskildsen

An interactive, runnable TypeScript val by beneskildsen

RPC

import { getItem } from "https://esm.town/v/beneskildsen/getItem";

export const getClientID = async () => {

const nextClientID = getItem("nextClientID", "clients");

await setItem("nextClientID", nextClientID + 1, "clients");

return nextClientID;

nvc

@stevekrouse

Non-Violent Communication (NVC) Mobile Worksheet Inspired by the lovely iGrok mobile app .

HTTP

/** @jsxImportSource https://esm.sh/react */

import { modifyHtmlString } from "https://esm.town/v/andreterron/codeOnValTown?v=46";

import { renderToString } from "npm:react-dom/server";

export const reactExample = (request: Request) =>

new Response(

<div>compassion</div>

<div>consideration</div>

<div>empathy</div>

slack_cleaner

@stevekrouse

Paste messages from Slack, get clean markdown This little webapp is intended to make it easier to copy messages from Slack into other places for sharing or archival, with cleaned-up, readable formatting. I hacked it together on valtown with copious help from an LLM over a weekend; please propose changes or edits, as I'm sure I missed many use-cases and edge-cases. This app runs entirely in your browser and does not send your data anywhere.

HTTP (deprecated)

white-space: pre-wrap;

word-wrap: break-word;

/* Style for <code> inside <pre>, overriding standalone <code> styles */

#renderedMarkdown pre > code {

/* Reset or adjust styles for code inside pre */

background-color: transparent;

padding: 0;

jadeGopher

@willthereader

ChatGPT Implemented in Val Town Demonstrated how to use assistants and threads with the OpenAI SDK and how to stream the response with Server-Sent Events

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/react */

import OpenAI from "npm:openai";

import { renderToString } from "npm:react-dom/server";

const openai = new OpenAI();

return new Response(renderToString(jsx), { headers: { "Content-Type": "text/html" } });

const clientCode = () => {

document.getElementById("input").addEventListener("submit", function(event) {

</form>

</script>

valle_tmp_54846529024345792066850117206065

@janpaul123

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/react */

import valleGetValsContextWindow from "https://esm.town/v/janpaul123/valleGetValsContextWindow";

import archiveVal from "https://esm.town/v/nbbaier/archiveVal?v=10";

import _ from "npm:lodash@4";

import OpenAI from "npm:openai";

import { renderToString } from "npm:react-dom/server";

// Set these to your own

const username = "janpaul123";

mootex

@maxm

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/react */

import hljs from "npm:highlight.js";

import { renderToString } from "npm:react-dom/server";

// Example code snippet

const codeExample = `import mootex from "https://esm.sh/mootex"

arctangent2024

@aleaf

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/react */

import { renderToString } from "npm:react-dom/server";

const lineup = [

"date": "14 Wednesday",

tomatoSawfish

@tempguy

@jsxImportSource https://esm.sh/preact

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/preact */

import { render } from "npm:preact-render-to-string";

export default async function(req: Request) {

return new Response(

valTownChatGPT

@mttlws

ChatGPT Implemented in Val Town Demonstrated how to use assistants and threads with the OpenAI SDK and how to stream the response with Server-Sent Events.

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/react */

import OpenAI from "npm:openai";

import { renderToString } from "npm:react-dom/server";

// This uses by personal API key, you'll need to provide your own if

return new Response(renderToString(jsx), { headers: { "Content-Type": "text/html" } });

const clientCode = () => {

document.getElementById("input").addEventListener("submit", async function(event) {

</form>

</script>

valTopicGen

@roramigator

// This val creates a weekly topic generator for Val Town developers to focus their creativity.

HTTP

// The current topic is stored in blob storage, and a new topic is selected each week.

// The val provides an HTTP endpoint to view the current topic and when it will change.

import { jsx } from "https://esm.sh/react/jsx-runtime";

import { blob } from "https://esm.town/v/std/blob";

const topics = [

export default async function server(req: Request): Promise<Response> {

const currentTopic = await getCurrentTopic();

const { renderToString } = await import("https://esm.sh/react-dom/server");

const topicDisplayHtml = renderToString(TopicDisplay(currentTopic));

return new Response(

…

29 30

32 33

…

184