<div class="github-widget" data-repo="jorgebucaran/awesome-hyperapp"></div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6890694312814945" data-ad-slot="5473692530" data-ad-format="auto"  data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
## Hyperawesome

 &gt;在准备发布V2时，我正在准备一个新的“超赞列表”. 请待命！  ：波：


精选的超赞清单 [Hyperapp](https://github.com/jorgebucaran/hyperapp) 资源.

要做出贡献，请分叉该存储库，添加精彩的条目并发送给我们PR. 看到 [CONTRIBUTING](https://github.com/jorgebucaran/awesome-hyperapp/blob/master//CONTRIBUTING.md) 想要查询更多的信息.

<!-- TOC -->


<!-- /TOC -->

## Official Resources

* [Hyperapp GitHub](https://github.com/jorgebucaran/hyperapp)
* [Hyperapp Tutorial](https://github.com/jorgebucaran/hyperapp/blob/main/docs/tutorial.md)
* [Hyperapp API Reference](https://github.com/jorgebucaran/hyperapp/blob/main/docs/reference.md)
* [Hyperapp Community on Discord](https://discord.gg/5CtfCYEq8V)
* [Hyperapp Twitter](https://twitter.com/hyperappjs)
* [Hyperapp Reddit](https://www.reddit.com/r/hyperapp/)


## Articles & Tutorials

* [A Walk through Hyperapp 2](https://medium.com/hyperapp/a-walk-through-hyperapp-2-b1f642fca172)
* [Hyperapp in Under 5 Minutes](https://medium.com/@NickDodson/hyperapp-v2-in-under-5-minutes-7e9fa49f7f5)
* [Hyperapp Code-along](https://zaceno.github.io/codealong-hyperapp) –从“ Hello World”到完整的TodoMVC的视频系列，其中包含一些实用技巧和想法.

## Utilities

* [hyperapp-router](https://github.com/mrozbarry/hyperapp-router) -Hyperapp的路由器
* [hyperapp-form](https://github.com/zaceno/hyperapp-form) -减轻了验证和提交表格的痛苦
* [hyperapp-styled-components](https://github.com/silentcicero/hyperapp-styled-components) -基于组件的面向组件的CSS-in-JS系统 [styled-components](https://styled-components.com)
* [hyperlit](https://github.com/zaceno/hyperlit) -Hyperapp的类似JSX的标记模板文字
* [hypermdx](https://github.com/talentlessguy/hypermdx) -Markdown通过Hyperapp增强

## Examples

* [RealWorld with Hyperapp](https://github.com/kwasniew/hyperapp2-real-world-example)
* [7GUIs with Hyperapp](https://github.com/zaceno/sevenguis-hyperapp)

## Starters

* [bonniss/hyparcel](https://github.com/bonniss/hyparcel) -Hyperapp v2 + TailwindCSS + Parcel样板，在生产中集成了PurgeCSS.
* [loteoo/hyperapp-starter](https://github.com/loteoo/hyperapp-starter) 专注于开发人员经验的Clean PWA启动程序-包裹，CSS模块，可靠的配置


---

## V1

以下这些资源仅适用于Hyperapp的V1

## Articles & Tutorials V1

* [An Introduction to Hyperapp](https://www.sitepoint.com/hyperapp-1-kb-javascript-library/)
* [How Hyperapp Works](https://gist.github.com/JorgeBucaran/8dc33b7947f3193eb2ea3d5700e27036)
* [2018 年は Hyperapp の年だ - Qiita](https://qiita.com/JorgeBucaran/items/c48446babe0627e25ee6) （日本）
* [新 Qiita で React をやめて Hyperapp を採用した背景 - Qiita](https://qiita.com/yuku_t/items/2839e57a1933507f36b4) （Japanase）
* [Hyperapp の良さとは何か考えてみた - Qiita](https://qiita.com/ababup1192/items/0dd5c70bee5feaf5dea3) （日本）
* [Pure programming with Hyperapp - Gleb Bahmutov](https://glebbahmutov.com/blog/pure-programming-with-hyper-app)
* [Interview with Jorge Bucaran - SurviveJS](https://survivejs.com/blog/hyperapp-interview)
* [Hypercraft - A collection of Hyperapp techniques](https://zaceno.github.io/hypercraft/)
* [《从0到1掌握HyperApp》](https://hyperapp.js.cool/)（简体中文， [Source](https://github.com/willin/hyperapp.js.cool)）
* [Creating a Snake Clone with Hyperapp](https://dev.to/avalander/create-a-snake-clone-with-hyperapp-part-1-2ffn)

## Boilerplates V1

* [tzellman/hyperapp-boilerplate](https://github.com/tzellman/hyperapp-boilerplate) -样板展示了如何创建可用于生产环境的Hyperapp应用程序.
* [lukejacksonn/hyperapp-electron](https://github.com/lukejacksonn/hyperapp-electron) -带有Hyperapp，LiveReload和Redux DevTools的最小化电子应用启动器.
* [selfup/hyperapp-one](https://github.com/selfup/hyperapp-one) -使用带有Airbnb ESlint和JSX的包裹的简单Hyperapp样板计数器应用程序.
* [lukejacksonn/hyperapp-pwa](https://github.com/lukejacksonn/hyperapp-pwa) -Hyperapp项目的最小，渐进式Web应用程序兼容模板.
* [marcusasplund/hyperapp-RxJS](https://github.com/marcusasplund/hyperapp-RxJS) -带有RxJS和服务工作者的Hyperapp.
* [marcusasplund/hyperapp-todo](https://github.com/marcusasplund/hyperapp-todo-simple) -使用Hyperapp构建的简单CRUD todo-app.
* [jdh2550/hyperapp-responsive-admin](https://github.com/jdh2550/hyperapp-responsive-admin) -具有简单登录和GraphQL的响应式应用程序.
* [joseluisq/hyperapp-starter](https://github.com/joseluisq/hyperapp-starter) -最小化的Hyperapp，TypeScript和Parcel启动器.
* [elisherer/hyperapp-less-boilerplate](https://github.com/elisherer/hyperapp-less-boilerplate) -使用LESS和hyperapp-forms最小化webpack Hyperapp设置.

## Examples V1

* [30 Seconds of Interviews](https://github.com/fejes713/30-seconds-of-interviews) -精选的常见面试问题集.
* [Emoji Search](https://codepen.io/ismamz/pen/ppGMWM) -用于搜索表情符号的简单应用.
* [Markdown Editor](https://codepen.io/ismamz/pen/wpNvmy) -使用`localStorage`（使用`dangerouslySetInnerHTML`）的简单markdown编辑器.
* [Type The Tao Te Ching](https://github.com/callum-oakley/type-the-tao-te-ching) -打字练习应用程序，具有《道德经》中的文章.
* [Serafeim's Hyperapp Tutorial](https://github.com/spapas/hyperapp-tutorial)  -一个相当大的应用程序，可以用作实际教程； 使用Django / DRF API.
* [Home Away From Home](https://homeawayfromhome.online) -结识外国人的社交网络和居住在国外的人的资源.
* [Repository Search](https://ricosmall.github.io/hyperapp-search) -搜索Github存储库的简单工具.


## Utilities V1

* [@hyperapp/html](https://github.com/hyperapp/html) -Hyperapp的HTML助手.
* [@hyperapp/logger](https://github.com/hyperapp/logger) -将状态更新和操作信息记录到控制台.
* [@hyperapp/router](https://github.com/hyperapp/router) -Hyperapp的官方路由器.
* [@hyperapp/render](https://github.com/hyperapp/render) -将Hyperapp渲染为具有SSR和Node.js流支持的HTML字符串.
* [andyrj/hyperapp-redux-devtools](https://github.com/andyrj/hyperapp-redux-devtools) -允许对Hyperapp使用redux-devtools-extension.
* [hyperstart/hyperapp-devtools](https://github.com/hyperstart/hyperapp-devtools) -Hyperapp的时间旅行调试器和其他devtool.
* [zaceno/hyperapp-context](https://github.com/zaceno/hyperapp-context) -过度传递深层组件树的补救措施
* [zaceno/hyperapp-nestable](https://github.com/zaceno/hyperapp-nestable) -在有状态组件等应用中使用应用.
* [zaceno/hyperapp-transitions](https://github.com/zaceno/hyperapp-transitions) -帮助您在Hyperapp应用程序中制作过渡动画.
* [selfup/hyperapp-moisturize](https://github.com/selfup/hyperapp-moisturize) -用于动态升级Hyperapp应用程序的HOA.
* [lukejacksonn/hyperapp-firebase-auth](https://github.com/lukejacksonn/hyperapp-firebase-auth) -使用Firebase降低对Hyperapp的身份验证.
* [okwolf/hyperapp-effects](https://github.com/okwolf/hyperapp-effects) -榆木风格的副作用作为数据.
* [okwolf/hyperapp-freeze](https://github.com/okwolf/hyperapp-freeze) -深深冻结发展中的状态.
* [davidjamesstone/hyperapp-customelements](https://github.com/davidjamesstone/hyperapp-customelements) -hyperapp的W3C Web组件自定义元素.
* [davidjamesstone/hyperviews](https://github.com/davidjamesstone/hyperviews) -产生`h`输出的模板语言.
* [picostyle/picostyle](https://github.com/picostyle/picostyle) -0.3 KB CSS-in-JS库，可用于Hyperapp和Picodom.
* [shershen08/single-spa-hyperapp](https://github.com/shershen08/single-spa-hyperapp) -在单spa应用程序中使用Hyperapp的包装
* [elisherer/hyperapp-forms](https://github.com/elisherer/hyperapp-forms) -表单状态管理库（类似于redux-form）
* [johnkazer/hyperapp-pug](https://github.com/johnkazer/hyperapp-pug) -Hyperapp的包装器，使您可以使用Pug模板而不是JSX或hyperscript.

## Testing V1

* [bahmutov/cypress-hyperapp-unit-test](https://github.com/bahmutov/cypress-hyperapp-unit-test) -用于对Hyperapp组件进行单元测试的小型实用程序 [Cypress](https://github.com/cypress-io/cypress) 端到端的测试运行程序.

## Other V1

* [Deployable](https://github.com/lukejacksonn/deployable) -使用Hyperapp构建的随时可部署的静态Web应用程序模板.
* [Linkcast](https://github.com/ajaxtown/linkcast) -使用Hyperapp构建的Chrome扩展程序，可共享组中的链接并利用离线功能进行社交.
