[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3200":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":28,"readmeContent":29,"aiSummary":30,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":31,"discoverSource":32},3200,"hyperapp","jorgebucaran\u002Fhyperapp","jorgebucaran","1kB-ish JavaScript framework for building hypertext applications","",null,"JavaScript",19208,776,302,11,0,2,12,70.87,"MIT License",false,"main",[24,25,26,27],"framework","javascript","vdom","web","2026-06-12 04:00:16","# Hyperapp\n\n> The tiny framework for building hypertext applications.\n\n- **Do more with less**—We have minimized the concepts you need to learn to get stuff done. Views, actions, effects, and subscriptions are all pretty easy to get to grips with and work together seamlessly.\n- **Write what, not how**—With a declarative API that's easy to read and fun to write, Hyperapp is the best way to build purely functional, feature-rich, browser-based apps using idiomatic JavaScript.\n- **Smaller than a favicon**—1 kB, give or take. Hyperapp is an ultra-lightweight Virtual DOM, [highly-optimized diff algorithm](https:\u002F\u002Fjavascript.plainenglish.io\u002Fjavascript-frameworks-performance-comparison-2020-cd881ac21fce), and state management library obsessed with minimalism.\n\nHere's the first example to get you started. [Try it here](https:\u002F\u002Fcodepen.io\u002Fjorgebucaran\u002Fpen\u002FzNxZLP?editors=1000)—no build step required!\n\n\u003C!-- prettier-ignore -->\n```html\n\u003Cscript type=\"module\">\n  import { h, text, app } from \"https:\u002F\u002Funpkg.com\u002Fhyperapp\"\n\n  const AddTodo = (state) => ({\n    ...state,\n    value: \"\",\n    todos: state.todos.concat(state.value),\n  })\n\n  const NewValue = (state, event) => ({\n    ...state,\n    value: event.target.value,\n  })\n\n  app({\n    init: { todos: [], value: \"\" },\n    view: ({ todos, value }) =>\n      h(\"main\", {}, [\n        h(\"h1\", {}, text(\"To do list\")),\n        h(\"input\", { type: \"text\", oninput: NewValue, value }),\n        h(\"ul\", {},\n          todos.map((todo) => h(\"li\", {}, text(todo)))\n        ),\n        h(\"button\", { onclick: AddTodo }, text(\"New!\")),\n      ]),\n    node: document.getElementById(\"app\"),\n  })\n\u003C\u002Fscript>\n\n\u003Cmain id=\"app\">\u003C\u002Fmain>\n```\n\n[Check out more examples](https:\u002F\u002Fcodepen.io\u002Fcollection\u002FnLLvrz?grid_type=grid)\n\nThe app starts by setting the initial state and rendering the view on the page. User input flows into actions, whose function is to update the state, causing Hyperapp to re-render the view.\n\nWhen describing how a page looks in Hyperapp, we don't write markup. Instead, we use `h()` and `text()` to create a lightweight representation of the DOM (or virtual DOM for short), and Hyperapp takes care of updating the real DOM efficiently.\n\n## Installation\n\n```console\nnpm install hyperapp\n```\n\n## Documentation\n\nLearn the basics in the [Tutorial](docs\u002Ftutorial.md), check out the [Examples](https:\u002F\u002Fcodepen.io\u002Fcollection\u002FnLLvrz?grid_type=grid), or visit the [Reference](docs\u002Freference.md).\n\n## Packages\n\nOfficial packages provide access to [Web Platform](https:\u002F\u002Fplatform.html5.org) APIs in a way that makes sense for Hyperapp. For third-party packages and real-world examples, browse the [Hyperawesome](https:\u002F\u002Fgithub.com\u002Fjorgebucaran\u002Fhyperawesome) collection.\n\n| Package                                        | Status                                                                                                                                              | About                                                                                                     |\n| ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |\n| [`@hyperapp\u002Fdom`](\u002Fpackages\u002Fdom)               | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@hyperapp\u002Fdom.svg?style=for-the-badge&color=0366d6&label=)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@hyperapp\u002Fdom)       | Inspect the DOM, focus and blur.                                                                          |\n| [`@hyperapp\u002Fsvg`](\u002Fpackages\u002Fsvg)               | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@hyperapp\u002Fsvg.svg?style=for-the-badge&color=0366d6&label=)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@hyperapp\u002Fsvg)       | Draw SVG with plain functions.                                                                            |\n| [`@hyperapp\u002Fhtml`](\u002Fpackages\u002Fhtml)             | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@hyperapp\u002Fhtml.svg?style=for-the-badge&color=0366d6&label=)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@hyperapp\u002Fhtml)     | Write HTML with plain functions.                                                                          |\n| [`@hyperapp\u002Ftime`](\u002Fpackages\u002Ftime)             | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@hyperapp\u002Ftime.svg?style=for-the-badge&color=0366d6&label=)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@hyperapp\u002Ftime)     | Subscribe to intervals, get the time now.                                                                 |\n| [`@hyperapp\u002Fevents`](\u002Fpackages\u002Fevents)         | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@hyperapp\u002Fevents.svg?style=for-the-badge&color=0366d6&label=)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@hyperapp\u002Fevents) | Subscribe to mouse, keyboard, window, and frame events.                                                   |\n| [`@hyperapp\u002Fhttp`](\u002Fpackages\u002Fhttp)             | [![npm](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-planned-6a737d?style=for-the-badge&label=)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@hyperapp\u002Fhttp)                     | Talk to servers, make HTTP requests ([#1027](https:\u002F\u002Fgithub.com\u002Fjorgebucaran\u002Fhyperapp\u002Fdiscussions\u002F1027)). |\n| [`@hyperapp\u002Frandom`](\u002Fpackages\u002Frandom)         | [![npm](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-planned-6a737d?style=for-the-badge&label=)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@hyperapp\u002Frandom)                   | Declarative random numbers and values.                                                                    |\n| [`@hyperapp\u002Fnavigation`](\u002Fpackages\u002Fnavigation) | [![npm](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-planned-6a737d?style=for-the-badge&label=)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@hyperapp\u002Fnavigation)               | Subscribe and manage the browser URL history.                                                             |\n\n> Need to create your own effects and subscriptions? [You can do that too](docs\u002Freference.md).\n\n## Help, I'm stuck!\n\nIf you've hit a stumbling block, hop on our [Discord](https:\u002F\u002Fdiscord.gg\u002FeFvZXzXF9U) server to get help, and if you remain stuck, [please file an issue](https:\u002F\u002Fgithub.com\u002Fjorgebucaran\u002Fhyperapp\u002Fissues\u002Fnew), and we'll help you figure it out.\n\n## Contributing\n\nHyperapp is free and open-source software. If you want to support Hyperapp, becoming a contributor or [sponsoring](https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fjorgebucaran) is the best way to give back. Thank you to everyone who already contributed to Hyperapp! \u003C3\n\n[![](https:\u002F\u002Fopencollective.com\u002Fhyperapp\u002Fcontributors.svg?width=1024&button=false)](https:\u002F\u002Fgithub.com\u002Fjorgebucaran\u002Fhyperapp\u002Fgraphs\u002Fcontributors)\n\n## License\n\n[MIT](LICENSE.md)\n","Hyperapp 是一个用于构建超文本应用程序的极简JavaScript框架。它通过提供视图、动作、效果和订阅等易于掌握且无缝协作的核心概念，帮助开发者以声明式API编写功能丰富的浏览器应用。Hyperapp 的体积仅为1kB左右，集成了高度优化的虚拟DOM和状态管理库，特别强调代码简洁与性能优化。适用于需要快速开发轻量级Web应用或对项目大小有严格限制的场景，如移动Web项目或嵌入式系统中的用户界面。","2026-06-11 02:52:50","top_language"]