PageSourceSearch

https://rezact.io/docs/getting-started

html rezact.io collected 2026-09-25 22:45:40 UTC 9,663 bytes, 62 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/200_GettingStarted-9YbHk6Z4.js" />
32<link rel="modulepreload" href="/assets/mdx-LEb1kaIk.js" />
33
34    
34<script type="module" crossorigin src="/assets/main-Ex-1LHMJ.js"></script>
34
35    <link rel="stylesheet" crossorigin href="/assets/main-4Ers5TFM.css">
36  </head>
37
38  <body class="h-full">
39    <div id="app"><div><div class="relative z-50 hidden" role="dialog" aria-modal="true"><div class="fixed inset-0 bg-gray-900/80 opacity-0 transition-opacity duration-300 ease-linear"></div><div class="fixed inset-0 flex"><div class=" relative mr-16 flex w-full max-w-xs flex-1 -translate-x-full transition duration-300 ease-in-out"><div class=" absolute left-full top-0 flex w-16 justify-center pt-5 opacity-0 transition duration-300 ease-in-out"><button type="button" class="-m-2.5 p-2.5"><span class="sr-only">Close sidebar</span><svg class="h-6 w-6 text-white" 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="z-10 flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4 ring-1 ring-white/10"><a href="/" class="flex h-16 shrink-0 items-center text-white"><img class="h-8 w-auto" src="/rezact-logo.svg" alt="Rezact Logo">Rezact</a><nav class="flex flex-1 flex-col"><ul role="list" class="flex flex-1 flex-col gap-y-7"><li><ul role="list" class="-mx-2 space-y-1"><li><a href="/docs" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Intro</a></li><li><a href="/docs/getting-started" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-white bg-gray-800">Getting Started</a></li><li><a href="/docs/signals" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Signals</a></li><li><a href="/docs/effects" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Effects</a></li><li><a href="/docs/stores" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Stores</a></li><li><a href="/docs/gotchas" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Gotchas</a></li></ul></li><li class="mt-auto"><a href="https://github.com/rezact/rezact" class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800 hover:text-white"><svg class="h-6 w-6 shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"></path></svg>GitHub</a></li></ul></nav></div></div></div></div><div id="test" class="hidden lg:fixed lg:inset-y-0 lg:z-40 lg:flex lg:w-72 lg:flex-col"><div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4"><a href="/" class="flex h-16 shrink-0 items-center text-white"><img class="h-8 w-auto" src="/rezact-logo.svg" alt="Rezact Logo">Rezact</a><nav class="flex flex-1 flex-col"><ul role="list" class="flex flex-1 flex-col gap-y-7"><li><ul role="list" class="-mx-2 space-y-1"><li><a href="/docs" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Intro</a></li><li><a href="/docs/getting-started" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-white bg-gray-800">Getting Started</a></li><li><a href="/docs/signals" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Signals</a></li><li><a href="/docs/effects" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Effects</a></li><li><a href="/docs/stores" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Stores</a></li><li><a href="/docs/gotchas" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Gotchas</a></li></ul></li><li class="mt-auto"><a href="https://github.com/rezact/rezact" class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800 hover:text-white"><svg class="h-6 w-6 shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.
39099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"></path></svg>GitHub</a></li></ul></nav></div></div><div class="lg:pl-72"><div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8"><button type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden"><span class="sr-only">Open sidebar</span><img class="h-8 w-auto" src="/rezact-logo.svg" alt="Rezact Logo"></button><div class="h-6 w-px bg-gray-900/10 lg:hidden" aria-hidden="true"></div><div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6"><div class="relative flex flex-1"></div><div class="flex items-center gap-x-4 lg:gap-x-6"></div></div></div><main class="py-10"><div class="px-4 sm:px-6 lg:px-8"><!--start map--><div class="mdx max-w-2xl"><h2>Getting Start with Rezact</h2><p>Quick Start Single Bare Minimum:</p><pre><code class="hljs language-bash">npm create @rezact/app@latest my-rezact-project
40<span class="hljs-built_in">cd</span> my-rezact-project
41npm install
42npm run dev
43</code></pre><h3>Kitchen Sink with Tailwind, Typescript, Router, and more</h3><p>This documentation website is created with Rezact.
44You can clone this repo and get started quickly with
45a full featured Rezact app.</p><p>This is a full featured Rezact app with ready to use components and code samples for:</p><ul>
46<li>Tailwind CSS</li>
47<li>Router (Code Splitting on Routes)</li>
48<li>Signals</li>
49<li>Stores</li>
50<li>Forms and Validation</li>
51<li>Input Masking</li>
52<li>Modals, Alerts, and Prompts</li>
53</ul><pre><code class="hljs language-bash"><span class="hljs-comment"># clone this document website repo</span>
54git <span class="hljs-built_in">clone</span> http://github.com/Rezact/rezact-website
55<span class="hljs-built_in">cd</span> rezact-website
56npm install
57npm run dev
58</code></pre></div>
59<pre><code></code></pre><!--end map--></div></main></div></div><!--signal--></div>
60  
60<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>
60
61</body>
62</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.