{"id":13801171,"url":"https://github.com/lilactown/helix","last_synced_at":"2025-04-14T11:21:39.582Z","repository":{"id":40362595,"uuid":"223447339","full_name":"lilactown/helix","owner":"lilactown","description":"A simple, easy to use library for React development in ClojureScript.","archived":false,"fork":false,"pushed_at":"2024-08-04T17:08:51.000Z","size":3485,"stargazers_count":643,"open_issues_count":16,"forks_count":53,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-07T02:17:39.459Z","etag":null,"topics":["cljs","clojurescript","hooks","interop","react"],"latest_commit_sha":null,"homepage":"","language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"epl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lilactown.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-11-22T16:53:30.000Z","updated_at":"2025-03-20T16:22:50.000Z","dependencies_parsed_at":"2024-04-16T21:49:14.923Z","dependency_job_id":"0f06c783-eb19-43f8-87fb-1a26190c9ecb","html_url":"https://github.com/lilactown/helix","commit_stats":{"total_commits":382,"total_committers":26,"mean_commits":"14.692307692307692","dds":0.5366492146596858,"last_synced_commit":"bae8a2b761a1d5c8239f8fba56632900fc2eca4f"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lilactown%2Fhelix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lilactown%2Fhelix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lilactown%2Fhelix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lilactown%2Fhelix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lilactown","download_url":"https://codeload.github.com/lilactown/helix/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248868849,"owners_count":21174770,"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":["cljs","clojurescript","hooks","interop","react"],"created_at":"2024-08-04T00:01:20.252Z","updated_at":"2025-04-14T11:21:39.551Z","avatar_url":"https://github.com/lilactown.png","language":"Clojure","funding_links":[],"categories":["Awesome ClojureScript"],"sub_categories":["[React.js](https://facebook.github.io/react/) Interface"],"readme":"# Helix\n\nClojureScript optimized for modern React development.\n\n\n```clojure\n(ns my-app.core\n  (:require [helix.core :refer [defnc $]]\n            [helix.hooks :as hooks]\n            [helix.dom :as d]\n            [\"react-dom/client\" :as rdom]))\n\n;; define components using the `defnc` macro\n(defnc greeting\n  \"A component which greets a user.\"\n  [{:keys [name]}]\n  ;; use helix.dom to create DOM elements\n  (d/div \"Hello, \" (d/strong name) \"!\"))\n\n(defnc app []\n  (let [[state set-state] (hooks/use-state {:name \"Helix User\"})]\n    (d/div\n     (d/h1 \"Welcome!\")\n      ;; create elements out of components\n      ($ greeting {:name (:name state)})\n      (d/input {:value (:name state)\n                :on-change #(set-state assoc :name (.. % -target -value))}))))\n\n;; start your app with your favorite React renderer\n(defonce root (rdom/createRoot (js/document.getElementById \"app\")))\n(.render root ($ app))\n```\n\n## Installation\n\n[![Clojars Project](https://img.shields.io/clojars/v/lilactown/helix.svg)](https://clojars.org/lilactown/helix)\n\nInstall the latest version from clojars in your project.\n\nInstall JS dependencies:\n\n```\nnpm init # initialize NPM project if necessary\nnpm i react react-refresh # install react, and react-refresh for hot reloading support (see docs)\nnpm i react-dom # install renderer. alternatives could be react-native, react-three-fiber, etc.\n```\n\n### shadow-cljs and react-native\n\nSee [React Native](./docs/react-native.md).\n\n### lein-cljsbuild / figwheel-main / raw CLJS\n\nUse [CLJSJS](https://github.com/cljsjs/packages/tree/master/react) or package\nreact yourself using webpack, ensuring it is provided as the name `\"react\"`.\n\n## Documentation\n\nView formatted docs at [![cljdoc badge](https://cljdoc.org/badge/lilactown/helix)](https://cljdoc.org/d/lilactown/helix/CURRENT)\n\n- [Why Helix](./docs/motivation.md)\n- [Creating Components](./docs/creating-components.md)\n  - [Props](./docs/creating-components.md#props)\n  - [Interop](./docs/creating-components.md#interop)\n  - [Higher-order Components](./docs/creating-components.md#higher-order-components)\n  - [Class Components](./docs/creating-components.md#class-components) (WIP)\n- [Creating elements](./docs/creating-elements.md)\n  - [$ macro](./docs/creating-elements.md#-macro)\n    - [Native elements and props](./docs/creating-elements.md#native-elements-and-props)\n    - [Dynamic props](./docs/creating-elements.md#dynamic-props)\n  - [`helix.dom`](./docs/creating-elements.md#helixdom)\n  - [Other helpful tools](./docs/creating-elements.md#other-helpful-tools)\n    - [Fragments](./docs/creating-elements.md#fragments)\n    - [Context providers](./docs/creating-elements.md#context-providers)\n    - [Suspense boundaries](./docs/creating-elements.md#suspense-boundaries)\n    - [Creating elements dynamically](./docs/creating-elements.md#creating-elements-dynamically)\n    - [Factory functions](./docs/creating-elements.md#factory-functions)\n- [Hooks](./docs/hooks.md)\n  - [Maintaining state](./docs/hooks.md#maintaining-state)\n    - [Reducers](./docs/hooks.md#reducers)\n    - [Refs](./docs/hooks.md#refs)\n  - [Doing side effects](./docs/hooks.md#doing-side-effects)\n  - [Optimizations](./docs/hooks.md#optimizations)\n  - [Other miscellaneous](./docs/hooks.md#other-miscellaneous)\n- [Experiments](./docs/experiments.md)\n  - [Define as factory function](./docs/experiments.md#define-as-factory-function)\n  - [Detect invalid hooks usage](./docs/experiments.md#detect-invalid-hooks-usage)\n  - [Fast Refresh](./docs/experiments.md#fast-refresh)\n  - [Metadata Optimizations](./docs/experiments.md#metadata-optimizations)\n- [Pro-tips](./docs/pro-tips.md)\n  - [Memoizing components](./docs/pro-tips.md#memoizing-components)\n  - [Don't use deep equals](./docs/pro-tips.md#dont-use-deep-equals)\n  - [Create a custom macro](./docs/pro-tips.md#create-a-custom-macro)\n- [Frequently Asked Questions](./docs/faq.md)\n  - [What about hx?](./docs/faq.md#what-about-hx)\n  - [What about hiccup?](./docs/faq.md#what-about-hiccup)\n- [React Native](./docs/react-native.md)\n\n\nOther resources:\n\n- [#helix Slack channel](https://clojurians.slack.com/archives/CRRJBCX7S) ([Sign up for Slack here](http://clojurians.net))\n\n## Related projects and repos\n- [Example TodoMVC](https://github.com/Lokeh/helix-todo-mvc)\n- [Example repo running tests using testing-library and jsdom](https://github.com/vloth/helix-jsdom)\n- [Examples from the React docs site rewritten in helix](https://github.com/iwrotesomecode/react-docs-helix)\n\n## Companies using it\n\n[\u003cimg src=\"https://github.com/lilactown/helix/assets/2687140/76097c17-0458-4f2d-a3ec-dc64445d3771\" alt=\"amperity_logo\" style=\"width: 50px;\"\u003e](https://amperity.com/)\n\n\n## License\n\nCopyright © 2023 Will Acton\n\nDistributed under the EPL 2.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flilactown%2Fhelix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flilactown%2Fhelix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flilactown%2Fhelix/lists"}