danabra.mov
A tool for people curious about the React Server Components protocol
rscexplorer.dev/
rsc
react
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta
6 name="viewport"
7 content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
8 />
9 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
10 <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png" />
11 <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png" />
12 <title>RSC Explorer</title>
13 <style>
14 * {
15 box-sizing: border-box;
16 }
17 :root {
18 --bg: #1a1a1a;
19 --surface: #242424;
20 --border: #333;
21 --text: #a0a0a0;
22 --text-dim: #666;
23 --text-bright: #e0e0e0;
24 --font-mono: "SF Mono", "Fira Code", "JetBrains Mono", Menlo, monospace;
25 }
26 html,
27 body {
28 margin: 0;
29 padding: 0;
30 height: 100%;
31 overflow: hidden;
32 position: fixed;
33 width: 100%;
34 top: 0;
35 left: 0;
36 }
37 body {
38 font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
39 background: var(--bg);
40 color: var(--text);
41 }
42 </style>
43 <!-- Privacy-friendly analytics by Plausible -->
44 <script async src="https://plausible.io/js/pa-CtwoQWR5DSFU93v-DPr1p.js"></script>
45 <script>
46 ((window.plausible =
47 window.plausible ||
48 function () {
49 (plausible.q = plausible.q || []).push(arguments);
50 }),
51 (plausible.init =
52 plausible.init ||
53 function (i) {
54 plausible.o = i || {};
55 }));
56 plausible.init();
57 </script>
58 </head>
59 <body>
60 <div
61 id="app"
62 style="display: flex; flex-direction: column; height: 100%; overflow: hidden"
63 ></div>
64 <script type="module" src="/src/client/index.tsx"></script>
65 </body>
66</html>