Search

htmxCounterExample

@yawnxyz

An interactive, runnable TypeScript val by yawnxyz

HTTP (deprecated)

/** @jsx jsx **/

/** @jsx jsx */

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

import { jsx } from "https://deno.land/x/hono@v3.11.7/middleware.ts";

import { Hono } from "https://deno.land/x/hono@v3.11.7/mod.ts";

linkInBioTemplate

@stevekrouse

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

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

export default async function(req: Request) {

return new Response(

fluxImageGenerator

@danyslicer

// This app uses the fal.ai API to generate images based on user prompts.

HTTP

// React is used for the UI and the fal.ai serverless client for image generation.

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

import * as fal from "https://esm.sh/@fal-ai/serverless-client";

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

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

function client() {

client();

async function checkRateLimit(clientIP: string): Promise<boolean> {

const key = `xratelimit_${clientIP}`;

let clientData = await blob.getJSON<RateLimitData>(key);

iconExplorer

@all

Icon Explorer [ ] Dropdown for Popular Libraries [ ] Color [ ] Fix Filtering

HTTP

* The approach uses React for the frontend and react-icons library for icon rendering.

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

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

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

import * as FiIcons from "https://esm.sh/react-icons/fi";

import * as FaIcons from "https://esm.sh/react-icons/fa";

import * as AiIcons from "https://esm.sh/react-icons/ai";

`import { ${icon.name} } from 'react-icons/${icon.prefix.toLowerCase()}';`

function client() {

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

valcontributionchart

@iamseeley

// This approach will fetch data from the specified endpoint, process it to create a GitHub-style contribution chart,

HTTP

// This approach will fetch data from the specified endpoint, process it to create a GitHub-style contribution chart,

// and render it using React. We'll use the fetch API to get the data, process it to create a heatmap-like structure,

// and then use CSS Grid to render the chart with varying shades of green based on the number of vals created each day.

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

import React, { useState, useEffect } 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(); }

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

RefiComparison

@jbwinters

* This app creates a comprehensive mortgage refinance offer comparison tool. * It calculates monthly payments, total interest paid, and displays charts for visual comparison. * It uses React for the frontend, Chart.js for data visualization, and Val Town's blob storage for data persistence.

HTTP

* It calculates monthly payments, total interest paid, and displays charts for visual comparison.

* It uses React for the frontend, Chart.js for data visualization, and Val Town's blob storage for data persistence.

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

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

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

import Chart from "https://esm.sh/chart.js/auto";

console.error("Error fetching offers:", error);

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {

const { name, value } = e.target;

return (monthlyPayment * termYears * 12) - principal;

const handleSubmit = async (e: React.FormEvent) => {

e.preventDefault();

</div>

function client() {

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

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

client();

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

valcontributionchart

@ejfox

// This approach will fetch data from the specified endpoint, process it to create a GitHub-style contribution chart,

HTTP

// This approach will fetch data from the specified endpoint, process it to create a GitHub-style contribution chart,

// and render it using React. We'll use the fetch API to get the data, process it to create a heatmap-like structure,

// and then use CSS Grid to render the chart with varying shades of green based on the number of vals created each day.

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

import React, { useState, useEffect } 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(); }

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

legitimateTanTiger

@sharanbabu

* This code creates a search engine prototype with autocomplete functionality using the Cerebras LLM API. * It uses React for the frontend and the Cerebras API for generating autocomplete suggestions. * The suggestions are cached in the browser to reduce API calls. * It implements a two-step LLM process: first to get initial suggestions, then to filter them for sensibility and ethics. * If the second LLM call fails, it displays "Failed to fetch" instead of showing results.

HTTP

* This code creates a search engine prototype with autocomplete functionality using the Cerebras LLM API.

* It uses React for the frontend and the Cerebras API for generating autocomplete suggestions.

* The suggestions are cached in the browser to reduce API calls.

* If the second LLM call fails, it displays "Failed to fetch" instead of showing results.

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

import debounce from "https://esm.sh/lodash.debounce";

import React, { useEffect, useRef, 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();

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

multiroutePreact

@iamseeley

🌐 Multi-Route Website with Preact

HTTP (deprecated)

🌐 Multi-Route Website with Preact

* @title Multi-Route Website with Preact

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

/** @jsxImportSource npm:preact */

import { h } from 'npm:preact';

import renderToString from 'npm:preact-render-to-string';

import { websiteStyles } from "https://esm.town/v/iamseeley/websiteStyles";

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

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

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

</main>

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

<style>

reactExample

@Negash

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

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

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

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

export const reactExample = modifyFetchHandler(async (request: Request) => {

const url = new URL(request.url);

religionClickerGame

@roramigator

// This val creates a sarcastic idle clicker game about starting a religion.

HTTP (deprecated)

// This val creates a sarcastic idle clicker game about starting a religion.

/** @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() {

return descriptions[key] || "Mystery achievement. Very mysterious indeed.";

function client() {

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

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

client();

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

stevekrouse_minimal

@stevekrouse

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

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

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

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

const linkClass = "text-blue-500 hover:underline";

return { allHits, todayHits };

export const reactExample = modifyFetchHandler(async (request: Request) => {

const url = new URL(request.url);

geocode

@stevekrouse

* This code creates a geocoder widget similar to the Google Maps API search widget. * It uses React for the frontend, the Cerebras API for LLM-based geocoding, * and Leaflet for displaying the map.

HTTP

* This code creates a geocoder widget similar to the Google Maps API search widget.

* It uses React for the frontend, the Cerebras API for LLM-based geocoding,

* and Leaflet for displaying the map.

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

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

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

import debounce from "https://esm.sh/lodash.debounce";

</div>

function client() {

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

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

client();

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

infoboxCrawler

@jdan

@jsxImportSource https://esm.sh/react

1 2

HTTP

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

import cheerio from "https://esm.sh/cheerio@1.0.0-rc.12";

import cytoscape from "https://esm.sh/cytoscape@3.23.0";

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

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

cytoscape.use(dagre);

</div>

function client() {

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

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

client();

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

closedChocolateMarmoset

@jdan

@jsxImportSource https://esm.sh/react

HTTP

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

import cheerio from "https://esm.sh/cheerio@1.0.0-rc.12";

import cytoscape from "https://esm.sh/cytoscape@3.23.0";

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

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

cytoscape.use(dagre);

</div>

function client() {

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

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

client();

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

…

9 10

12 13

…

184