{"id":49200892,"url":"https://github.com/open-tech-foundation/web-app-framework","last_synced_at":"2026-07-05T17:00:17.408Z","repository":{"id":353037302,"uuid":"1215181353","full_name":"Open-Tech-Foundation/Web-App-Framework","owner":"Open-Tech-Foundation","description":"A high-performance, zero-VDOM framework that compiles JSX to native DOM using signals and standard Web Components.","archived":false,"fork":false,"pushed_at":"2026-06-29T21:22:07.000Z","size":1295,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-29T22:18:07.804Z","etag":null,"topics":["api","app","framework","jsx","reactive","signals","web","webcomponent"],"latest_commit_sha":null,"homepage":"https://web.opentechf.org/","language":"JavaScript","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/Open-Tech-Foundation.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":"docs/roadmap.md","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-19T15:32:49.000Z","updated_at":"2026-06-29T21:22:11.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Open-Tech-Foundation/Web-App-Framework","commit_stats":null,"previous_names":["open-tech-foundation/mwaf","open-tech-foundation/web-app-framework"],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/Open-Tech-Foundation/Web-App-Framework","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Open-Tech-Foundation%2FWeb-App-Framework","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Open-Tech-Foundation%2FWeb-App-Framework/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Open-Tech-Foundation%2FWeb-App-Framework/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Open-Tech-Foundation%2FWeb-App-Framework/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Open-Tech-Foundation","download_url":"https://codeload.github.com/Open-Tech-Foundation/Web-App-Framework/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Open-Tech-Foundation%2FWeb-App-Framework/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35162071,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-05T02:00:06.290Z","response_time":100,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["api","app","framework","jsx","reactive","signals","web","webcomponent"],"created_at":"2026-04-23T14:00:45.678Z","updated_at":"2026-07-05T17:00:17.391Z","avatar_url":"https://github.com/Open-Tech-Foundation.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# OTF Web\n\n### The native-first framework for modern web apps.\n\nA high-performance, zero-VDOM framework that compiles JSX to native DOM.\nBuilt with signals and standard Web Components.\n\n[Documentation \u0026amp; Playground](https://web.opentechf.org/) · [Open Tech Foundation](https://github.com/Open-Tech-Foundation) · [MIT License](LICENSE)\n\n\u003c/div\u003e\n\n---\n\n\u003e [!CAUTION]\n\u003e **Alpha.** APIs and architecture may change as we harden toward production.\n\n## Why OTF Web\n\n- **Zero-VDOM** — no diffing, no reconciliation loop. The compiler statically analyzes your JSX and emits the exact `createElement` calls and DOM updates needed.\n- **Standard Web Components** — every component compiles to a native Custom Element. Use it anywhere, with any tool.\n- **Fine-grained signals** — `$state`, `$derived`, `$effect` macros; the compiler wires reactivity, so there's no manual `.value`.\n- **File-based routing** — nested layouts, dynamic segments, catch-all routes, and route guards.\n- **Batteries included** — forms, testing, MDX docs, and a `create-web` scaffolder (see [Ecosystem](#ecosystem)).\n\n## Quick start\n\n```bash\nbun create @opentf/web my-app\ncd my-app\nbun install\nbun run dev\n```\n\n`npm create @opentf/web@latest` and `pnpm create @opentf/web` work too.\n\n## Example\n\n```jsx\nexport default function Counter() {\n  let count = $state(0);\n  const doubled = $derived(count * 2); // no arrow needed — the compiler wraps it\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003e{count} × 2 = {doubled}\u003c/p\u003e\n      \u003cbutton onclick={() =\u003e count++}\u003eIncrement\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nThis compiles to a standard Custom Element built from direct DOM operations — no\nvirtual DOM, no runtime diff. `{count}` becomes a single binding wired to one\nsignal, so updating `count` touches exactly that text node and nothing else.\n\n### Reactive macros\n\n| Macro | What it does |\n| --- | --- |\n| `$state(v)` | A reactive signal. The compiler handles `.value` for you, in logic and JSX. |\n| `$derived(expr)` | A computed value. A bare expression (`$derived(a + b)`) is auto-wrapped. |\n| `$effect(fn)` | Runs `fn` whenever its reactive dependencies change. |\n| `$ref()` | Captures a reference to a DOM element. |\n\nAny `{…}` containing reactive values is analyzed and wired for fine-grained\nupdates, so `{cond ? \u003cA/\u003e : \u003cB/\u003e}` reads like React but updates surgically.\n\n## Performance\n\nStandard [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) ops vs React, Solid, and Svelte 5 through one shared harness — run `bun run bench all` (median ms, lower is better):\n\n| operation | otfw | react | solid | svelte |\n| --- | --: | --: | --: | --: |\n| create 1,000 rows | 83.4 | 83.4 | **83.2** | 83.3 |\n| create 10,000 rows | **716.8** | 877.2 | 718.1 | 735.2 |\n| append 1,000 to 1,000 | 66.8 | 69.8 | **66.6** | **66.6** |\n| update every 10th (1k) | 33.4 | **28.8** | 31.5 | 33.4 |\n| swap 2 rows (1k) | 33.3 | 52.6 | 33.3 | **33.2** |\n| select row (1k) | 36.2 | **23.5** | 33.3 | 33.4 |\n| remove row (1k) | 33.4 | **23.9** | 33.3 | 33.3 |\n| clear 10,000 rows | 50.1 | 73.9 | **49.1** | 49.7 |\n\n\u003e Indicative only — a frame-quantized timer (~16.6 ms floor); see [methodology \u0026amp; caveats](benchmarks/README.md).\n\n## Ecosystem\n\n| Package | Purpose |\n| --- | --- |\n| [`@opentf/web`](packages/web) | Runtime — signals, DOM operations, router, SSG. |\n| [`@opentf/web-cli`](packages/web-cli) | The `otfw` toolchain — dev server and production build. |\n| [`@opentf/web-form`](packages/web-form) | Reactive forms with async validation. |\n| [`@opentf/web-test`](packages/web-test) | Testing utilities for native components. |\n| [`@opentf/web-docs`](packages/web-docs) | MDX documentation theme — sidebar, callouts, TOC. |\n| [`create-web`](packages/create-web) | Project scaffolder (`create @opentf/web`). |\n\n## Documentation\n\nFull guides, API reference, and a live playground at **[web.opentechf.org](https://web.opentechf.org/)**.\n\n## License\n\n[MIT](LICENSE) © [Open Tech Foundation](https://github.com/Open-Tech-Foundation).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopen-tech-foundation%2Fweb-app-framework","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopen-tech-foundation%2Fweb-app-framework","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopen-tech-foundation%2Fweb-app-framework/lists"}