4 * information in a SQLite database. The app provides a user interface to view, add, and edit coffee shop reviews.
5 *
6 * It uses React for the frontend, the Nominatim API for initial coffee shop data,
7 * and Val Town's SQLite for data persistence.
8 */
9
10/** @jsxImportSource https://esm.sh/react */
11import React, { useEffect, useState } from "https://esm.sh/react";
12import { createRoot } from "https://esm.sh/react-dom/client";
13
14function App() {
1/**
2 * This chat application allows users to post messages and view a log of all messages.
3 * It uses SQLite for persistence and React for the frontend.
4 * The server handles message posting and retrieval, while the client renders the UI.
5 */
6/** @jsxImportSource https://esm.sh/react */
7import React, { useState, useEffect } from "https://esm.sh/react";
8import { createRoot } from "https://esm.sh/react-dom/client";
9
10interface Message {
28 };
29
30 const handleSubmit = async (e: React.FormEvent) => {
31 e.preventDefault();
32 if (!newMessage.trim()) return;
1/**
2 * This val creates an interactive tech stack wizard that generates a video game-style inventory screen.
3 * It uses React for the UI, leverages emoji and Unicode symbols for a visually rich experience, and
4 * incorporates Tailwind CSS for elegant, grayscale styling.
5 * The wizard allows users to select tools, libraries, and APIs, then displays them in a shareable format.
6 */
7
8/** @jsxImportSource https://esm.sh/react */
9import React, { useState } from "https://esm.sh/react";
10import { createRoot } from "https://esm.sh/react-dom/client";
11
12// Define tech options with emojis or Unicode symbols as icons
13const techOptions = [
14 { name: "React", icon: "⚛️" },
15 { name: "Vue", icon: "🖖" },
16 { name: "Angular", icon: "🅰️" },
47 { name: "Swift", icon: "🕊️" },
48 { name: "Flutter", icon: "🦋" },
49 { name: "React Native", icon: "📱" },
50 { name: "Electron", icon: "🔬" },
51 { name: "Webpack", icon: "📦" },
1/**
2 * This val creates a tech stack inventory chooser using React and Tailwind CSS for styling.
3 * It allows users to select technologies for different categories and displays the chosen stack.
4 */
5/** @jsxImportSource https://esm.sh/react */
6import React, { useState } from "https://esm.sh/react";
7import { createRoot } from "https://esm.sh/react-dom/client";
8
9const techCategories = {
10 frontend: ["React", "Vue", "Angular", "Svelte"],
11 backend: ["Node.js", "Python", "Ruby", "Java"],
12 database: ["PostgreSQL", "MongoDB", "MySQL", "SQLite"],
5 */
6
7/** @jsxImportSource https://esm.sh/react */
8import React, { useEffect, useState } from "https://esm.sh/react";
9import { createRoot } from "https://esm.sh/react-dom/client";
10
11function App() {
1/** @jsxImportSource https://esm.sh/react */
2import { sqlite } from "https://esm.town/v/std/sqlite?v=6";
3import { html } from "https://esm.town/v/stevekrouse/html";
4import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact";
5import { renderToString } from "npm:react-dom/server";
6
7function StatusRow({ rows }) {
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4import React from "https://esm.sh/react";
5import { createRoot } from "https://esm.sh/react-dom/client";
6
7function App() {
41 {
42 type: "http",
43 prompt: "Generate a val that uses React to render HTML",
44 code: `/** @jsxImportSource https://esm.sh/react */
45 import { renderToString } from "npm:react-dom/server";
46
47 export const reactExample = (request: Request) =>
48 new Response(renderToString(<div>Test {1 + 1}</div>), {
49 headers: {
74 type: "http",
75 prompt: null,
76 code: `/** @jsxImportSource https://esm.sh/preact */
77 import { render } from "npm:preact-render-to-string";
78
79 export const preactExample = (request: Request) =>
80 new Response(render(<div>Test {1 + 1}</div>), {
81 headers: {
191 prompt: "Write a val that renders a website and uses tailwind css",
192 type: "http",
193 code: `/** @jsxImportSource https://esm.sh/preact */
194 import { render } from "npm:preact-render-to-string";
195
196 export default async function(req: Request) {
2 * This request collector val saves information about incoming requests
3 * and displays summary statistics on the home page. It uses SQLite for
4 * persistence and server-side React for rendering the UI. Users can click
5 * on a request ID to view full details of that request.
6 */
7
8/** @jsxImportSource https://esm.sh/react */
9import React from "https://esm.sh/react";
10import { renderToString } from "https://esm.sh/react-dom/server";
11
12interface RequestData {
2 * This web app creates a Side School Seminar location voting system.
3 * Users can vote for their preferred seminar location from four options.
4 * The app uses React for the frontend and SQLite for storing votes on the backend.
5 * The design is inspired by Side.school and includes an image in the first frame.
6 * It features a celebration animation when voting, a distinct style for the selected option,
7 * and allows users to cancel their vote by clicking on the selected option again.
8 */
9/** @jsxImportSource https://esm.sh/react */
10import React, { useState, useEffect } from "https://esm.sh/react";
11import { createRoot } from "https://esm.sh/react-dom/client";
12
13const locations = [
