{"id":13561073,"url":"https://github.com/raystubbs/zero","last_synced_at":"2025-10-21T21:13:08.129Z","repository":{"id":197865182,"uuid":"699089578","full_name":"raystubbs/zero","owner":"raystubbs","description":"Build Web UIs in ClojureScript","archived":false,"fork":false,"pushed_at":"2025-01-21T22:07:48.000Z","size":378,"stargazers_count":106,"open_issues_count":2,"forks_count":4,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-02T23:41:48.921Z","etag":null,"topics":["clojure","clojurescript","front-end","web-components"],"latest_commit_sha":null,"homepage":"","language":"Clojure","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/raystubbs.png","metadata":{"files":{"readme":"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":"2023-10-01T22:01:22.000Z","updated_at":"2025-03-16T21:29:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"59660aa6-b2f2-4b34-8c58-be4bb8637928","html_url":"https://github.com/raystubbs/zero","commit_stats":null,"previous_names":["raystubbs/zero"],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raystubbs%2Fzero","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raystubbs%2Fzero/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raystubbs%2Fzero/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raystubbs%2Fzero/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raystubbs","download_url":"https://codeload.github.com/raystubbs/zero/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247037077,"owners_count":20873092,"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":["clojure","clojurescript","front-end","web-components"],"created_at":"2024-08-01T13:00:52.244Z","updated_at":"2025-10-21T21:13:08.010Z","avatar_url":"https://github.com/raystubbs.png","language":"Clojure","funding_links":[],"categories":["Clojure"],"sub_categories":[],"readme":"\n[![Clojars Project](https://img.shields.io/clojars/v/me.raystubbs/zero.svg)](https://clojars.org/me.raystubbs/zero)\n![Test Badge](https://github.com/raystubbs/zero/actions/workflows/ci.yml/badge.svg)\n[![cljdoc badge](https://cljdoc.org/badge/me.raystubbs/zero)](https://cljdoc.org/d/me.raystubbs/zero)\n\n# Zero\nBuild web UIs in Clojure/Script, the easy way.\n\n## Why?\n- Zero components are [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), which means\n  they're easy to use from anywhere, including:\n  - Raw HTML\n  - JavaScript DOM API\n  - Any frontend framework\n    \n  Besides their reusability, Web Components have many useful features that are lacking from traditional React-style\n  components, for example:\n  - [Slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) are great for boosting reconciliation performance\n  - Stylesheet encapsulation means components can include their own stylesheets, without affecting anything else on the page\n  - An enclosing DOM node to which custom styling and event handlers can be attached\n- Components can be (partially or fully) rendered to raw HTML.\n  - Component markup is rendered into a [declarative shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM#declaratively_with_html).\n  - Structured data can be rendered to element attributes in a built-in format designed for that purpose.\n- A robust data-oriented state management system makes building complex components a breeze.\n  - Component view functions can be pure, and generate pure data; easy to test and reason about\n  - State management constructs are themselves data, they can be serialized/deserialized, compared semantically, etc.\n\n## Example\n```clojure\n(ns zero.demos.bullet-list \"\nA simple bullet list.\n\"\n  (:require\n   [zero.core :refer [\u003c\u003cctx \u003c\u003c act css] :as z]\n   [zero.dom :as zd]\n   [zero.config :as zc]))\n\n(def ^:private style\n  (css \"\n  .option {\n    font-size: 1rem;\n    display: flex;\n    align-items: center;\n    text-align: left;\n    padding: 0 0.5rem;\n    border: none;\n    background: none;\n    margin: 0.5rem 0;\n  }\n\n  .option:hover .bullet {\n    background-color: #e5e5e5;\n  }\n\n  .bullet {\n    border-radius: 1000px;\n    width: 1rem;\n    height: 1rem;\n    border: 1px solid #d4d4d4;\n    background-color: #fafafa;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 0.75rem;\n  }\n\n  .bullet.selected {\n    border: 1px solid #3182ce;\n    background-color: transparent;\n  }\n\n  .bullet .iris {\n    border-radius: 1000px;\n    background-color: #3182ce;\n  }\n\"))\n\n(defn view [{:keys [options value]}]\n  [:root\u003e\n   :#css css\n   :#style {:display \"block\"}\n   (map\n     (fn [option]\n       [:button.option\n        :#on {:click (act [::zd/dispatch :value :data (:value option)])}\n        [:div.bullet\n         :#class (when (= (:value option) value) :selected)\n         (when (= (:value option) value)\n           [:div.iris\n            :#style {:height \"0.75rem\" :width \"0.75rem\"}])]\n        (:view option)])\n     options)])\n\n(zc/reg-components\n  :bullet-list\n  {:props #{:options :value}\n   :view view})\n```\n![chrome_ZrUnG34Vyj](https://github.com/user-attachments/assets/bf772625-fc8d-4323-9493-bb7518d412c7)\n\n## Setup\nAdd something akin to the following somewhere in your boot up logic:\n```clojure\n(zero.config/install! zero.config/!default-db)\n\n;; only for browsers, sets up the web component registry\n(zero.wcconfig/install! zero.config/!default-db)\n\n;; only for browsers, and optional, adds some DOM utilities and convenient components\n(zero.dom/install! zero.config/!default-db)\n```\n\nRegister components with `zero.config/reg-components`.\n\nOn the browser side, registered components will be added to the browser's web\ncomponent registry.  So any time the browser attaches a matching DOM element to the page,\nyour registered component will be used.\n\nWhen rendering to HTML, component views are rendered into\n[declarative shadow DOMs](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM).\nAttributes for registered Zero components are serialized as\n[CDF (Concise Data Format)](./doc/ConciseDataFormat.md), which allows for seamless\ntransfer of structured data to browser-side component implementations.\n\n## Learning\nHere are a few resources to help learn the basics:\n- [State Management](./doc/StateManagement.md)\n- [SubZero Markup Syntax](https://github.com/raystubbs/subzero?tab=readme-ov-file#markup)\n- [Building Components](./doc/BuildingComponents.md)\n- [Concise Data Format](./doc/ConciseDataFormat.md)\n\nAnd some (only one for now) examples:\n- [TodoMVC](./examples/todo)\n\nYou can also browse [c0](https://github.com/raystubbs/c0) (a library of Zero components)\nfor examples.\n\n## Contact\nFeel free to reach out in the [#zero-lib](https://clojurians.slack.com/archives/C06UFMY5LUW)\nchannel on the Clojurians slack for any help, questions, feedback, etc.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraystubbs%2Fzero","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraystubbs%2Fzero","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraystubbs%2Fzero/lists"}