Search
tldraw_computer_example
@steveruizok
tldraw computer custom endpoint example This val is an example custom endpoint for tldraw computer 's data component. Usage To use this val with tldraw.computer, follow these steps: Fork this Val. Click the Copy endpoint button on your new Val. Open a project on tldraw.computer Create a Data component in your tldraw computer project In the Source dropdown, select Custom and the POST method Paste the endpoint into Data component's the HTTP Endpoint input. Run the component. To see the output, connect the Data component to a Text component. How it works In tldraw computer, you can configure a Data component to use a custom HTTP endpoint as its data source. You can also configure the request method, either GET or POST. If a Data component's request method is POST, then when the component next updates, it will send a POST request to the endpoint. The request's body will contain an array of the Data objects that the component had received as inputs. If the request method if GET, then the component will only make the request—its body will be empty. In both cases, the component will expect back a response that includes an array of Data objects these objects will be passed along as the data component's outputs. The endpoint (your forked version of this Val) can do whatever it likes between the request and response, but the response must include data in the correct format. If the format is wrong, the computer app will create a text data object instead that includes the response as plain text. Support If you're running into any difficulties, check out the #tldraw-computer channel on the tldraw discord.
HTTP
ok: false;
error: string;
export default async function(req: Request): Promise<Response> {
if (req.method === "GET") {
// handle a GET request
sql_search
@pomdtr
An interactive, runnable TypeScript val by pomdtr
HTTP
import { zip } from "https://esm.town/v/pomdtr/sql";
import { db } from "https://esm.town/v/sqlite/db?v=9";
export default async function(req: Request) {
const url = new URL(req.url);
if (!url.searchParams.has("query")) {
youthfulCoffeeDolphin
@parthstown
An interactive, runnable TypeScript val by parthstown
HTTP
export default async function(req: Request): Promise<Response> {
return Response.json(req.body);
preactWebApp
@easrng
@easrng.preactWebApp
Make a web app on val.town with server-side rendered Preact components
Script
export const preactWebApp = (function () {
type propType =
setHeaders: (headers: {
blobImages
@jdan
Image downsizer and uploader
HTTP
import { fileToDataURL } from "https://esm.town/v/stevekrouse/fileToDataURL";
import { modifyImage } from "https://esm.town/v/stevekrouse/modifyImage";
import { chat } from "https://esm.town/v/stevekrouse/openai";
import { Hono } from "npm:hono@3";
function esmTown(url) {
return fetch(url, {
headers: {
valle_tmp_56457642603391172894490485802641
@janpaul123
// This val will respond with a simple HTML page saying "Hello, world!" with fun CSS styles
HTTP
// This val will respond with a simple HTML page saying "Hello, world!" with fun CSS styles
export default async function main(): Promise<Response> {
const htmlContent = `
<!DOCTYPE html>
doStuff
@mantas_
An interactive, runnable TypeScript val by mantas_
Script
import { fetch } from "https://esm.town/v/std/fetch";
export async function doStuff() {
const data = await fetch("https://pokeapi.co/api/v2/pokemon/1")
.then((res) => res.json())
valle_tmp_305701972711345937273198924748763
@janpaul123
// This val will respond with a colorful and fun HTML page
HTTP
// This val will respond with a colorful and fun HTML page
export default async function main(): Promise<Response> {
const htmlContent = `
<!DOCTYPE html>
amaranthYak
@stevekrouse
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 (v66) 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 [ ] 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 [ ] 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
- [x] make result tables scrollable
- [x] add export to CSV, and JSON (CSV and JSON helper functions written in [this val](https://www.val.town/v/nbbaier/sqliteExportHelpers). Thanks to @pomdtr for merging the initial version!)
- [x] add listener for cmd+enter to submit query
valle_tmp_968339782978865140044532832103386
@janpaul123
// This val will simply respond with "Hello, World!" to any incoming HTTP request.
HTTP
// This val will simply respond with "Hello, World!" to any incoming HTTP request.
export default async function main(req: Request): Promise<Response> {
return new Response("Hello, World!");
valle_tmp_8772577792541712013582363429356
@janpaul123
// This val will respond to any request with an HTML "Hello, world!" message with some fun CSS styles and an animated cat
HTTP
// This val will respond to any request with an HTML "Hello, world!" message with some fun CSS styles and an animated cat
export default async function(req: Request): Promise<Response> {
const html = `
<html>
getCNNNewsShort
@fab1an
An interactive, runnable TypeScript val by fab1an
Script
import { fetch } from "https://esm.town/v/std/fetch";
export async function getCNNNewsShort() {
const response = await fetch(
"https://saurav.tech/NewsAPI/everything/cnn.json"
const data = await response.json();
const { articles } = data;
// Function to strip HTML tags from a string
const stripHtmlTags = (str) => {
const regex = /(<([^>]+)>)/gi;
myApi
@tamlyn
An interactive, runnable TypeScript val by tamlyn
Script
export function myApi(name) {
return "hi " + name;
sereneTanWolf
@Manju
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
function LinkInBio() {
const links = [
</div>
function client() {
createRoot(document.getElementById("root")).render(<LinkInBio />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
return new Response(`
discordBot
@dglazkov
A simple Discord Bot scaffolding, a slight rev on the one in the valtown guide . The discordBot function takes in an object where each key is a Discord command and the value is a function to handle the command. If the function returns a Promise , it will be handled as a deferred interaction with a followup message . Usage:
import { discordBot } from "https://esm.town/v/dglazkov/discordBot";
const echo = async (data) => {
await new Promise((r) => setTimeout(r, 5000));
return {
type: 4,
data: {
content: data.data.options[0].value,
},
};
};
export default discordBot({
ping: () => ({
type: 4,
data: {
content: `Pong! It is ${new Date()}`,
},
})
echo,
});
Script
A simple Discord Bot scaffolding, a slight rev on the one in the [valtown guide](https://docs.val.town/integrations/discord/how-to-make-a-discord-bot-hosted-24-7-for-free-in-/).
The `discordBot` function takes in an object where each key is a Discord command and the value is a function to handle the command. If the function returns a `Promise`, it will be handled as a deferred interaction with a [followup message](https://discord.com/developers/docs/interactions/receiving-and-responding#followup-messages).
Usage: