PageSourceSearch

https://rezact.io/

html rezact.io collected 2026-09-25 22:45:36 UTC 26,183 bytes, 178 lines download raw bytes

1<!doctype html>
2<html class="h-full bg-white" lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta
6      name="description"
7      content="Rezact: Intuitive Reactivity, Simplified State. Embrace a modern UI framework that encourages direct data mutations, offers module-level reactivity, and simplifies component design. With Rezact, you get the power of reactivity without the boilerplate. Dive into a seamless development experience tailored for today's web."
8    />
9    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10
11    <meta name="twitter:card" content="summary_large_image" />
12    <meta name="twitter:site" content="@rezactio" />
13    <meta name="twitter:title" content="Rezact" />
14    <meta
15      name="twitter:description"
16      content="Because its time for a better client side rendered framework"
17    />
18    <meta
19      name="twitter:image"
20      content="https://rezact.io/rezact-site-preview.png"
21    />
22
23    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
24    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
25    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
26    <link rel="manifest" href="/site.webmanifest" />
27    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
28    <meta name="msapplication-TileColor" content="#2d89ef" />
29    <meta name="theme-color" content="#ffffff" />
30    <title>Rezact</title>
31    <link rel="modulepreload" href="/assets/LandingPage-O8X2SXEc.js" />
32<link rel="modulepreload" href="/assets/mdx-LEb1kaIk.js" />
33<link rel="modulepreload" href="/assets/ValidatorInput-PzAJrwPH.js" />
34<link rel="modulepreload" href="/assets/Buttons-E-yT_r7C.js" />
35<link rel="modulepreload" href="/assets/Form-cLix5-9l.js" />
36<link rel="modulepreload" href="/assets/Counter-JZ6pTTpZ.js" />
37
38    
38<script type="module" crossorigin src="/assets/main-Ex-1LHMJ.js"></script>
38
39    <link rel="stylesheet" crossorigin href="/assets/main-4Ers5TFM.css">
40  </head>
41
42  <body class="h-full">
43    <div id="app"><div class="bg-zinc-900 pb-96"><div id="top"></div><header class="sticky inset-x-0 top-0 z-10 backdrop-blur-sm backdrop-filter"><nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global"><div class="flex lg:flex-1"><a href="/" class="-m-1.5 p-1.5 text-white"><span class="sr-only">Rezact</span><img class="h-8 w-auto" src="/rezact-logo.svg" alt="Rezact Logo" width="29" height="32">Rezact</a></div><div class="flex lg:hidden"><button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400"><span class="sr-only">Open main menu</span><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button></div><div class="hidden lg:flex lg:gap-x-12"><a href="#top" class="text-sm font-semibold leading-6 text-white">Intro</a><a href="#features" class="text-sm font-semibold leading-6 text-white">Features</a><a href="/docs" class="text-sm font-semibold leading-6 text-white">Docs</a><a href="/playground" class="text-sm font-semibold leading-6 text-white">Playground</a><a href="https://www.github.com/rezact/rezact" class="text-sm font-semibold leading-6 text-white">Github</a></div><div class="hidden lg:flex lg:flex-1 lg:justify-end"></div></nav></header><div class="hidden" role="dialog" aria-modal="true"><div class="fixed inset-0 z-50 bg-zinc-900/80 opacity-0 transition-opacity duration-300 ease-linear"></div><div class="fixed inset-y-0 right-0 z-50 w-full translate-x-full overflow-y-auto bg-gray-900 px-6 py-6 transition duration-300 ease-in-out sm:max-w-sm sm:ring-1 sm:ring-white/10"><div class="flex items-center justify-between"><a href="#" class="-m-1.5 p-1.5 text-white"><span class="sr-only">Rezact</span><img class="h-8 w-auto" src="/rezact-logo.svg" alt="Rezact Logo" width="29" height="32">Rezact</a><button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-400"><span class="sr-only">Close menu</span><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button></div><div class="mt-6 flow-root"><div class="-my-6 divide-y divide-gray-500/25"><div class="space-y-2 py-6"><a href="#top" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800">Intro</a><a href="#features" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800">Features</a><a href="/docs" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800">Docs</a><a href="/playground" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800">Playground</a><a href="https://www.github.com/rezact/rezact" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800">Github</a></div></div></div></div></div><div class="relative isolate pt-14"><div class="py-6 sm:py-6 lg:pb-40"><div class="mx-auto max-w-7xl px-6 lg:px-8"><div class=" text-center"><img src="/rezact-logo.svg" alt="Rezact Logo" class="m-auto" width="454" height="493"><h1 class="text-4xl font-bold tracking-tight text-white sm:text-6xl">Rezact</h1><p class="mt-6 text-lg leading-8 text-gray-300">Because its time for a better client side rendered framework</p><div class="mt-10 flex items-center justify-center gap-x-6"><a href="/docs/getting-started" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400">Get started</a><a href="/playground" class="rounded-md bg-green-800 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-400 hover:text-green-950 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400">Try Playground</a><a href="/docs" class="text-sm font-semibold leading-6 text-white">Learn more <span aria-hidden="true">→</span></a></div></div></div></div></div><div id="features" class="relative isolate pt-14"><div class="py-24 sm:py-32 lg:pb-40"><div class="mx-auto max-w-7xl px-6 lg:px-8"><div class="mdx mx-auto max-w-lg px-4 text-xs text-white md:text-base"><div><div><h1 class="text-4xl">Svelte Hello World Bundle</h1><div> </div><div><span style="color: rgb(17, 168, 205);">vite v5.1.1 </span><span style="color: rgb(13, 188, 121);">building for production...</span> </div><div><span style="color: rgb(13, 188, 121);">✓</span> 26 modules transformed. </div><div><span style="opacity: 0.5;">dist/</span><span style="color: rgb(13, 188, 121);">index.html               </span><span style="font-weight: bold; opacity: 0.5;">0.33 kB</span><span style="opacity: 0.5;"> │ gzip: 0.24 kB</span> </div><div><span style="opacity: 0.5;">dist/assets/</span><span style="color: rgb(17, 168, 205);">index-BYI6n3Ad.js </span><span style="font-weight: bold; opacity: 0.5;">3.97 kB</span><span class="whitespace-pre text-xl font-black text-red-600"> │ gzip: 1.89 kB</span> </div><div><span style="color: rgb(13, 188, 121);">✓ built in 174ms</span> </div></div></div><div class="mt-12"><div><h1 class="text-4xl">Rezact Hello World Bundle</h1><div> </div><div><span style="color: rgb(17, 168, 205);">vite v5.1.1 </span><span style="color: rgb(13, 188, 121);">building for production...</span> </div><div><span style="color: rgb(13, 188, 121);">✓</span> 4 modules transformed. </div><div><span style="opacity: 0.5;">dist/</span><span style="color: rgb(13, 188, 121);">index.html               </span><span style="font-weight: bold; opacity: 0.5;">0.33 kB</span><span style="opacity: 0.5;"> │ gzip: 0.24 kB</span> </div><div><span style="opacity: 0.5;">dist/assets/</span><span style="color: rgb(17, 168, 205);">index-xLpY-gYZ.js </span><span style="font-weight: bold; opacity: 0.5;">2.60 kB</span><span class="whitespace-pre text-xl font-black text-green-600"> │ gzip: 1.25 kB</span> </div><div><span style="color: rgb(13, 188, 121);">✓ built in 212ms</span> </div></div></div></div></div></div></div><div id="counter" class="relative isolate pt-14"><div class="py-24 sm:py-32 lg:pb-40"><div class="mx-auto max-w-7xl px-6 lg:px-8"><div class="mdx mx-auto max-w-2xl text-white"><h2>Intuitive Reactivity, Simplified State.</h2>
44<p>Embrace a modern UI framework that simplifies component design. With Rezact, you get the power of reactivity without the boilerplate.</p>
45<img src="/Signals.png" alt="Signals" height="238" width="672"><div class=" rounded bg-zinc-800 p-8"><h1>Hello World</h1><h2 id="test-value" class=" text-center">0</h2><div class="flex items-stretch gap-12"><button type="button" class="rounded-md px-2.5 py-1.5 text-sm bg-indigo-600 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 rz-btn flex-1">Dec</button><button id="test-inc" type="button" class="rounded-md px-2.5 py-1.5 text-sm bg-indigo-600 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 rz-btn flex-1">Inc</button></div></div></div></div></div></div><div id="signals-anywhere" class="relative isolate pt-14"><div class="py-24 sm:py-32 lg:pb-40"><div class="mx-auto max-w-7xl px-6 lg:px-8"><div class="mdx mx-auto max-w-2xl text-white"><h1>No Hooks or Rules</h1>
46<p>No hook rules... create and use signals ANYWHERE in your code.</p>
47<img src="/SignalsAnywhere.webp" alt="SignalsAnyWhere" height="411" width="672">
48<form class=" m-4 rounded bg-zinc-800 p-8"><!--start map--><div class="flex items-center gap-4"><label for="test" class="sr-only">test</label><input name="test" id="test" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 w-1/2 flex-1" placeholder="" type="text"><div style="height: 0px;" class=" overflow-hidden text-xs text-red-600 transition-all"></div><label for="chk0" sr-only="">Check 0</label><input id="chk0" type="checkbox"><p class="w-1/2 flex-1">jack</p></div><div class="flex items-center gap-4"><label for="test" class="sr-only">test</label><input name="test" id="test" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 w-1/2 flex-1" placeholder="" type="text"><div style="height: 0px;" class=" overflow-hidden text-xs text-red-600 transition-all"></div><label for="chk1" sr-only="">Check 1</label><input id="chk1" type="checkbox"><p class="w-1/2 flex-1">JILL</p></div><div class="flex items-center gap-4"><label for="test" class="sr-only">test</label><input name="test" id="test" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 w-1/2 flex-1" placeholder="" type="text"><div style="height: 0px;" class=" overflow-hidden text-xs text-red-600 transition-all"></div><label for="chk2" sr-only="">Check 2</label><input id="chk2" type="checkbox"><p class="w-1/2 flex-1">john</p></div><div class="flex items-center gap-4"><label for="test" class="sr-only">test</label><input name="test" id="test" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 w-1/2 flex-1" placeholder="" type="text"><div style="height: 0px;" class=" overflow-hidden text-xs text-red-600 transition-all"></div><label for="chk3" sr-only="">Check 3</label><input id="chk3" type="checkbox"><p class="w-1/2 flex-1">JANE</p></div><!--end map--></form><button type="button" class="rounded-md px-3.5 py-2.5 text-sm bg-indigo-600 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 rz-btn  m-auto table">Compare to React</button></div></div></div></div><div id="stores" class="relative isolate pt-14"><div class="py-24 sm:py-32 lg:pb-40"><div class="mx-auto max-w-7xl px-6 lg:px-8"><div class="mdx mx-auto max-w-2xl text-white"><h1>Stores</h1>
49<p>State Management has never been easier than this. Just start with a simple module and some signals.</p>
50<pre><code class="hljs language-ts"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-attr">userStore</span>: <span class="hljs-built_in">any</span> = {
51  <span class="hljs-attr">$isLoggedIn</span>: <span class="hljs-literal">
51false</span>,
52  <span class="hljs-attr">$userName</span>: <span class="hljs-string">""</span>,
53  <span class="hljs-attr">$email</span>: <span class="hljs-string">""</span>,
54};
55
56<span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">logIn</span>(<span class="hljs-params">data</span>) {
57  userStore.<span class="hljs-property">$isLoggedIn</span> = <span class="hljs-literal">true</span>;
58  userStore.<span class="hljs-property">$userName</span> = data.<span class="hljs-property">username</span>;
59  userStore.<span class="hljs-property">$email</span> = data.<span class="hljs-property">email</span>;
60}
61
62<span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">logOut</span>(<span class="hljs-params"></span>) {
63  userStore.<span class="hljs-property">$isLoggedIn</span> = <span class="hljs-literal">false</span>;
64  userStore.<span class="hljs-property">$userName</span> = <span class="hljs-string">""</span>;
65  userStore.<span class="hljs-property">$email</span> = <span class="hljs-string">""</span>;
66}
67</code></pre><a href="/docs/stores" class="rounded-md px-3.5 py-2.5 text-sm bg-indigo-600 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 rz-btn  m-auto table">Show me more</a></div></div></div></div><div id="router" class="relative isolate pt-14"><div class="py-24 sm:py-32 lg:pb-40"><div class="mx-auto max-w-7xl px-6 lg:px-8"><div class="mdx mx-auto max-w-2xl text-white"><h1>Built in Router</h1>
68<p>No need to install an external dependency, Rezact comes with a built in router that is easy to use.</p>
69<pre><code class="hljs language-typescript"><span class="hljs-keyword">import</span> { useRouter } <span class="hljs-keyword">from</span> <span class="hljs-string">"rezact/router"</span>;
70<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Page</span> <span class="hljs-keyword">as</span> <span class="hljs-title class_">FourOhFour</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"./Pages/404"</span>;
71
72<span class="hljs-keyword">const</span> router = <span class="hljs-title function_">useRouter</span>();
73
74router.<span class="hljs-title function_">addRoute</span>(<span class="hljs-string">"/404"</span>, <span class="hljs-title class_">FourOhFour</span>);
75
76<span class="hljs-keyword">const</span> routes = [
77  {
78    <span class="hljs-attr">path</span>: <span class="hljs-string">"/"</span>,
79    <span class="hljs-attr">component</span>: <span class="hljs-function">() =></span> <span class="hljs-keyword">import</span>(<span class="hljs-string">"src/Pages/LandingPage"</span>),
80    <span class="hljs-attr">dataLoader</span>: <span class="hljs-function">() =></span> {} <span class="hljs-comment">// COMING SOON!</span>
81    <span class="hljs-attr">title</span>: <span class="hljs-string">"Rezact"</span>,
82  },
83  {
84    <span class="hljs-attr">path</span>: <span class="hljs-string">"/docs"</span>,
85    <span class="hljs-attr">component</span>: <span class="hljs-function">() =></span> <span class="hljs-keyword">import</span>(<span class="hljs-string">"src/Docs/PageOne.mdx"</span>),
86    <span class="hljs-attr">dataLoader</span>: <span class="hljs-function">() =></span> {} <span class="hljs-comment">// COMING SOON!</span>
87    <span class="hljs-attr">title</span>: <span class="hljs-string">"Rezact"</span>,
88  },
89  {
90    <span class="hljs-attr">path</span>: <span class="hljs-string">"/users/:userId"</span>,
91    <span class="hljs-attr">component</span>: <span class="hljs-function">() =></span> <span class="hljs-keyword">import</span>(<span class="hljs-string">"src/Pages/Users"</span>),
92    <span class="hljs-attr">dataLoader</span>: <span class="hljs-function">() =></span> {} <span class="hljs-comment">// COMING SOON!</span>
93    <span class="hljs-attr">title</span>: <span class="hljs-string">"Rezact Users"</span>,
94  },
95];
96
97router.<span class="hljs-title function_">addRoutesFromConfig</span>(routes);
98
99<span class="hljs-keyword">export</span> { router };
100</code></pre></div></div></div></div><div id="easy-forms" class="relative isolate pt-14"><div class="py-24 sm:py-32 lg:pb-40"><div class="mx-auto max-w-7xl px-6 lg:px-8"><div class="mdx mx-auto max-w-2xl text-white"><h1>Easy Forms</h1>
101<p>Forget everything you know about creating forms in react... Literally, forget it all. This is the easiest way to create forms. PERIOD.</p>
102<pre><code class="hljs language-jsx"><span class="hljs-keyword">
102import</span> { <span class="hljs-title class_">Form</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"./Form"</span>;
103<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Btn</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"./Buttons"</span>;
104<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Input</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"./ValidatorInput"</span>;
105
106<span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">LandingForm</span>(<span class="hljs-params"></span>) {
107  <span class="hljs-keyword">const</span> <span class="hljs-title function_">submit</span> = (<span class="hljs-params">data</span>) => {
108    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(data); <span class="hljs-comment">// { email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="375d585f59775358521954585a">[email&#160;protected]</a>" }</span>
109  };
110
111  <span class="hljs-keyword">return</span> (
112    <span class="xml"><span class="hljs-tag"><<span class="hljs-name">Form</span> <span class="hljs-attr">onSubmit</span>=<span class="hljs-string">{submit}</span>></span>
113      <span class="hljs-tag"><<span class="hljs-name">Input</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Email"</span> /></span>
114      <span class="hljs-tag"><<span class="hljs-name">Btn</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>></span>Submit<span class="hljs-tag"></<span class="hljs-name">Btn</span>></span>
115    <span class="hljs-tag"></<span class="hljs-name">Form</span>></span></span>
116  );
117}
118</code></pre>
119<div class="m-4 rounded-lg bg-zinc-800 p-10"><form><label for="email" class="sr-only">Email</label><input value="" name="email" id="email" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 " placeholder="Email" type="text"><div style="height: 0px;" class=" overflow-hidden text-xs text-red-600 transition-all"></div><button type="submit" class="rounded-md px-2.5 py-1.5 text-sm bg-indigo-600 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 rz-btn mt-4 w-full">Submit</button></form></div></div></div></div></div><div id="validation" class="relative isolate pt-14"><div class="py-24 sm:py-32 lg:pb-40"><div class="mx-auto max-w-7xl px-6 lg:px-8"><div class="mdx mx-auto max-w-2xl text-white"><h1>Oh, you want validation?</h1>
120<p>Ok, here's a form with validation.</p>
121<pre><code class="hljs language-diff">import { Form } from "./Form";
122<span class="hljs-addition">+import { Input } from "./ValidatorInput";</span>
123
124export function LandingForm() {
125  const submit = (data) => {
126    console.log(data); // { email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5cfcacdcbe5c1cac08bc6cac8">[email&#160;protected]</a>" }
127  };
128
129  return (
130    <Form onSubmit={submit}>
131<span class="hljs-deletion">-     <input name="email" placeholder="Email" /></span>
132<span class="hljs-addition">+     <Input required type="email" name="email" placeholder="Email" /></span>
133      <button type="submit">Submit</button>
134    </Form>
135  );
136}
137</code></pre>
138<div class="m-4 rounded-lg bg-zinc-800 p-10"><form><label for="email" class="sr-only">Email</label><input value="" name="email" id="email" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 " placeholder="Email" type="email"><div style="height: 0px;" class=" overflow-hidden text-xs text-red-600 transition-all"></div><button type="submit" class="rounded-md px-2.5 py-1.5 text-sm bg-indigo-600 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 rz-btn mt-4 w-full">Submit</button></form></div></div></div></div></div><div id="masking" class="relative isolate pt-14"><div class="py-24 sm:py-32 lg:pb-40"><div class="mx-auto max-w-7xl px-6 lg:px-8"><div class="mdx mx-auto max-w-2xl text-white"><h1>What!?!??! You also want masking and input value restrictions?</h1>
139<p>Fine... 😏</p>
140<pre><code class="hljs language-diff">import { Form } from "./Form";
141import { Input } from "./ValidatorInput";
142<span class="hljs-addition">+import { luhnCheck } from "./validators";</span>
143
144export function LandingForm() {
145  const submit = (data) => {
146    console.log(data); // { email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5bfbabdbb95b1bab0fbb6bab8">[email&#160;protected]</a>" }
147  };
148
149  return (
150    <Form onSubmit={submit}>
151      <Input required type="email" name="email" placeholder="Email" />
152<span class="hljs-addition">+      <Input</span>
153<span class="hljs-addition">+        exactLength={10}</span>
154<span class="hljs-addition">+        mask="(___) ___ ____"</span>
155<span class="hljs-addition">+        dataAccept={/[\d]/}</span>
156<span class="hljs-addition">+        showFullMaskWhileTyping</span>
157<span class="hljs-addition">+        validateUnMaskedValue</span>
158<span class="hljs-addition">+        name="telephone"</span>
159<span class="hljs-addition">+      /></span>
160<span class="hljs-addition">+      <Input</span>
161<span class="hljs-addition">+        minLength={15}</span>
162<span class="hljs-addition">+        maxLength={16}</span>
163<span class="hljs-addition">+        customValidator={luhnCheck}</span>
164<span class="hljs-addition">+        unmaskInputValueProp</span>
165<span class="hljs-addition">+        mask=".... .... .... ...."</span>
166<span class="hljs-addition">+        maskSlots="."</span>
167<span class="hljs-addition">+        dataAccept={/[\d]/}</span>
168<span class="hljs-addition">+        name="credit-card"</span>
169<span class="hljs-addition">+      /></span>
170      <button type="submit">Submit</button>
171    </Form>
172  );
173}
174</code></pre>
175<div class="m-4 rounded-lg bg-zinc-800 p-10"><form><label for="email" class="sr-only">Email</label><input value="" name="email" id="email" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 " placeholder="Email" type="email"><div style="height: 0px;" class=" overflow-hidden text-xs text-red-600 transition-all"></div><label for="telephone" class="sr-only">Phone</label><input value="" name="telephone" id="telephone" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 mt-4" placeholder="Phone" type="text"><div style="height: 0px;" class=" overflow-hidden text-xs text-red-600 transition-all"></div><label for="credit-card" class="sr-only">Credit Card</label><input value="" name="credit-card" id="credit-card" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 mt-4" placeholder="Credit Card" type="text"><div style="height: 0px;" class=" overflow-hidden text-xs text-red-600 transition-all"></div><button type="submit" class="rounded-md px-2.5 py-1.5 text-sm bg-indigo-600 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 rz-btn mt-4 w-full">Submit</button></form></div></div></div></div></div></div></div>
vendor: 111 bytes, lines 175-176
175
176  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
176<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"524e4b6a84534c9684ebc910662afa01","r":1,"spa":2}' crossorigin="anonymous"></script>
176
177</body>
178</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.