{"id":13432804,"url":"https://github.com/WebReflection/hyperHTML","last_synced_at":"2025-03-17T10:32:37.714Z","repository":{"id":40556779,"uuid":"83887745","full_name":"WebReflection/hyperHTML","owner":"WebReflection","description":"A Fast \u0026 Light Virtual DOM Alternative","archived":false,"fork":false,"pushed_at":"2023-08-04T08:50:37.000Z","size":4807,"stargazers_count":3074,"open_issues_count":11,"forks_count":113,"subscribers_count":80,"default_branch":"master","last_synced_at":"2025-03-12T08:12:13.161Z","etag":null,"topics":["alternative","dom","js","lightweight","manipulation","performance","template","template-literals","vanilla","virtualdom"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebReflection.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":null,"patreon":null,"open_collective":"hyperHTML","ko_fi":null,"tidelift":null,"custom":"https://www.patreon.com/webreflection"}},"created_at":"2017-03-04T11:12:27.000Z","updated_at":"2025-03-01T08:11:59.000Z","dependencies_parsed_at":"2024-01-06T02:57:09.787Z","dependency_job_id":"69d6833e-773b-4c37-a00c-411c02f596bd","html_url":"https://github.com/WebReflection/hyperHTML","commit_stats":{"total_commits":814,"total_committers":32,"mean_commits":25.4375,"dds":0.3218673218673219,"last_synced_commit":"a78549e995e77146ae8a7b3e3c80525eb8ac02e2"},"previous_names":[],"tags_count":237,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2FhyperHTML","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2FhyperHTML/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2FhyperHTML/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2FhyperHTML/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebReflection","download_url":"https://codeload.github.com/WebReflection/hyperHTML/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244016839,"owners_count":20384219,"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":["alternative","dom","js","lightweight","manipulation","performance","template","template-literals","vanilla","virtualdom"],"created_at":"2024-07-31T02:01:16.833Z","updated_at":"2025-03-17T10:32:37.296Z","avatar_url":"https://github.com/WebReflection.png","language":"HTML","readme":"# hyper(HTML)\n\n### Maintainance Only\n\nThis module is great, works great, and served me greatly, but there's a pletora of modern, faster, more capable alternatives me, among many other OSS developers, offer so that if obvious bugs are proven to exist, these will be fixed, but there won't be a major release and I won't remove legacy support for stuff that, as previously mentioned, works just fine and it's battle-tested from IE to the latest Chrome.\n\nRemoving that legacy support brings pretty much nothing in terms of size too: this module is already smaller than 90% of alternatives out there, dropping 0.xK so that there's less code that, behind feature detection, is not even used in modern browsers, won't benefit anyone.\n\nThansk for your understanding and for not opening PRs which goal is to drop a check for legacy browsers ... these won't likely be merged ever as that'd be a major release update and I don't think anyone is interested in that.\n\n### 📣 Community Announcement\n\nPlease ask questions in the [dedicated discussions repository](https://github.com/WebReflection/discussions), to help the community around this project grow ♥\n\n- - -\n\n\u003cimg alt=\"hyperHTML logo\" src=\"https://webreflection.github.io/hyperHTML/logo/hyperhtml.svg\" width=\"116\" height=\"81\"\u003e\n\nA **Fast \u0026 Light Virtual DOM Alternative**.\n\n- - -\n\n[![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000\u0026style=flat)](https://github.com/WebReflection/donate) [![Backers on Open Collective](https://opencollective.com/hyperhtml/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/hyperhtml/sponsors/badge.svg)](#sponsors) ![WebReflection status](https://offline.report/status/webreflection.svg)\n\n[![Coverage Status](https://coveralls.io/repos/github/WebReflection/hyperHTML/badge.svg?branch=master)](https://coveralls.io/github/WebReflection/hyperHTML?branch=master)\n[![Build Status](https://travis-ci.org/WebReflection/hyperHTML.svg?branch=master)](https://travis-ci.org/WebReflection/hyperHTML)\n[![License: ISC](https://img.shields.io/badge/License-ISC-yellow.svg)](https://opensource.org/licenses/ISC)\n[![Greenkeeper badge](https://badges.greenkeeper.io/WebReflection/hyperHTML.svg)](https://greenkeeper.io/) ![Blazing Fast](https://img.shields.io/badge/speed-blazing%20🔥-brightgreen.svg)\n\n- - -\n\nFollowing an overview of projects related, or inspired by, _hyperHTML_. For a deep comparison of current libraries, feel free to [check this gist out](https://gist.github.com/WebReflection/761052d6dae7c8207d2fcba7cdede295).\n\n\n## \u003cem\u003eµ\u003c/em\u003ehtml\n\nThe latest, smallest, iteration of all best concept from this library since 2017, have been packaged in _~2.5K_. If it's extreme minimalism and great _DX_ that you are after, check [uhtml](https://github.com/WebReflection/uhtml#readme) out.\n\n\n## hypersimple\n\nIf you've just started with template literals based projects and you like components, or you'd like to understand what's _hyperHTML_ capable of, give [hypersimple](https://github.com/WebReflection/hypersimple#readme) a try 🎉\n\n\n## lighterhtml 💡\n\nThis little brother is \"_showing off_\" these days, claiming better performance and unprecedented ease of use.\n\n[GitHub Repository](https://github.com/WebReflection/lighterhtml)\n\n\n## Neverland 🌈🦄\n\nIf you like React hooks concept, don't miss this little wrap that adds 0._something_ overhead to the already lightweight hyperHTML, bringing in very similar concepts.\n\n[Blog Post](https://medium.com/@WebReflection/neverland-the-hyperhtmls-hook-a0c3e11324bb)\n\n[GitHub Repository](https://github.com/WebReflection/neverland)\n\n## Haunted 🦇 🎃\n\nIf you also like React hooks mechanism and you'd like to combine these via hyperHTML or [HyperHTMLElement](https://github.com/WebReflection/hyperHTML-Element), try [haunted](https://github.com/matthewp/haunted#haunted--) out!\n\n\n## Bundlers\n\nYou can require or import _hyperHTML_ with any bundler and in different ways.\n\nIf requiring or importing from `\"hyperhtml\"` doesn't work, try requiring from `\"hyperhtml/cjs\"` for CommonJS friendly bundlers (WebPack), or `\"hyperhtml/esm\"` for ESM compatible bundlers (Rollup).\n\nSee [HELPERS.md](./HELPERS.md) for a list of additional tools which can be helpful for building hyperHTML based web applications.\n\n- - -\n\n## Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/hyperhtml#sponsor)]\n\n\u003ca href=\"https://opencollective.com/hyperhtml/sponsor/0/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/hyperhtml/sponsor/0/avatar.svg\"\u003e\u003c/a\u003e\n\n## Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/hyperhtml#backer)]\n\n\u003ca href=\"https://opencollective.com/hyperhtml#backers\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/hyperhtml/backers.svg?width=890\"\u003e\u003c/a\u003e\n\n## Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\u003ca href=\"https://github.com/WebReflection/hyperHTML/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/hyperhtml/contributors.svg?width=890\" /\u003e\u003c/a\u003e\n\n- - -\n\n### 2.34 Highlights\n\n  * the new `?boolean=${value}` syntax from [µhtml](https://github.com/WebReflection/uhtml#readme) has landed in *hyperHTML* too. Feel free to [read this long discussion](https://github.com/WebReflection/discussions/discussions/13) to better understand *why* this syntax is necessary.\n\n### V2.5 Highlights\n\n  * `\u003cself-closing /\u003e` tags for both custom elements and any other as well 🎉\n\n### V2 Highlights\n\nFollowing most important changes in version 2:\n\n  * fully rewritten, and [consumable](https://unpkg.com/hyperhtml@latest/esm/index.js), as [ES2015 Module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)\n  * [usable via CDN](https://unpkg.com/hyperhtml@latest/min.js) as bundled global `hyperHTML` variable\n  * restructured in modules, utilities, helpers, and commented all over for simplified contribution\n  * **removed** `.escape` and `.adopt`, either useless or unstable. `hyperHTML.adopt` will be implemented as module a part\n  * **added** support for objects as `style` attribute, fully compatible with [Preact](https://github.com/developit/preact) implementation\n  * **improved** performance in numerous ways\n  * **custom elements** V0 and V1 are now fully, and properly, supported through `document.importNode` and/or regular `cloneNode` tested against common polyfills\n  * back to 4.6K thanks to **rollup** and its ability to merge all the things together like it was already in V1\n\n## Documentation\n\nA proper documentation full of examples can be found in [viperhtml.js.org](https://viperhtml.js.org/).\n\n\n## Basic Example\nThe easiest way to describe `hyperHTML` is through [an example](https://webreflection.github.io/hyperHTML/test/tick.html).\n```js\n// this is hyperHTML\nfunction tick(render) {\n  render`\n    \u003cdiv\u003e\n      \u003ch1\u003eHello, world!\u003c/h1\u003e\n      \u003ch2\u003eIt is ${new Date().toLocaleTimeString()}.\u003c/h2\u003e\n    \u003c/div\u003e\n  `;\n}\nsetInterval(tick, 1000,\n  hyperHTML(document.getElementById('root'))\n);\n```\n\n## Features\n\n  * Zero dependencies, no polyfills needed, and it fits in about **4.6KB** (minified + brotli)\n  * Uses directly native DOM, no virtual DOM involved\n  * Designed for [template literals](http://www.ecma-international.org/ecma-262/6.0/#sec-template-literals), a templating feature built in to JS\n  * Compatible with plain DOM elements and plain JS data structures\n  * Also compatible with Babel transpiled output, hence suitable for every browser you can think of\n\n## Compatibility\n\nIE9+ , iOS8+ , Android 4+ and every modern Mobile or Desktop Browser.\nYou can verify directly through the following links:\n\n  * [100% code coverage](https://webreflection.github.io/hyperHTML/test/) for browsers natively compatible with string literals\n  * [100% code coverage](https://webreflection.github.io/hyperHTML/test/ie/) for IE9+ and browsers that need transpiled code\n  \n#### Weakmap error on ie \u003c 11\n\n'@ungap/weakmap': object is not extensible\n\nBabel freezes the template literals by spec but that causes problems with the weakmap polyfill. To fix this error add the fix explained on [ungap/weakmap](https://github.com/ungap/weakmap#transpiled-code-and-frozen-objects-in-legacy-browsers)\n\n## HTML Syntax Highlight\n\nIf you are using Visual Studio Code you can install `literally-html` to highlight all literals handled by `hyperHTML` and others.\n\n![literally-html example](https://viperhtml.js.org/hyperhtml/documentation/img/literally-html.png)\n\n## Prettier Templates\n\nIf you'd like to make your templates prettier than usual, don't miss this plugin: https://github.com/sgtpep/prettier-plugin-html-template-literals\n\n## Questions ?\n\nPlease ask anything you'd like to know in [StackOverflow](https://stackoverflow.com) using the tag [`hyperhtml`](https://stackoverflow.com/questions/tagged/hyperhtml) so that others can benefit from answers and examples.\n\n#### hyper or lit ?\n\nYou can read more on this [hyperHTML vs lit-html](https://medium.com/@WebReflection/lit-html-vs-hyperhtml-vs-lighterhtml-c084abfe1285) comparison.\n\n#### installation?\n\n```js\nnpm install hyperhtml\n```\nIf your bundler does not work with the following:\n```js\n// ES6\nimport hyperHTML from 'hyperhtml';\n\n// CJS\nconst hyperHTML = require('hyperhtml');\n```\nYou can try any of these other options.\n```js\nimport hyperHTML from 'hyperhtml/esm';\n// or\nimport {hyper, wire, bind, Component} from 'hyperhtml/esm';\n// or\nimport hyperHTML from 'https://unpkg.com/hyperhtml?module';\n\n\nconst hyperHTML = require('hyperhtml/cjs').default;\n// or\nconst {hyper, wire, bind, Component} = require('hyperhtml/cjs');\n```\n\nIn alternative, there is a pre-bundled `require(\"hyperhtml/umd\")` or via unpkg as [UMD module](https://unpkg.com/hyperhtml@latest/umd.js).\n","funding_links":["https://opencollective.com/hyperHTML","https://www.patreon.com/webreflection","https://opencollective.com/hyperhtml"],"categories":["HTML","js","performance","Libraries"],"sub_categories":["HTML"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWebReflection%2FhyperHTML","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWebReflection%2FhyperHTML","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWebReflection%2FhyperHTML/lists"}