Search

function App() {

const [page, setPage] = useState("home");

const [showModal, setShowModal] = useState(false);

const [amount, setAmount] = useState("");

const [userEntry, setUserEntry] = useState(null);

const [leaderboard, setLeaderboard] = useState([

{ name: "Passenger #1", amount: 1000 },

{ name: "Passenger #2", amount: 950 },

{ name: "Passenger #3", amount: 900 },

const nanoid = customAlphabet("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", 10);

export interface DataSheet {

site: "dood" | "streamtape" | null;

siteSpecificId: string;

extractedURL: string;

accessHeaders: {};

fromCache: boolean;

subtitles?: {

language: string;

url: string;

View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) 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](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page.


Install the latest stable version (v86) by forking this val:

[)](https://www.val.town/v/nbbaier/sqlite_explorer/fork)

EditorSection,

MockTable,

Separator,

This Todo App is server rendered *and* client-hydrated React. This architecture is a lightweight alternative to NextJS, RemixJS, or other React metaframeworks with no compile or build step. The data is saved server-side in [Val Town SQLite](https://docs.val.town/std/sqlite/).


This ["framework"](https://www.val.town/v/stevekrouse/ssr_react_mini) is currently 44 lines of code, so it's obviously not a true replacement for NextJS or Remix.

The trick is [client-side importing](https://www.val.town/v/stevekrouse/ssr_react_mini?v=53#L30) the React component that you're [server rendering](https://www.val.town/v/stevekrouse/ssr_react_mini?v=53#L35-37). Val Town is uniquely suited for this trick because it both runs your code server-side and exposes vals as [modules](https://esm.town/v/stevekrouse/TodoApp) importable by the browser.

export async function loader(req: Request) {

const { sqlite } = await import("https://esm.town/v/std/sqlite?v=4");

const [, { columns, rows }] = await sqlite.batch([

View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) 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](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page.


Install the latest stable version (v86) by forking this val:

[)](https://www.val.town/v/nbbaier/sqlite_explorer/fork)

EditorSection,

MockTable,

Separator,

function absoluteURL(url) {

if (url.startsWith("http://") || url.startsWith("https://"))

return url;

else return "https://" + url;

let headers = [

"Name",

"Age",

"Gender",

"InterestedIn",

const route = new Hono();

route.get("/", (c) => {

return c.render(

<form method="POST" enctype="multipart/form-data">

<input name="file" type="file" />

<input type="submit" value="Upload" />

</form>,

route.post("/", async (c) => {

const { file } = await c.req.parseBody();

import { renderToString } from "npm:solid-js/web";

export const solidExample = async () =>

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

headers: {

"Content-Type": "text/html",

Displays the current day's weather information BIG so you can see it from far away.


Currently it's hardcoded for:

- prospect heights, brooklyn

- charts of the temp and % change of precipitation

import { renderToString } from "npm:solid-js/web";

function calc() {

return 4 + 5;

function getMarkup() {

return <div>Test {calc()}</div>;

export const solidExample = async () =>

new Response(await renderToString(() => getMarkup()), {

headers: {

"Content-Type": "text/html",

const route = new Hono();

route.get("/:key", (c) => {

const key = c.req.param("key");

return c.render(

<form method="POST">

<label>Are you sure you want to delete {key} ?</label>

<input type="submit" value="Delete Blob" />

</form>,

route.post("/:key", async (c) => {

Allows Observable notebooks to statically import ES modules as Runtime modules.

See https://observablehq.com/d/1ff60814f0002dd5 for details and examples.

export const observable_esm = async (request: Request): Promise<Response> => {

const url = new URL(request.url);

url.protocol = "https";

url.hostname = "esm.run";

const body = `

export default function define(runtime, observer) {

const main = runtime.module();

main.variable(observer("__module")).define("__module", () => module);

export let aqi = async () => {

let pm25 = (

await fetchJSON(

"https://api.openaq.org/v2/latest?" +

new URLSearchParams({

limit: "10",

page: "1",

location: "San Francisco",

offset: "0",

sort: "desc",

const username = "janpaul123";

const tempValsParentFolderId = "4bb7b010-4443-11ef-8642-de64eea55b61";

const valTownToken = Deno.env.get("valtown");

const vt = new ValTown({ bearerToken: valTownToken });

const app = new Hono();

const jsxResponse = (jsx) => {

return new Response(renderToString(jsx), { headers: { "Content-Type": "text/html" } });

const systemprompt = `The conversation below is your recent interaction with the user.

const island = document.querySelector("[data-hydration-src]");

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}`);

const { Component } = await import(src);

const props = JSON.parse(island.getAttribute("data-hydration-props"));

hydrateRoot(island, _jsx(Component, props));