Hyperapp

The tiny framework for building hypertext applications.

  • 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.
  • 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.
  • Smaller than a favicon—1 kB, give or take. Hyperapp is an ultra-lightweight Virtual DOM, highly-optimized diff algorithm, and state management library obsessed with minimalism.

Here's the first example to get you started. Try it here—no build step required!

<script type="module">
  import { h, text, app } from "https://unpkg.com/hyperapp"

  const AddTodo = (state) => ({
    ...state,
    value: "",
    todos: state.todos.concat(state.value),
  })

  const NewValue = (state, event) => ({
    ...state,
    value: event.target.value,
  })

  app({
    init: { todos: [], value: "" },
    view: ({ todos, value }) =>
      h("main", {}, [
        h("h1", {}, text("To do list")),
        h("input", { type: "text", oninput: NewValue, value }),
        h("ul", {},
          todos.map((todo) => h("li", {}, text(todo)))
        ),
        h("button", { onclick: AddTodo }, text("New!")),
      ]),
    node: document.getElementById("app"),
  })
</script>

<main id="app"></main>

Check out more examples

The 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.

When 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.

Installation

npm install hyperapp

Documentation

Learn the basics in the Tutorial, check out the Examples, or visit the Reference.

Packages

Official packages provide access to Web Platform APIs in a way that makes sense for Hyperapp. For third-party packages and real-world examples, browse the Hyperawesome collection.

Package Status About
@hyperapp/dom npm Inspect the DOM, focus and blur.
@hyperapp/svg npm Draw SVG with plain functions.
@hyperapp/html npm Write HTML with plain functions.
@hyperapp/time npm Subscribe to intervals, get the time now.
@hyperapp/events npm Subscribe to mouse, keyboard, window, and frame events.
@hyperapp/http npm Talk to servers, make HTTP requests (#1027).
@hyperapp/random npm Declarative random numbers and values.
@hyperapp/navigation npm Subscribe and manage the browser URL history.

Need to create your own effects and subscriptions? You can do that too.

Help, I'm stuck!

If you've hit a stumbling block, hop on our Discord server to get help, and if you remain stuck, please file an issue, and we'll help you figure it out.

Contributing

Hyperapp is free and open-source software. If you want to support Hyperapp, becoming a contributor or sponsoring is the best way to give back. Thank you to everyone who already contributed to Hyperapp! <3

License

MIT

jorgebucaran/hyperapp

{
"props": {
"initialPayload": {
"allShortcutsEnabled": false,
"path": "/",
"repo": {
"id": 79527893,
"defaultBranch": "main",
"name": "hyperapp",
"ownerLogin": "jorgebucaran",
"currentUserCanPush": false,
"isFork": false,
"isEmpty": false,
"createdAt": "2017-01-20T05:20:21.000Z",
"ownerAvatar": "https://avatars.githubusercontent.com/u/56996?v=4",
"public": true,
"private": false,
"isOrgOwned": false
},
"currentUser": null,
"refInfo": {
"name": "main",
"listCacheKey": "v0:1705215551.0",
"canEdit": false,
"refType": "branch",
"currentOid": "c3717e3ff78b6fa8663575d34d330d68929a0974"
},
"tree": {
"items": [
{
"name": ".github/workflows",
"path": ".github/workflows",
"contentType": "directory",
"hasSimplifiedPath": true
},
{
"name": "docs",
"path": "docs",
"contentType": "directory"
},
{
"name": "packages",
"path": "packages",
"contentType": "directory"
},
{
"name": "tests",
"path": "tests",
"contentType": "directory"
},
{
"name": ".gitignore",
"path": ".gitignore",
"contentType": "file"
},
{
"name": "LICENSE.md",
"path": "LICENSE.md",
"contentType": "file"
},
{
"name": "README.md",
"path": "README.md",
"contentType": "file"
},
{
"name": "index.d.ts",
"path": "index.d.ts",
"contentType": "file"
},
{
"name": "index.js",
"path": "index.js",
"contentType": "file"
},
{
"name": "package.json",
"path": "package.json",
"contentType": "file"
}
],
"templateDirectorySuggestionUrl": null,
"readme": null,
"totalCount": 10,
"showBranchInfobar": false
},
"fileTree": null,
"fileTreeProcessingTime": null,
"foldersToFetch": [],
"treeExpanded": false,
"symbolsExpanded": false,
"isOverview": true,
"overview": {
"banners": {
"shouldRecommendReadme": false,
"isPersonalRepo": false,
"showUseActionBanner": false,
"actionSlug": null,
"actionId": null,
"showProtectBranchBanner": false,
"recentlyTouchedDataChannel": null,
"publishBannersInfo": {
"dismissActionNoticePath": "/settings/dismiss-notice/publish_action_from_repo",
"releasePath": "/jorgebucaran/hyperapp/releases/new?marketplace=true",
"showPublishActionBanner": false
},
"interactionLimitBanner": null,
"showInvitationBanner": false,
"inviterName": null
},
"codeButton": {
"contactPath": "/contact",
"isEnterprise": false,
"local": {
"protocolInfo": {
"httpAvailable": true,
"sshAvailable": null,
"httpUrl": "https://github.com/jorgebucaran/hyperapp.git",
"showCloneWarning": null,
"sshUrl": null,
"sshCertificatesRequired": null,
"sshCertificatesAvailable": null,
"ghCliUrl": "gh repo clone jorgebucaran/hyperapp",
"defaultProtocol": "http",
"newSshKeyUrl": "/settings/ssh/new",
"setProtocolPath": "/users/set_protocol"
},
"platformInfo": {
"cloneUrl": "https://desktop.github.com",
"showVisualStudioCloneButton": false,
"visualStudioCloneUrl": "https://windows.github.com",
"showXcodeCloneButton": false,
"xcodeCloneUrl": "https://developer.apple.com",
"zipballUrl": "/jorgebucaran/hyperapp/archive/refs/heads/main.zip"
}
},
"newCodespacePath": "/codespaces/new?hide_repo_select=true&repo=79527893"
},
"popovers": {
"rename": null,
"renamedParentRepo": null
},
"commitCount": "1,395",
"overviewFiles": [
{
"displayName": "README.md",
"repoName": "hyperapp",
"refName": "main",
"path": "README.md",
"preferredFileType": "readme",
"tabName": "README",
"richText": "<article class=\"markdown-body entry-content container-lg\" itemprop=\"text\"><h1 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-hyperapp\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#hyperapp\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Hyperapp</h1>\n<blockquote>\n<p dir=\"auto\">The tiny framework for building hypertext applications.</p>\n</blockquote>\n<ul dir=\"auto\">\n<li><strong>Do more with less</strong>—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.</li>\n<li><strong>Write what, not how</strong>—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.</li>\n<li><strong>Smaller than a favicon</strong>—1 kB, give or take. Hyperapp is an ultra-lightweight Virtual DOM, <a href=\"https://javascript.plainenglish.io/javascript-frameworks-performance-comparison-2020-cd881ac21fce\" rel=\"nofollow\">highly-optimized diff algorithm</a>, and state management library obsessed with minimalism.</li>\n</ul>\n<p dir=\"auto\">Here's the first example to get you started. <a href=\"https://codepen.io/jorgebucaran/pen/zNxZLP?editors=1000\" rel=\"nofollow\">Try it here</a>—no build step required!</p>\n\n<div class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"&lt;script type=&quot;module&quot;&gt;\n import { h, text, app } from &quot;https://unpkg.com/hyperapp&quot;\n\n const AddTodo = (state) =&gt; ({\n ...state,\n value: &quot;&quot;,\n todos: state.todos.concat(state.value),\n })\n\n const NewValue = (state, event) =&gt; ({\n ...state,\n value: event.target.value,\n })\n\n app({\n init: { todos: [], value: &quot;&quot; },\n view: ({ todos, value }) =&gt;\n h(&quot;main&quot;, {}, [\n h(&quot;h1&quot;, {}, text(&quot;To do list&quot;)),\n h(&quot;input&quot;, { type: &quot;text&quot;, oninput: NewValue, value }),\n h(&quot;ul&quot;, {},\n todos.map((todo) =&gt; h(&quot;li&quot;, {}, text(todo)))\n ),\n h(&quot;button&quot;, { onclick: AddTodo }, text(&quot;New!&quot;)),\n ]),\n node: document.getElementById(&quot;app&quot;),\n })\n&lt;/script&gt;\n\n&lt;main id=&quot;app&quot;&gt;&lt;/main&gt;\"><pre><span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">script</span> <span class=\"pl-c1\">type</span>=\"<span class=\"pl-s\">module</span>\"<span class=\"pl-kos\">&gt;</span>\n <span class=\"pl-k\">import</span> <span class=\"pl-kos\">{</span> <span class=\"pl-s1\">h</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">text</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">app</span> <span class=\"pl-kos\">}</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">\"https://unpkg.com/hyperapp\"</span>\n\n <span class=\"pl-k\">const</span> <span class=\"pl-v\">AddTodo</span> <span class=\"pl-c1\">=</span> <span class=\"pl-kos\">(</span><span class=\"pl-s1\">state</span><span class=\"pl-kos\">)</span> <span class=\"pl-c1\">=&gt;</span> <span class=\"pl-kos\">(</span><span class=\"pl-kos\">{</span>\n ...<span class=\"pl-s1\">state</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-c1\">value</span>: <span class=\"pl-s\">\"\"</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-c1\">todos</span>: <span class=\"pl-s1\">state</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">todos</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">concat</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">state</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">value</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span>\n\n <span class=\"pl-k\">const</span> <span class=\"pl-v\">NewValue</span> <span class=\"pl-c1\">=</span> <span class=\"pl-kos\">(</span><span class=\"pl-s1\">state</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">event</span><span class=\"pl-kos\">)</span> <span class=\"pl-c1\">=&gt;</span> <span class=\"pl-kos\">(</span><span class=\"pl-kos\">{</span>\n ...<span class=\"pl-s1\">state</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-c1\">value</span>: <span class=\"pl-s1\">event</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">target</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">value</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span>\n\n <span class=\"pl-en\">app</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">init</span>: <span class=\"pl-kos\">{</span> <span class=\"pl-c1\">todos</span>: <span class=\"pl-kos\">[</span><span class=\"pl-kos\">]</span><span class=\"pl-kos\">,</span> <span class=\"pl-c1\">value</span>: <span class=\"pl-s\">\"\"</span> <span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-en\">view</span>: <span class=\"pl-kos\">(</span><span class=\"pl-kos\">{</span> todos<span class=\"pl-kos\">,</span> value <span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span> <span class=\"pl-c1\">=&gt;</span>\n <span class=\"pl-en\">h</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">\"main\"</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">{</span><span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">[</span>\n <span class=\"pl-en\">h</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">\"h1\"</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">{</span><span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span> <span class=\"pl-en\">text</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">\"To do list\"</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-en\">h</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">\"input\"</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">{</span> <span class=\"pl-c1\">type</span>: <span class=\"pl-s\">\"text\"</span><span class=\"pl-kos\">,</span> <span class=\"pl-c1\">oninput</span>: <span class=\"pl-v\">NewValue</span><span class=\"pl-kos\">,</span> value <span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-en\">h</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">\"ul\"</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">{</span><span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-s1\">todos</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">map</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">todo</span><span class=\"pl-kos\">)</span> <span class=\"pl-c1\">=&gt;</span> <span class=\"pl-en\">h</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">\"li\"</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">{</span><span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span> <span class=\"pl-en\">text</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">todo</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">)</span>\n <span class=\"pl-kos\">)</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-en\">h</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">\"button\"</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">{</span> <span class=\"pl-c1\">onclick</span>: <span class=\"pl-v\">AddTodo</span> <span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span> <span class=\"pl-en\">text</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">\"New!\"</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-kos\">]</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-c1\">node</span>: <span class=\"pl-smi\">document</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">getElementById</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">\"app\"</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span>\n<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">script</span><span class=\"pl-kos\">&gt;</span>\n\n<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">main</span> <span class=\"pl-c1\">id</span>=\"<span class=\"pl-s\">app</span>\"<span class=\"pl-kos\">&gt;</span><span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">main</span><span class=\"pl-kos\">&gt;</span></pre></div>\n<p dir=\"auto\"><a href=\"https://codepen.io/collection/nLLvrz?grid_type=grid\" rel=\"nofollow\">Check out more examples</a></p>\n<p dir=\"auto\">The 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.</p>\n<p dir=\"auto\">When describing how a page looks in Hyperapp, we don't write markup. Instead, we use <code>h()</code> and <code>text()</code> to create a lightweight representation of the DOM (or virtual DOM for short), and Hyperapp takes care of updating the real DOM efficiently.</p>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-installation\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#installation\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Installation</h2>\n<div class=\"highlight highlight-text-shell-session notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"npm install hyperapp\"><pre><span class=\"pl-c1\">npm install hyperapp</span></pre></div>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-documentation\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#documentation\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Documentation</h2>\n<p dir=\"auto\">Learn the basics in the <a href=\"/jorgebucaran/hyperapp/blob/main/docs/tutorial.md\">Tutorial</a>, check out the <a href=\"https://codepen.io/collection/nLLvrz?grid_type=grid\" rel=\"nofollow\">Examples</a>, or visit the <a href=\"/jorgebucaran/hyperapp/blob/main/docs/reference.md\">Reference</a>.</p>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-packages\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#packages\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Packages</h2>\n<p dir=\"auto\">Official packages provide access to <a href=\"https://platform.html5.org\" rel=\"nofollow\">Web Platform</a> APIs in a way that makes sense for Hyperapp. For third-party packages and real-world examples, browse the <a href=\"https://github.com/jorgebucaran/hyperawesome\">Hyperawesome</a> collection.</p>\n<table>\n<thead>\n<tr>\n<th>Package</th>\n<th>Status</th>\n<th>About</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><a href=\"/jorgebucaran/hyperapp/blob/main/packages/dom\"><code>@hyperapp/dom</code></a></td>\n<td><a href=\"https://www.npmjs.com/package/@hyperapp/dom\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/8b78cda35e499909483437349ab93ef5315e2477f843e6e7ad7970ea043c3671/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f4068797065726170702f646f6d2e7376673f7374796c653d666f722d7468652d626164676526636f6c6f723d303336366436266c6162656c3d\" alt=\"npm\" data-canonical-src=\"https://img.shields.io/npm/v/@hyperapp/dom.svg?style=for-the-badge&amp;color=0366d6&amp;label=\" style=\"max-width: 100%;\"></a></td>\n<td>Inspect the DOM, focus and blur.</td>\n</tr>\n<tr>\n<td><a href=\"/jorgebucaran/hyperapp/blob/main/packages/svg\"><code>@hyperapp/svg</code></a></td>\n<td><a href=\"https://www.npmjs.com/package/@hyperapp/svg\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/d3b4a7ccd2856c1110290718cbd71e33d631aab2ebe2ede1805c557e4b3d9c42/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f4068797065726170702f7376672e7376673f7374796c653d666f722d7468652d626164676526636f6c6f723d303336366436266c6162656c3d\" alt=\"npm\" data-canonical-src=\"https://img.shields.io/npm/v/@hyperapp/svg.svg?style=for-the-badge&amp;color=0366d6&amp;label=\" style=\"max-width: 100%;\"></a></td>\n<td>Draw SVG with plain functions.</td>\n</tr>\n<tr>\n<td><a href=\"/jorgebucaran/hyperapp/blob/main/packages/html\"><code>@hyperapp/html</code></a></td>\n<td><a href=\"https://www.npmjs.com/package/@hyperapp/html\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/57dd1bcbc73fa2a63c017a54f292c7d3246632b470b61ea57d0c1728ec12b850/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f4068797065726170702f68746d6c2e7376673f7374796c653d666f722d7468652d626164676526636f6c6f723d303336366436266c6162656c3d\" alt=\"npm\" data-canonical-src=\"https://img.shields.io/npm/v/@hyperapp/html.svg?style=for-the-badge&amp;color=0366d6&amp;label=\" style=\"max-width: 100%;\"></a></td>\n<td>Write HTML with plain functions.</td>\n</tr>\n<tr>\n<td><a href=\"/jorgebucaran/hyperapp/blob/main/packages/time\"><code>@hyperapp/time</code></a></td>\n<td><a href=\"https://www.npmjs.com/package/@hyperapp/time\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/55a057dcc3e0707ff92acb94ad1bb0f2c8310429300aaf27b96fd96b4d729a94/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f4068797065726170702f74696d652e7376673f7374796c653d666f722d7468652d626164676526636f6c6f723d303336366436266c6162656c3d\" alt=\"npm\" data-canonical-src=\"https://img.shields.io/npm/v/@hyperapp/time.svg?style=for-the-badge&amp;color=0366d6&amp;label=\" style=\"max-width: 100%;\"></a></td>\n<td>Subscribe to intervals, get the time now.</td>\n</tr>\n<tr>\n<td><a href=\"/jorgebucaran/hyperapp/blob/main/packages/events\"><code>@hyperapp/events</code></a></td>\n<td><a href=\"https://www.npmjs.com/package/@hyperapp/events\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/692b718067442303aabbc21608e489692387e1697af2842f7844b955f2186aae/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f4068797065726170702f6576656e74732e7376673f7374796c653d666f722d7468652d626164676526636f6c6f723d303336366436266c6162656c3d\" alt=\"npm\" data-canonical-src=\"https://img.shields.io/npm/v/@hyperapp/events.svg?style=for-the-badge&amp;color=0366d6&amp;label=\" style=\"max-width: 100%;\"></a></td>\n<td>Subscribe to mouse, keyboard, window, and frame events.</td>\n</tr>\n<tr>\n<td><a href=\"/jorgebucaran/hyperapp/blob/main/packages/http\"><code>@hyperapp/http</code></a></td>\n<td><a href=\"https://www.npmjs.com/package/@hyperapp/http\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/068b06bde5364cb518cd590cec782ef193f7c5ea6cf81f8bad33fb678f5dd0d2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d706c616e6e65642d3661373337643f7374796c653d666f722d7468652d6261646765266c6162656c3d\" alt=\"npm\" data-canonical-src=\"https://img.shields.io/badge/-planned-6a737d?style=for-the-badge&amp;label=\" style=\"max-width: 100%;\"></a></td>\n<td>Talk to servers, make HTTP requests (<a href=\"https://github.com/jorgebucaran/hyperapp/discussions/1027\" data-hovercard-type=\"discussion\" data-hovercard-url=\"/jorgebucaran/hyperapp/discussions/1027/hovercard\">#1027</a>).</td>\n</tr>\n<tr>\n<td><a href=\"/jorgebucaran/hyperapp/blob/main/packages/random\"><code>@hyperapp/random</code></a></td>\n<td><a href=\"https://www.npmjs.com/package/@hyperapp/random\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/068b06bde5364cb518cd590cec782ef193f7c5ea6cf81f8bad33fb678f5dd0d2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d706c616e6e65642d3661373337643f7374796c653d666f722d7468652d6261646765266c6162656c3d\" alt=\"npm\" data-canonical-src=\"https://img.shields.io/badge/-planned-6a737d?style=for-the-badge&amp;label=\" style=\"max-width: 100%;\"></a></td>\n<td>Declarative random numbers and values.</td>\n</tr>\n<tr>\n<td><a href=\"/jorgebucaran/hyperapp/blob/main/packages/navigation\"><code>@hyperapp/navigation</code></a></td>\n<td><a href=\"https://www.npmjs.com/package/@hyperapp/navigation\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/068b06bde5364cb518cd590cec782ef193f7c5ea6cf81f8bad33fb678f5dd0d2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d706c616e6e65642d3661373337643f7374796c653d666f722d7468652d6261646765266c6162656c3d\" alt=\"npm\" data-canonical-src=\"https://img.shields.io/badge/-planned-6a737d?style=for-the-badge&amp;label=\" style=\"max-width: 100%;\"></a></td>\n<td>Subscribe and manage the browser URL history.</td>\n</tr>\n</tbody>\n</table>\n<blockquote>\n<p dir=\"auto\">Need to create your own effects and subscriptions? <a href=\"/jorgebucaran/hyperapp/blob/main/docs/reference.md\">You can do that too</a>.</p>\n</blockquote>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-help-im-stuck\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#help-im-stuck\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Help, I'm stuck!</h2>\n<p dir=\"auto\">If you've hit a stumbling block, hop on our <a href=\"https://discord.gg/eFvZXzXF9U\" rel=\"nofollow\">Discord</a> server to get help, and if you remain stuck, <a href=\"https://github.com/jorgebucaran/hyperapp/issues/new\">please file an issue</a>, and we'll help you figure it out.</p>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-contributing\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#contributing\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Contributing</h2>\n<p dir=\"auto\">Hyperapp is free and open-source software. If you want to support Hyperapp, becoming a contributor or <a href=\"https://github.com/sponsors/jorgebucaran\">sponsoring</a> is the best way to give back. Thank you to everyone who already contributed to Hyperapp! &lt;3</p>\n<p dir=\"auto\"><a href=\"https://github.com/jorgebucaran/hyperapp/graphs/contributors\"><img src=\"https://camo.githubusercontent.com/1d73d7b88058ea02ab71126912c1107414f91f8569721a368b018e05b85bc79f/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f68797065726170702f636f6e7472696275746f72732e7376673f77696474683d3130323426627574746f6e3d66616c7365\" alt=\"\" data-canonical-src=\"https://opencollective.com/hyperapp/contributors.svg?width=1024&amp;button=false\" style=\"max-width: 100%;\"></a></p>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-license\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#license\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>License</h2>\n<p dir=\"auto\"><a href=\"/jorgebucaran/hyperapp/blob/main/LICENSE.md\">MIT</a></p>\n</article>",
"loaded": true,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": [
{
"level": 1,
"text": "Hyperapp",
"anchor": "hyperapp",
"htmlText": "Hyperapp"
},
{
"level": 2,
"text": "Installation",
"anchor": "installation",
"htmlText": "Installation"
},
{
"level": 2,
"text": "Documentation",
"anchor": "documentation",
"htmlText": "Documentation"
},
{
"level": 2,
"text": "Packages",
"anchor": "packages",
"htmlText": "Packages"
},
{
"level": 2,
"text": "Help, I'm stuck!",
"anchor": "help-im-stuck",
"htmlText": "Help, I'm stuck!"
},
{
"level": 2,
"text": "Contributing",
"anchor": "contributing",
"htmlText": "Contributing"
},
{
"level": 2,
"text": "License",
"anchor": "license",
"htmlText": "License"
}
],
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Fjorgebucaran%2Fhyperapp"
}
},
{
"displayName": "LICENSE.md",
"repoName": "hyperapp",
"refName": "main",
"path": "LICENSE.md",
"preferredFileType": "license",
"tabName": "MIT",
"richText": null,
"loaded": false,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": null,
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Fjorgebucaran%2Fhyperapp"
}
}
],
"overviewFilesProcessingTime": 89.259829
}
},
"appPayload": {
"helpUrl": "https://docs.github.com",
"findFileWorkerPath": "/assets-cdn/worker/find-file-worker-32bb159cc57c.js",
"findInFileWorkerPath": "/assets-cdn/worker/find-in-file-worker-c6704d501c10.js",
"githubDevUrl": null,
"enabled_features": {
"code_nav_ui_events": false,
"copilot_conversational_ux": false,
"copilot_conversational_ux_embedding_update": false,
"copilot_popover_file_editor_header": false,
"copilot_smell_icebreaker_ux": true,
"copilot_workspace": false,
"codeview_firefox_inert": true
}
}
}
}
{
"accept-ranges": "bytes",
"cache-control": "max-age=0, private, must-revalidate",
"content-encoding": "gzip",
"content-security-policy": "default-src 'none'; base-uri 'self'; child-src github.com/assets-cdn/worker/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com api.githubcopilot.com objects-origin.githubusercontent.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.com/assets-cdn/worker/ gist.github.com/assets-cdn/worker/",
"content-type": "text/html; charset=utf-8",
"date": "Mon, 26 Feb 2024 12:05:03 GMT",
"etag": "849e1325065bafb3e5dc248e3011e40d",
"referrer-policy": "no-referrer-when-downgrade",
"server": "GitHub.com",
"set-cookie": "logged_in=no; Path=/; Domain=github.com; Expires=Wed, 26 Feb 2025 12:05:02 GMT; HttpOnly; Secure; SameSite=Lax",
"strict-transport-security": "max-age=31536000; includeSubdomains; preload",
"transfer-encoding": "chunked",
"vary": "X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, Accept-Encoding, Accept, X-Requested-With",
"x-content-type-options": "nosniff",
"x-frame-options": "deny",
"x-github-request-id": "C386:21134C:1D56E80:29ECAB8:65DC7E6E",
"x-xss-protection": "0"
}