46 If needed and if the user asks for something that requires persistence, use Val Town SQLite or Blob storage. Use the val's `import.meta.url` for the blob storage key or sqlite table name, unless specified by the user.
47
48 * If you use any React library, use esm.sh and pin its React version to 18.2.0 and its ReactDOM version to 18.2.0 by adding `?deps=react@18.2.0,react-dom@18.2.0` to the end of the URL. If the user is facing a client-side error where nothing is being rendered, check if all React dependencies and sub-dependencies are pinned to the same version, including the @jsxImportSource pragma.
49</requirements>
50
148```val type=http
149/** Use this template when you create http vals only */
150/** @jsxImportSource https://esm.sh/react@18.2.0 */
151import React from "https://esm.sh/react@18.2.0";
152import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
153
154/**
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
3import {
4 createStaticHandler,
5 createStaticRouter,
6 StaticRouterProvider,
7} from "https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0";
8
9import routes from "./routes/_index.ts";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3import { hydrateRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import { RouterProvider } from "https://esm.sh/react-router@7.1.3/dom?deps=react@18.2.0,react-dom@18.2.0";
5import { createBrowserRouter } from "https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0";
6import { StrictMode } from "https://esm.sh/react@18.2.0";
7import routes from "./routes/_index.ts";
8
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";
4import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
5import { STARTER_PROMPTS } from "https://esm.town/v/stevekrouse/cerebras_coder_prompts";
6
30}: {
31 prompt: string;
32 setPrompt: React.Dispatch<React.SetStateAction<string>>;
33 handleSubmit: (e: React.FormEvent) => void;
34 handleStarterPromptClick: (promptItem: PromptItem) => void;
35}) {
116
117function App() {
118 const previewRef = React.useRef<HTMLDivElement>(null);
119 const [prompt, setPrompt] = useState("");
120 const [projectId, setProjectId] = useState<number | null>(null);
174 }
175
176 async function handleSubmit(e: React.FormEvent | string) {
177 if (typeof e !== "string") {
178 e.preventDefault();
628 </div>
629 <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
630 <React.Fragment key={iframeKey}>
631 <iframe
632 srcDoc={code}
634 className="w-full grow"
635 />
636 </React.Fragment>
637 </div>
638 </div>
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import { lockfileImportMap } from "https://esm.town/v/maxm/lockfileImportMap";
5
38 target: ts.ScriptTarget.ESNext,
39 module: ts.ModuleKind.ESNext,
40 jsx: ts.JsxEmit.React,
41 lib: ["esnext", "dom"],
42 moduleDetection: ModuleDetectionKind.Force,
7Run an editor like so:
8```tsx
9/** @jsxImportSource https://esm.sh/react */
10import { renderToString } from "npm:react-dom/server";
11
12export default async function(req: Request): Promise<Response> {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {
8 const [error, setError] = useState<string | null>(null);
9
10 const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
11 const file = e.target.files?.[0];
12 if (file) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function LandingPage() {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {
