Search

knowledgeExplorer

@sharanbabu

* This val creates a modern, stylish knowledge explorer using the Cerebras LLM API. * It allows users to enter a topic or select from suggestions, displays information in a centered card, * and enables exploration of related topics or deeper dives using arrow keys or buttons.

HTTP

* and enables exploration of related topics or deeper dives using arrow keys or buttons.

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

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

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

const SUGGESTIONS = ["Quantum Computing", "Renaissance Art", "Climate Change", "Artificial Intelligence", "Space Exploration"

</div>

function client() {

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

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

client();

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

const Cerebras = (await import("https://esm.sh/@cerebras/cerebras_cloud_sdk")).default;

const client = new Cerebras({

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

try {

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

messages: [

bigFuchsiaHalibut

@breeze4

* This React app creates a search interface with a navbar and two equal-width panels. * It includes a search input on the left and displays search results as cards on the right. * The search functionality is simulated with a static list of items.

HTTP

* This React app creates a search interface with a navbar and two equal-width panels.

* It includes a search input on the left and displays search results as cards on the right.

* The search functionality is simulated with a static list of items.

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

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

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

// Simulated data for search results

cursor: 'pointer',

function client() {

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

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

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

VALLErun

@janpaul123

The actual code for VALL-E: https://www.val.town/v/janpaul123/VALLE

1 10 35

HTTP (deprecated)

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

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

consider it part of the current conversation. The conversation below is your recent interaction with the user.

You can use React but you don't have to.

currentCode = `/** @jsxImportSource https://esm.sh/react */

import React from "npm:react";

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

You can use React but you don't have to.

DON'T respond with a preamble (aside from saying "Certainly", "Of course", "Let's do it", or something similar) or further ex

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

preactWebApp

@easrng

@easrng.preactWebApp Make a web app on val.town with server-side rendered Preact components

Script

# @easrng.preactWebApp

[![Example](https://easrng-button.express.val.run/Example)](https://www.val.town/v/easrng.examplePreactWebApp/)

Make a web app on val.town with server-side rendered Preact components

export const preactWebApp = (function () {

| import("npm:preact@10.17.0").VNode<

import("npm:preact@10.17.0").Attributes

| import("npm:preact@10.17.0").VNode<

import("npm:preact@10.17.0").Attributes

& typeof import("npm:preact@10.17.0")

& typeof import("npm:preact@10.17.0/hooks");

const preactWebApp =

(App: (_: propType) => import("npm:preact@10.17.0").VNode) =>

const preact = await import("npm:preact@10.17.0");

sqliteExplorerApp

@nbbaier

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

46 11 19

HTTP (deprecated)

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

starlightFaker

@kylem

Generate fake doc pages for testing in Starlight with its built in components and hacker jargon from Faker . If you are looking to add the required title frontmatter for a batch of files you can use this python script to interpret the title from the filename.

HTTP

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

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

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

import ReactMarkdown from "https://esm.sh/react-markdown";

import remarkGfm from "https://esm.sh/remark-gfm";

<ReactMarkdown remarkPlugins={[remarkGfm]}>{markdown}</ReactMarkdown>

</div>

function client() {

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

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

const css = `

reacttldraw

@janpaul123

tldraw example with builder, for consistent React versions.

HTTP (deprecated)

tldraw example with builder, for consistent React versions.

<head>

<title>TLDraw React Example</title>

</body>

todoListUsingBlob

@muhammad_owais_warsi

A simple TODO list using Blob Storage

HTTP

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

</div>

function client() {

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

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

client();

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

Spline

@muhammad_owais_warsi

Spline

HTTP

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

// Load the Spline component dynamically

import("https://esm.sh/@splinetool/react-spline@2.2.6")

.then((module) => {

</div>

function client() {

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

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

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

QR_Generator

@muhammad_owais_warsi

QR Code Generator

HTTP

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

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

tinybase_example_client

@pomdtr

@jsxImportSource https://esm.sh/react

Script

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

import ReactDom from "https://esm.sh/react-dom";

import { createStore } from "https://esm.sh/tinybase";

import { createRemotePersister } from "https://esm.sh/tinybase/persisters/persister-remote";

import { useValue } from "https://esm.sh/tinybase/ui-react";

// The store is automatically persisted on the remote server

</main>

const root = ReactDom.createRoot(document.body);

root.render(<App />);

lucia_middleware_vanilla

@stevekrouse

Lucia Middleware Import users. Backed by Val Town SQLite. Demo: @stevekrouse/lucia_middleware_demo Initially built by @pomdtr.

1 1

HTTP (deprecated)

// It provides signup, login, and logout functionality with session management.

// The main tradeoff is the complexity of setting up Lucia, but it offers robust auth features.

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

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

import { createUser, getUser, verifyPassword } from "https://esm.town/v/stevekrouse/lucia_sqlite";

import { Lucia, Session, User } from "npm:lucia@3.0.1";

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

import { CookieJar } from "https://deno.land/x/cookies/mod.ts";

const userTable = "user";

rainyAquamarineDonkey

@arthrod

@jsxImportSource https://esm.sh/react

HTTP

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

import React from "https://esm.sh/react";

import styled, { keyframes } from "https://esm.sh/styled-components";

</div>

function client() {

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

if (root) {

import("https://esm.sh/react-dom/client").then(({ createRoot }) => {

createRoot(root).render(<App />);

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

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

react_example_server

@nbbaier

// The server response includes a script referencing the client val

HTTP (deprecated)

// The server response includes a script referencing the client val

export const server = (req) =>

<head>

<title>React Example</title>

</head>

</body>

routineTrackerApp

@ashryanio

Routine Tracker This is a little React component to make our 7yo's after school routine self-serve so she can be a bit more independent after school. To change the items in the list, modify the routineTasks array of objects: [ {name: "item", timed: false}, {name: "item 2", timed: true, duration: 2 * 60 } {name: "item 3", timed: false, requiresParent: true} ] You can set the parent password on this line: const PARENT_PASSWORD_HASH = simpleHash("1234"); Todos Make the parent password modal touch friendly Track dates/times of list completions Show a tracker of how many completions this week

HTTP

# Routine Tracker

This is a little React component to make our 7yo's after school routine self-serve so she can be a bit more independent after

To change the items in the list, modify the `routineTasks` array of objects:

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

import confetti from "https://esm.sh/canvas-confetti@1.6.0";

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

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

const routineTasks = [

</div>

function client() {

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

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

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

…

7 8

10 11

…

184