{"id":19281251,"url":"https://github.com/zouloux/reflex-dom","last_synced_at":"2025-04-22T01:30:56.868Z","repository":{"id":41522221,"uuid":"504267620","full_name":"zouloux/reflex-dom","owner":"zouloux","description":"Reflex is a tiny and fast reactive UI library.","archived":false,"fork":false,"pushed_at":"2024-10-06T16:25:56.000Z","size":8138,"stargazers_count":14,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-01T17:53:24.989Z","etag":null,"topics":["dom","preact","react","reactive","state-management","ui","vdom","vdom-library","virtual-dom"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zouloux.png","metadata":{"files":{"readme":".github/README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-16T18:39:22.000Z","updated_at":"2024-10-06T16:25:59.000Z","dependencies_parsed_at":"2023-10-13T18:18:18.924Z","dependency_job_id":"24df6ac5-e188-4eaf-8a8e-aea18cb2ab5a","html_url":"https://github.com/zouloux/reflex-dom","commit_stats":null,"previous_names":["zouloux/reflex-dom","zouloux/reflex"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zouloux%2Freflex-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zouloux%2Freflex-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zouloux%2Freflex-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zouloux%2Freflex-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zouloux","download_url":"https://codeload.github.com/zouloux/reflex-dom/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250161941,"owners_count":21385012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom","preact","react","reactive","state-management","ui","vdom","vdom-library","virtual-dom"],"created_at":"2024-11-09T21:22:08.084Z","updated_at":"2025-04-22T01:30:56.269Z","avatar_url":"https://github.com/zouloux.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Reflex\n\n__Reflex__ is a tiny and fast reactive UI library.\n\n- 🦋 Super lightweight and **0 dependency**, about ![~4kb](../bits/reflex.es2022.min.js.svg) min-zipped\n- 🏎 Highly performant diffing algorithm\n- 🔋 Batteries included with **factory extensions**\n- ⚛️ Truly reactive, states are Signals by design\n- 🔍 Fine grained DOM updates for even better performances, components are rendered only when needed\n- 🤓 Typed JSX\n- 🍰 Easy to learn\n- 🤘️ HMR Support for Vite\n- 🚀 Super fast hydration support\n\n[![npm](https://img.shields.io/npm/v/reflex-dom.svg)](http://npm.im/reflex-dom)\n![](https://img.shields.io/badge/Status-Release_Candidate-green)\n\u003cbr\u003e\n![](https://img.shields.io/badge/Build-passing-success)\n![](https://img.shields.io/badge/0-dependency-success)\n\u003cbr\u003e\n[![gzip size](http://img.badgesize.io/https://unpkg.com/reflex-dom/dist/reflex.es2022.min.js?compression=gzip\u0026label=gzip)](https://unpkg.com/reflex-dom/dist/reflex.es2022.min.js)\n[![brotli size](http://img.badgesize.io/https://unpkg.com/reflex-dom/dist/reflex.es2022.min.js?compression=brotli\u0026label=brotli)](https://unpkg.com/reflex-dom/dist/reflex.es2022.min.js)\n\n---\n\n## Quick example\n\n```shell\n# Install with npm\nnpm i reflex-dom\n```\n\n```typescript jsx\nimport { h, render, state } from 'reflex-dom';\nexport function App (props) {\n  // State management\n  const counter = state(0);\n  const increment = () =\u003e counter.value ++;\n  const reset = () =\u003e counter.value = 0;\n  // Components returns a render function\n  return () =\u003e \u003cdiv\u003e\n    \u003ch1\u003eHello from {props.name} 👋\u003c/h1\u003e\n    \u003cbutton onClick={increment}\u003eIncrement\u003c/button\u003e\u0026nbsp;\n    \u003cbutton onClick={reset}\u003eReset\u003c/button\u003e\u0026nbsp;\n    \u003cspan\u003eCounter : {counter}\u003c/span\u003e\n  \u003c/div\u003e\n}\nrender( \u003cApp name=\"Reflex\" /\u003e, document.body );\n```\n\n![](../docs/api/_images/example.gif)\n\n---\n\n## [🎮 - Play with this example on StackBlitz](https://stackblitz.com/edit/node-freprp?file=index.tsx)\n## [👨‍🏫 - Learn Reflex in 5 minutes](https://zouloux.github.io/reflex/learn/)\n## [📘 - See API documentation](https://zouloux.github.io/reflex/api/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzouloux%2Freflex-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzouloux%2Freflex-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzouloux%2Freflex-dom/lists"}