https://github.com/zouloux/reflex-dom

Reflex is a tiny and fast reactive UI library.
https://github.com/zouloux/reflex-dom

dom preact react reactive state-management ui vdom vdom-library virtual-dom

Last synced: about 2 months ago
JSON representation

Reflex is a tiny and fast reactive UI library.

• Host: GitHub
• URL: https://github.com/zouloux/reflex-dom
• Owner: zouloux
• License: mit
• Created: 2022-06-16T18:39:22.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-20T10:47:42.000Z (4 months ago)
• Last Synced: 2024-08-20T16:02:42.562Z (4 months ago)
• Topics: dom, preact, react, reactive, state-management, ui, vdom, vdom-library, virtual-dom
• Language: TypeScript
• Homepage:
• Size: 8.46 MB
• Stars: 14
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: .github/README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Reflex

__Reflex__ is a tiny and fast reactive UI library.

- 🦋 Super lightweight and **0 dependency**, about ![~4kb](../bits/reflex.es2022.min.js.svg) min-zipped

- 🏎 Highly performant diffing algorithm

- 🔋 Batteries included with **factory extensions**

- ⚛️ Truly reactive, states are Signals by design

- 🔍 Fine grained DOM updates for even better performances, components are rendered only when needed

- 🤓 Typed JSX

- 🍰 Easy to learn

- 🤘️ HMR Support for Vite

- 🚀 Super fast hydration support

[![npm](https://img.shields.io/npm/v/reflex-dom.svg)](http://npm.im/reflex-dom)

![](https://img.shields.io/badge/Status-Release_Candidate-green)




![](https://img.shields.io/badge/Build-passing-success)

![](https://img.shields.io/badge/0-dependency-success)




[![gzip size](http://img.badgesize.io/https://unpkg.com/reflex-dom/dist/reflex.es2022.min.js?compression=gzip&label=gzip)](https://unpkg.com/reflex-dom/dist/reflex.es2022.min.js)

[![brotli size](http://img.badgesize.io/https://unpkg.com/reflex-dom/dist/reflex.es2022.min.js?compression=brotli&label=brotli)](https://unpkg.com/reflex-dom/dist/reflex.es2022.min.js)

---

## Quick example

```shell

# Install with npm

npm i reflex-dom

```

```typescript jsx

import { h, render, state } from 'reflex-dom';

export function App (props) {

  // State management

  const counter = state(0);

  const increment = () => counter.value ++;

  const reset = () => counter.value = 0;

  // Components returns a render function

  return () => 


    
Hello from {props.name} 👋

    Increment 

    Reset 

    Counter : {counter}

  

}

render( , document.body );

```


![](../docs/api/_images/example.gif)

---

## [🎮 - Play with this example on StackBlitz](https://stackblitz.com/edit/node-freprp?file=index.tsx)

## [👨‍🏫 - Learn Reflex in 5 minutes](https://zouloux.github.io/reflex/learn/)

## [📘 - See API documentation](https://zouloux.github.io/reflex/api/)