Search

import ReactDOM from "https://esm.sh/react-dom@18.2.0";

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

import { useState } from "https://esm.sh/react@18.0.0";

import { Tldraw } from "https://esm.sh/tldraw@2.1.0";

</div>

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

root.render(<App />);

import * as fal from "https://esm.sh/@fal-ai/serverless-client";

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

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

function client() {

client();

async function checkRateLimit(clientIP: string): Promise<boolean> {

const key = `xratelimit_${clientIP}`;

let clientData = await blob.getJSON<RateLimitData>(key);

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.

The 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.

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

import { Form, hydrate } from "https://esm.town/v/stevekrouse/ssr_react_mini?v=75";

useEffect(() => addLog(`Client rendered`), []);

import ReactDOM from "https://esm.sh/react-dom@18.2.0";

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

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

import { Tldraw } from "https://esm.sh/tldraw@2.1.0";

</div>

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

root.render(<App />);

* This dating app allows users to upload photos of their bedside table and phone case.

* The app includes a simple matching algorithm based on common items in bedside tables.

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

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

const [bedsideImage, setBedsideImage] = useState(null);

setBedsideImage(userData.bedsideImage);

if (type === 'bedside') {

setBedsideImage(result.imageUrl);

<h1>Bedside & Case Dating App</h1>

import ReactDOM from "https://esm.sh/react-dom@18.2.0";

import { BrowserRouter, Link, Route, Routes } from "https://esm.sh/react-router-dom@6.11.2";

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

const [isOpen, setIsOpen] = React.useState(false);

const [isHovered, setIsHovered] = React.useState(false);

function client() {

* This web app creates a Side School Seminar location voting system.

* The app uses React for the frontend and SQLite for storing votes on the backend.

* The design is inspired by Side.school and includes an image in the first frame.

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

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

<h1>Side School Seminar</h1>

function client() {

client();

<title>Side School Seminar</title>

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

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

function App() {

</div>

function client() {

console.log("Client-side code running");

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

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

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

React SSR and client-side hydration for Val Town

For streaming responses use [ReactStream]

[ReactStream]: https://www.val.town/v/jxnblk/ReactStream

import { renderToString } from "https://esm.sh/react-dom@18.3.1/server";

import * as React from "https://esm.sh/react@18.3.1";

export { React };

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

import { jsx } from "https://esm.sh/react@18.3.1/jsx-runtime";

tldraw example with builder, for consistent React versions.

"react-dom": "18.3.1",

"react": "18.3.1",

export * as ReactDOM from "react-dom";

export * as React from "react";

ReactDOM,

React,

<tldraw.Tldraw persistenceKey="valtown_reacttldrawclient" cameraOptions={{ wheelBehavior: "zoom" }} />

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

- [ ] Tufte-inspired CSS

- [ ] React

- [ ] Lorum Ipsum Text Sample with all features

* This val creates a Tufte-inspired CSS Navigator app with React for the client-side UI

* and a server-side handler for serving the HTML. The app allows users to explore different

* CSS styles, copy and download them, change themes, view sample text that displays

* the selected style, choose accent colors, and adjust extra options like font size and line height.

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

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

const cssStyles = {

</div>

function client() {

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

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

client();

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

* Upgrades are hidden until they are unlocked for the first time.

* The game state is stored client-side using localStorage for persistence.

* React is used for the UI, and setInterval for the auto-upgrade functionality.

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

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

function App() {

setMoney(m => m + 0.01);

const buyUpgrade = (cost: number, setter: React.Dispatch<React.SetStateAction<number>>) => {

if (money >= cost) {

const formatMoney = (amount: number) => amount.toFixed(2);

const renderUpgradeButton = (name: string, cost: number, count: number, setter: React.Dispatch<React.SetStateAction<number>>, unlocked: boolean) => {

if (!unlocked) return null;

</div>

function client() {

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

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

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

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.

The 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.

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

import { Form, hydrate } from "https://esm.town/v/stevekrouse/ssr_react_mini?v=75";

useEffect(() => addLog(`Client rendered`), []);

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

export function Demo(props: { items: string[] }) {

useEffect(() => {

items.push("This item is rendered only on the client, after the hydration");

setItems([...items]);

if (url.pathname == "/api/item") {

return Response.json("This item is fetched from the server by the client");

// server-side import should only be used here

const { Island } = await import("https://esm.town/v/pomdtr/island");

const { renderToString } = await import("https://esm.sh/react-dom/server");

return new Response(

items={[

"This item is rendered both on the server and the client",

</Island>

* This code creates a Money Clicker Game using React for the UI.

* It uses localStorage for client-side persistence and setInterval for auto-upgrades.

* The game features a pixelated, retro-inspired design reminiscent of early computer games.

* The upgrade-info-container is now hidden when not on the Clickers tab.

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

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

function App() {

setMoney(m => m + 0.01);

const buyUpgrade = (cost: number, setter: React.Dispatch<React.SetStateAction<number>>) => {

if (money >= cost) {

count: number,

setter: React.Dispatch<React.SetStateAction<number>>,

unlocked: boolean,

</div>

function client() {

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

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

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