Search results for "react client side"

weatherAppTR

@fehmi17

@jsxImportSource https://esm.sh/react

0

HTTP

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

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

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

import { motion, AnimatePresence } from "https://esm.sh/framer-motion";

</motion.div>

function client() {

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

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

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

indielogin_example

@pomdtr

@jsxImportSource npm:hono/jsx

0

HTTP

const val = extractValInfo(import.meta.url);

const clientID = new URL("/", val.httpEndpoint).toString();

const redirectURI = new URL("/redirect", val.httpEndpoint).toString();

</p>

"code": query.code,

"client_id": clientID,

"redirect_uri": redirectURI,

fal_demo

@stevekrouse

@jsxImportSource https://esm.sh/hono@latest/jsx

1

HTTP

/** @jsxImportSource https://esm.sh/hono@latest/jsx **/

import { Hono } from "https://esm.sh/hono";

import { generateImage } from "https://esm.town/v/isidentical/falImageGen";

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

const app = new Hono();

sqliteExplorerApp

@tay

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

0

HTTP

- [ ] 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

return c.render(

sqliteExplorerApp

@feb

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

0

HTTP

- [ ] 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

return c.render(

dot_com

@horatiothomas

stevekrouse.com - my personal website This val hosts my personal website. The view data is stored in Val Town SQLite - @std/sqlite. It used to live on Github Pages, which is why I proxy over requests to certain blog posts over to the Github Pages site still. Todos [ ] Speed up page load by loading sqlite data later like in @healeycodes/steve_web [ ] Store more (legally storable) analytics data, and maybe make a sparkline! [ ] Add some sort of way to contact me [ ] Move over all my blog posts from Github Pages (maybe into @std/blob as a CMS?)

0

HTTP

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

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

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

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

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

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

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

{ children, href }: {

children?: React.ReactNode;

href: string;

{url.searchParams.get("dev")

? <ReloadScriptReactElement vals={[{ valName: "dot_com", userHandle: "stevekrouse" }]} />

: null}

engraft_wikipedia

@joshuahhh

An interactive, runnable TypeScript val by joshuahhh

0

HTTP

import { makeBasicContext } from "npm:@engraft/basic-setup@0.0.7";

import { EngraftPromise, RefuncMemory, runTool, ToolProgram } from "npm:@engraft/hostkit@0.0.7";

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

export default async function() {

const mem = new RefuncMemory();

preact

@stevekrouse

An interactive, runnable TypeScript val by stevekrouse

10

0

Script

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

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

export let preact = jsx => html(render(jsx));

cerebrasTemplate

@stevekrouse

Cerebras Inference template This val shows you how you can deploy an app using Cerebras Inference on Val Town in seconds. What is Cerebras? Cerebras is an American chip manufacturer that produces large wafer chips that deliver mind-blowing LLM inference speeds. As of this writing on Jan 17, 2025, Cerebras Inference provides Llama 3.18b, 3.1 70b, and 3.370b at a jaw-dropping 2k tokens per second – that's 50x faster than what the frontier labs produce. Llama 3.370b at 2k tokens per second is particularly noteworthy because it is a GPT-4-class model . This level of intelligence at that level of speed will unlock whole new classes of applications. Quick start Set up Cerebras Sign up for Cerebras Get a Cerebras API Key Save it in a Val Town environment variable called CEREBRAS_API_KEY Once Cerebras is set up in your Val Town account, there are two ways to get started: Fork this app and customize it (or ask Townie AI to customize it) Start a new chat with Townie AI and copy & paste the following instructions: . Use Cerebras for AI on the backend like so: const { OpenAI } = await import("https://esm.sh/openai"); const client = new OpenAI({ apiKey: Deno.env.get("CEREBRAS_API_KEY"), baseURL: "https://api.cerebras.ai/v1" }); const response = await client.chat.completions.create({ model: "llama-3.3-70b", messages: [], }); const generatedText = response.choices[0].message.content; For example, the val in this template was created by asking Townie AI to "Make a chatgpt clone", then I hit shift-enter twice, and then pasted in the instructions on how to use Cerebras from above, then hit enter. Townie built this app on its first try, in about 20 seconds. Sample apps Cerebras Searcher - a Perplexity clone that uses the SerpAPI to do RAG and summaries with Cerebras ( requires a SerpAPI key ) Cerebras Coder - an app that generates websites in a second with Cerebras Cerebras Debater - an app that truly shows Cerebras's speed: it's Cerebras talking to Cerebras in a debate

5

0

HTTP

const { OpenAI } = await import("https://esm.sh/openai");

const client = new OpenAI({

apiKey: Deno.env.get("CEREBRAS_API_KEY"),

baseURL: "https://api.cerebras.ai/v1"

const response = await client.chat.completions.create({

model: "llama-3.3-70b",

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

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

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

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> {

// Keep these comments so we remember not to change this

const client = new OpenAI({

apiKey: Deno.env.get("CEREBRAS_API_KEY"),

try {

const response = await client.chat.completions.create({

model: "llama-3.3-70b",

createGitHubContribGraph

@tmcw

@jsxImportSource https://esm.sh/react

0

HTTP

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

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

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

const SCALES = {

</div>

function client() {

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

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

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

todoApp

@arfan

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

0

HTTP

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

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

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

interface TodoItem {

setIsDarkMode((prevMode) => !prevMode);

async function handleAddTodo(event: React.FormEvent<HTMLFormElement>) {

event.preventDefault();

</div>

function mountClient() {

const rootElement = document.getElementById("root");

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

mountClient();

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

reactExample

@nbbaier

@jsxImportSource https://esm.sh/react

2

0

Script

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

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

export const reactExample = () =>

new Response(renderToString(<div>Test {1 + 1}</div>), {

mindfulBlackBeetle

@yasinarfaht

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

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(

hydrate_island

@pomdtr

An interactive, runnable TypeScript val by pomdtr

1

Script

if (!island) {

throw new Error("Could not find island");

const { hydrateRoot } = await import("https://esm.sh/react-dom@18.2.0/client");

const { jsx: _jsx } = await import("https://esm.sh/react@18.2.0/jsx-runtime");

const src = island.getAttribute("data-hydration-src");

console.log(`hydrating ${src}`);

emeraldRaccoon

@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

0

HTTP

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