{"id":15011745,"url":"https://github.com/strixhq/strix","last_synced_at":"2026-01-21T05:43:38.447Z","repository":{"id":255965543,"uuid":"853994110","full_name":"strixhq/strix","owner":"strixhq","description":"🦉 Zero-Magic Web Library 🦉","archived":false,"fork":false,"pushed_at":"2024-10-30T17:02:06.000Z","size":558,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T03:51:51.160Z","etag":null,"topics":["angular","html","javascript","jsr","lit","preact","react","solidjs","svelte","typescript","vue"],"latest_commit_sha":null,"homepage":"https://strix.sh","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/strixhq.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":"2024-09-08T05:29:09.000Z","updated_at":"2024-10-30T17:02:10.000Z","dependencies_parsed_at":"2024-10-26T08:31:08.600Z","dependency_job_id":"d28b72a4-56ff-4ca8-82eb-675a2e0ef02e","html_url":"https://github.com/strixhq/strix","commit_stats":{"total_commits":533,"total_committers":3,"mean_commits":"177.66666666666666","dds":"0.19324577861163228","last_synced_commit":"6926507c38fefddc61a9ac4a5bd646ec5a262b8f"},"previous_names":["strixhq/strix"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strixhq%2Fstrix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strixhq%2Fstrix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strixhq%2Fstrix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strixhq%2Fstrix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/strixhq","download_url":"https://codeload.github.com/strixhq/strix/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248514209,"owners_count":21116899,"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":["angular","html","javascript","jsr","lit","preact","react","solidjs","svelte","typescript","vue"],"created_at":"2024-09-24T19:41:35.742Z","updated_at":"2026-01-21T05:43:38.423Z","avatar_url":"https://github.com/strixhq.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch1\u003eStrix 🦉\u003c/h1\u003e\n\n![GitHub Repo stars](https://img.shields.io/github/stars/strixhq/strix)\n![GitHub License](https://img.shields.io/github/license/strixhq/strix)\\\n![strix std JSR Version](https://img.shields.io/jsr/v/%40strix/std?logo=jsr\u0026label=%40strix%2Fstd\u0026labelColor=%2309303F\u0026color=%23EDD82A\u0026link=https%3A%2F%2Fjsr.io%2F%40strix%2Fstd)\n![strix attr JSR Version](https://img.shields.io/jsr/v/%40strix/attr?logo=jsr\u0026label=%40strix%2Fattr\u0026labelColor=%2309303F\u0026color=%23EDD82A\u0026link=https%3A%2F%2Fjsr.io%2F%40strix%2Fattr)\n![JSR Version](https://img.shields.io/jsr/v/%40strix/client?logo=jsr\u0026label=%40strix%2Fclient\u0026labelColor=%2309303F\u0026color=%23EDD82A\u0026link=https%3A%2F%2Fjsr.io%2F%40strix%2Fclient)\n\n\n\n\n\u003c!-- ![npm package minimized gzipped size (select exports)](https://img.shields.io/bundlejs/size/libh) --\u003e\n\n```javascript\nimport { $, h as html } from '@strix/std';\nimport { on } from '@strix/attr';\n\n\nexport default function() {\n\n    const count = $(0);\n\n    return html`\n        \u003ch1\u003e${count}\u003c/h1\u003e\n        \u003cbutton ${{ [on.click]: () =\u003e count.$++ }}\u003e\n            Increment\n        \u003c/button\u003e\n    `;\n}\n```\n\n**Strix** is a ~3KB selfish library to provide some weirder, but simpler ways to building web interface.\\\nVisit [strix.sh](https://strix.sh) for more infomation.\n\n### Installation\n\nOn Deno (version 1.46 or newer)\n```sh\ndeno -WER https://strix.sh\n```\n\n### Demo\nWorking demo is out now at **[StackBlitz](https://stackblitz.com/edit/web-platform-nqktqc?devToolsHeight=33\u0026file=counter.js)** and **[Codepen](https://codepen.io/ihasq/pen/wvLRzyd?editors=0011)**.\n\n### Releases\n\n|                                                                   | Version                                                                                                                                              | Exports                                                                                                                                                                                   | Description      |\n| ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- |\n| **[std](https://github.com/ihasq/strix/tree/main/pkg/std)**       | [![JSR Version](https://img.shields.io/jsr/v/%40strix/std?logo=jsr\u0026labelColor=%23083344\u0026color=%23F7DF1E\u0026label=%20)](https://jsr.io/@strix/std)       | **[`h`](https://jsr.io/@strix/std/doc/~/h)** **[`$`](https://jsr.io/@ihasq/esptr/doc/~/$)** | Standard Library |\n| **[attr](https://github.com/ihasq/strix/tree/main/pkg/attr)** | [![JSR Version](https://img.shields.io/jsr/v/%40strix/attr?logo=jsr\u0026labelColor=%23083344\u0026color=%23F7DF1E\u0026label=%20)](https://jsr.io/@strix/attr) |**[`on`](https://jsr.io/@strix/attr/doc/~/on)** **[`at`](https://jsr.io/@strix/attr/doc/~/at)** **[`css`](https://jsr.io/@strix/attr/doc/~/css)** | Attribute Modules |\n| **[client](https://github.com/ihasq/strix/tree/main/pkg/client)** | [![JSR Version](https://img.shields.io/jsr/v/%40strix/client?logo=jsr\u0026labelColor=%23083344\u0026color=%23F7DF1E\u0026label=%20)](https://jsr.io/@strix/client) | **[`write`](https://jsr.io/@strix/client/doc/~/write)**\u003cbr\u003e**[`createElement`](https://jsr.io/@strix/client/doc/~/createElement)**                                                                                                                   | Client Modules   |\n\n\n![badge](./web/page/badge.svg)\n\n### Components and Fragments\n```javascript\n// ...\n\nconst justFragment = html`\n    \u003clabel\u003eI am fragment\u003c/label\u003e\n    \u003clabel\u003ewith components!\u003c/label\u003e\n    ${App(\"double-click me!\")}\n`;\n```\n\n### Styling, Event-listening\n```javascript\n// ...\n\nimport { on, css } from \"@strix/attr\"\n\nfunction WithAttributes() {\n    return html`\n        \u003cbutton ${{\n            [css.color]: \"red\",\n            [on.click]: () =\u003e alert(\"clicked!\")\n        }}\u003e\n            click me...\n        \u003c/button\u003e\n    `\n}\n```\n\n### Create Class\n```javascript\n// ...\n\nconst mainButton = {\n    [css]: {\n        backgroundColor: \"blue\",\n        color: \"white\",\n        borderRadius: \"2px\"\n    },\n}\n\nfunction AppWithClass() {\n\n    return html`\n        \u003cbutton ${mainButton}\u003e\n            I am main button!\n        \u003c/button\u003e\n\n        \u003cbutton ${mainButton} ${{\n            [css.color]: \"yellow\"\n        }}\u003e\n            and it is overridable!\n        \u003c/button\u003e\n    `\n}\n\n```\n\n### Programmable Attributes\n\n```javascript\n// ...\n\nconst onDoubleClick = $((callbackFn, ref) =\u003e {\n    ref.addEventListener('dblclick', callbackFn, { passive: true });\n});\n\nfunction App(defaultText) {\n    return html`\n        \u003ctextarea ${{ [onDoubleClick]: ({ target: { value } }) =\u003e console.log(value) }}\u003e\n            ${defaultText}\n        \u003c/textarea\u003e\n    `;\n}\n```\n\n### Create Element\n\n```javascript\n// ...\n\nimport { createElement } from '@strix/client';\n\ndocument.body.append(...createElement(App()));\n```\n\n### Unsafe-Proof\n```javascript\nconst username = \"\u003cscript\u003ealert(0)\u003c/script\u003e\";\n\nconst temp = html`\u003clabel\u003eusername is ${username}!\u003c/label\u003e`\n\n// username is \u003cscript\u003ealert(0)\u003c/script\u003e!\n```\n\n### Post-processing with ID\n```javascript\nimport { id } from \"@strix/attr\"\n\nconst canvasApp = html`\u003ccanvas ${id.myCanvas}\u003e\u003c/canvas\u003e`.then(({ myCanvas }) =\u003e {\n    const ctx = myCanvas.getContext(\"2d\");\n    // ...\n})\n```\n\n### License\n\nStrix is MIT Licensed. ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstrixhq%2Fstrix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstrixhq%2Fstrix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstrixhq%2Fstrix/lists"}