1# SSR React Mini & SQLite Todo App
2
3This 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/).
4
5
6
7## SSR React Mini Framework
8
9This ["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.
10
11The 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.
12
13The tricky part is making sure that server-only code doesn't run on the client and vice-versa. For example, because this val colocates the server-side `loader` and `action` with the React component we have to be careful to do all server-only imports (ie sqlite) dynamically inside the [`loader`](https://www.val.town/v/stevekrouse/TodoApp?v=246#L7) and [`action`](https://www.val.town/v/stevekrouse/TodoApp?v=246#L20), so they only run server-side.
14
2// It features a clean UI with an input field for the prompt and a button to generate the image.
3// The generated image is displayed below the input field.
4// React is used for the UI and the fal.ai serverless client for image generation.
5// The app measures and displays the latency for each image generation.
6// The background features randomly placed pixelart lightning bolts in neon yellow.
7
8/** @jsxImportSource https://esm.sh/react */
9import * as fal from "https://esm.sh/@fal-ai/serverless-client";
10import React, { useEffect, useState } from "https://esm.sh/react";
11import { createRoot } from "https://esm.sh/react-dom/client";
12import { blob } from "https://esm.town/v/std/blob";
13
4 * and a rich text editor. The user's command, additional context, and current text are sent to the Cerebras API,
5 * which returns the modified text to be displayed in the editor.
6 * We use React for the UI, the Web Speech API for speech recognition, and the Cerebras API for text processing.
7 */
8
60 <head>
61 <title>My AI Pen✒️</title>
62 <link href="https://esm.sh/react-quill@2.0.0/dist/quill.snow.css" rel="stylesheet">
63 <style>${css}</style>
64 </head>
66 <div id="root"></div>
67 <script type="module">
68 import React, { useState, useRef, useEffect } from "https://esm.sh/react";
69 import { createRoot } from "https://esm.sh/react-dom/client";
70 import ReactQuill from "https://esm.sh/react-quill";
71
72 function App() {
159 }, [editorContent]);
160
161 return React.createElement(
162 "div",
163 { className: "container" },
164 React.createElement("h1", null, "My AI Pen✒️"),
165 React.createElement(
166 "label",
167 { htmlFor: "command-input", className: "command-label" },
168 "Text Modification Command"
169 ),
170 React.createElement(
171 "form",
172 { onSubmit: handleSubmit, className: "command-form" },
173 React.createElement(
174 "div",
175 { className: "input-row" },
176 React.createElement("input", {
177 type: "text",
178 value: command,
182 id: "command-input",
183 }),
184 React.createElement(
185 "button",
186 {
192 isListening ? "🛑" : "🎤"
193 ),
194 React.createElement(
195 "button",
196 { type: "submit", disabled: isLoading },
198 )
199 ),
200 React.createElement(
201 "div",
202 { className: "context-dropdown" },
203 React.createElement(
204 "button",
205 {
210 isContextExpanded ? "▲ Hide Additional Context" : "▼ Show Additional Context"
211 ),
212 isContextExpanded && React.createElement(
213 "div",
214 { className: "context-content" },
215 React.createElement(
216 "label",
217 { htmlFor: "additional-context", className: "context-label" },
218 "Additional Context"
219 ),
220 React.createElement("textarea", {
221 id: "additional-context",
222 value: additionalContext,
228 )
229 ),
230 React.createElement(ReactQuill, {
231 ref: quillRef,
232 value: editorContent,
238 modules: { toolbar: true }
239 }),
240 success && React.createElement(
241 "div",
242 { className: "success-indicator" },
243 "✓ Applied successfully"
244 ),
245 React.createElement(
246 "div",
247 { className: "source-link" },
248 React.createElement(
249 "a",
250 {
258 }
259
260 createRoot(document.getElementById("root")).render(React.createElement(App));
261 </script>
262 </body>
1// This val creates a form to input a Zillow or Craigslist link, determines the link type,
2// calls the appropriate scraping API, and renders the results in a table.
3// It uses React for the UI, fetch for API calls, and basic string manipulation for link validation.
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
9function App() {
1/** @jsxImportSource https://esm.sh/react */
2import pLimit from "https://esm.sh/p-limit";
3import React, { useCallback, useState } from "https://esm.sh/react";
4import { hydrateRoot } from "https://esm.sh/react-dom/client";
5import { renderToReadableStream } from "https://esm.sh/react-dom/server";
6import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
7
53};
54
55// React components
56const TestForm = ({ onSubmit, isLoading }) => {
57 const [url, setUrl] = useState("");
1// This timezone comparison tool will use the Luxon library for date and time manipulation.
2// It will create a React app that displays current times in different timezones and works in both server and client environments.
3
4/** @jsxImportSource https://esm.sh/react */
5import React, { useState, useEffect, useCallback, useMemo } from "https://esm.sh/react";
6import { createRoot } from "https://esm.sh/react-dom/client";
7import { DateTime } from "https://esm.sh/luxon";
8
211 <script type="module">
212 import App from "${import.meta.url}";
213 import React from "https://esm.sh/react";
214 import { createRoot } from "https://esm.sh/react-dom/client";
215 const root = document.getElementById("root");
216 if (root) createRoot(root).render(React.createElement(App, { initialTime: "${DateTime.now().toISO()}" }));
217 </script>
218 </body>
1/** @jsxImportSource https://esm.sh/react */
2import Cerebras from "https://esm.sh/@cerebras/cerebras_cloud_sdk";
3import React, { useEffect, useRef, useState } from "https://esm.sh/react";
4import { createRoot } from "https://esm.sh/react-dom/client";
5
6const MODELS = ["llama3.1-8b", "llama3.1-70b"];
26 }, [htmlOutput]);
27
28 const sendMessage = async (e?: React.FormEvent) => {
29 e?.preventDefault();
30 if (input.trim() === "") return;
