Effortless UI, Powerful Simplicity

• 🔥 Similar to React
• 🔑 TS Native 🔐 (But can be used with JS)
• ❌ No Virtual DOM 📦
• ❌ No compiler ⚙
• 📦 Rever Router (Router for ReverUI)

• React-like JSX
• Good intellisense
• useSignal ♻
• useEffect (state changes & mounted)
• Fragments (<> </>)
• Custom Hooks (must start with "$use")
• Conditional Rendering (<$Show when={condition}/>) ❓
• Loop Rendering (<$For each={arr} element={() => {...}}>) 📜
• Event Handling (all events in lowercase) Click Key ...
• Compatible with Vite Plugins (TailwindCSS, ...) ✨
• Reusable Components (<$Component/>) 📦
• Smart Re-rendering 🧠

The project is built on top of Vite

This are the features that Vite provides:

• JSX Parser (Configurable)
• Typescript config
• Bundler
• HMR (Hot Module Replacement)
• Support for CSS Preprocessors
• Transpiler

There is a prepared Vite template ready to use that includes examples & TailwindCSS configured by default

• Clone the repository: git clone https://github.com/PiterWeb/ViteReverUITemplate.git
• Open the folder & install the dependencies: npm install
• Run the development enviroment: npm run dev

• $useSignal:

  import { $useSignal } from "reverui"; export default function StateFullApp() { const mySignal = $useSignal("initValue"); return <div>...</div>; }

• $useEffect:

  import { $useEffect, $useSignal } from "reverui"; export default function StateFullApp() { $useEffect(() => { console.log("Mounted"); }); const counter = $useSignal(0); $useEffect(() => { console.log("Counter value changed to " + counter.value); }, [counter]); return <div>...</div>; }

• Example Counter Component:

  import { $useSignal, $useEffect } from "reverui"; export default function StateFullApp() { // UseEffect with no dependencies before $useSignal will be called only on mount $useEffect(() => { console.log("Mounted"); }); const counter = $useSignal(0); // const signal = $useSignal(initialValue); // $useEffect with dependencies will be called only when the dependencies change $useEffect(() => { console.log("Counter value changed to " + counter.value); }, [counter]); return ( <div> <h1>Stateful Component</h1> <p> Counter: <Show when={counter.value === 0} element={() => <span>"You didn't click"</span>} /> <Show when={counter.value !== 0} element{() => <span>counter.value</span>} /> </p> <button onclick={() => counter.value++}>Increment</button> </div> ); }