Search

killamix

@all

@jsxImportSource https://esm.sh/react

HTTP

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

import React, { useState, useEffect, useCallback, useRef } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

// Text prompt mappings for encoders

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") {

client();

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

instagramAnalyzeUnfollowers

@nulo

@jsxImportSource https://esm.sh/react

HTTP

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

import JSZip from "https://esm.sh/jszip@3.10.1";

import React, { 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> {

REACT_CDN_VAL

@liamdanielduffy

An interactive, runnable TypeScript val by liamdanielduffy

Script

import { REACT_MINIFIED } from "https://esm.town/v/liamdanielduffy/REACT_MINIFIED";

export function REACT_CDN_VAL(req, res) {

res.set("Content-Type", "text/javascript");

res.send(REACT_MINIFIED);

cerebras_coder

@diegoivo

This is an AI code assistant powered by Cerebras , running llama3.3-70b. Inspired by Hassan's Llama Coder . Setup Sign up for Cerebras Get a Cerebras API Key Save it in a Val Town environment variable called CEREBRAS_API_KEY Todos I'm looking for collaborators to help. Fork & send me PRs! [ ] Experiment with two prompt chain (started here )

HTTP

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

import Cerebras from "https://esm.sh/@cerebras/cerebras_cloud_sdk";

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";

import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";

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

prompt: string;

setPrompt: React.Dispatch<React.SetStateAction<string>>;

handleSubmit: (e: React.FormEvent) => void;

handleStarterPromptClick: (promptItem: PromptItem) => void;

mathemagic

@gueejla

UI for mathematical visualizations and calculations

HTTP

/** @jsxImportSource npm:react **/

import { sillyCSS } from "https://esm.town/v/gueejla/sillyCSS";

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

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

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

const spellList = await blob.list();

valle_tmp_9571549127942918010434925760972602

@janpaul123

@jsxImportSource https://esm.sh/react

HTTP

/** @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";

jxnblkioVanillaJS

@jxnblk

Vanilla JS for https://val.town/v/jxnblk/dotcom – https://jxnblk.com

Script

// vanilla js client script for jxnblk.com

const API = "https://jxnblk-jxnblkio.web.val.run/";

let color = localStorage.getItem("color") || "light";

affableMagentaPlanarian

@willthereader

@jsxImportSource https://esm.sh/react

HTTP

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

import * as cheerio from "https://esm.sh/cheerio";

import React, { useEffect, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

console.log("Version: " + import.meta.url.match(/[?&]v=([^&]*)/)?.at(1));

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") {

client();

let currentProgress = null;

sqliteExplorerApp

@lecoto

SQLite Explorer View and interact with your Val Town SQLite data. It's based off Steve's excellent SQLite Admin val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by LibSQL Studio by invisal . This is now more an SPA, with tables, queries and results showing up on the same page. Install Install the latest stable version (v86) by forking this val: Authentication Login to your SQLite Explorer with password authentication with your Val Town API Token as the password. Todos / Plans [ ] improve error handling [ ] improve table formatting [ ] sticky table headers [x] add codemirror [ ] add loading indication to the run button (initial version shipped) [ ] add ability to favorite queries [ ] add saving of last query run for a table (started) [ ] add visible output for non-query statements [ ] add schema viewing [ ] add refresh to table list sidebar after CREATE/DROP/ALTER statements [ ] add automatic execution of initial select query on double click [x] add views to the sidebar [ ] add triggers to sidebar [ ] add upload from SQL, CSV and JSON [ ] add ability to connect to a non-val town Turso database [x] fix wonky sidebar separator height problem (thanks to @stevekrouse) [x] make result tables scrollable [x] add export to CSV, and JSON (CSV and JSON helper functions written in this val . Thanks to @pomdtr for merging the initial version!) [x] add listener for cmd+enter to submit query

HTTP

- [ ] add refresh to table list sidebar after `CREATE/DROP/ALTER` statements

- [x] add views to the sidebar

- [ ] add triggers to sidebar

.sidebar-layout {

.sidebar {

.not-sidebar {

.sidebar-layout {

.sidebar {

spotify

@anthonyec

// Uncomment this line for one run of the Val to create the DB lol

HTTP

export let spotifyRequestToken = ({ client_id, client_secret, code, redirect_uri }) =>

"Authorization": "Basic " + (new Buffer(client_id + ":" + client_secret).toString("base64")),

export let spotifyRefreshToken = async ({ refresh_token, client_id, client_secret }) =>

"Authorization": "Basic " + (new Buffer(client_id + ":" + client_secret).toString("base64")),

`https://accounts.spotify.com/authorize?response_type=code&client_id=${

encodeURIComponent(Deno.env.get("SPOTIFY_CLIENT_ID"))

client_id: Deno.env.get("SPOTIFY_CLIENT_ID"),

client_secret: Deno.env.get("SPOTIFY_CLIENT_SECRET"),

client_id: Deno.env.get("SPOTIFY_CLIENT_ID"),

client_secret: Deno.env.get("SPOTIFY_CLIENT_SECRET"),

dataUriGenApp

client side data uri generator

HTTP

client side data uri generator

* This application creates a client-side data URI generator with the following features:

* - File upload through input and drag-and-drop

* - Automatic MIME type detection

snakeGameReact

@Aditya230

@jsxImportSource https://esm.sh/react

HTTP

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

import React, { useState, useEffect, useRef } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

const BOARD_SIZE = 20;

</div>

function client() {

createRoot(document.getElementById("root")).render(<SnakeGame />);

if (typeof document !== "undefined") { client(); }

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

dateme_browse_react

@stevekrouse

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

Script

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

import isPointWithinRadius from "https://esm.sh/geolib/es/isPointWithinRadius";

import { useLoaderData } from "https://esm.sh/react-router-dom@6.23.0?deps=react@18.2.0,react-dom@18.2.0";

import date_me_doc_locations_geo from "https://esm.town/v/stevekrouse/date_me_doc_locations_geo";

return url;

// TODO - refactor this into a Cell React component

function renderCell(header, row) {

multirouteSvelte

@iamseeley

🌐 Multi-Route Website with Svelte

HTTP

* @title Multi-Route Website with Svelte

* @description Create a personal portfolio website with multiple pages using Svelte and server-side rendering.

import * as svelte from 'npm:svelte/compiler';

<p>${personalData.summary}</p>

<p><strong>This website is rendered server-side with Svelte.</strong></p>

<p>Check out the <a href='https://www.val.town/v/iamseeley/multirouteSvelte'>source</a> and start building your own sit

<title>${personalData.name} | Server-side Svelte</title>

<style>

randomMovieQuiz

@movienerd

@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";

// List of popular movies

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") {

client();

async function server(request: Request): Promise<Response> {

…

48 49

51 52

…

252