{"id":13451739,"url":"https://github.com/hyperhype/hyperscript","last_synced_at":"2025-12-12T04:13:04.533Z","repository":{"id":6621706,"uuid":"7865284","full_name":"hyperhype/hyperscript","owner":"hyperhype","description":"Create HyperText with JavaScript.","archived":false,"fork":false,"pushed_at":"2021-05-28T02:59:49.000Z","size":96,"stargazers_count":2673,"open_issues_count":43,"forks_count":112,"subscribers_count":44,"default_branch":"master","last_synced_at":"2025-05-10T04:04:22.271Z","etag":null,"topics":["hyperscript","templating"],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/hyperhype.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}},"created_at":"2013-01-28T07:41:25.000Z","updated_at":"2025-04-18T19:44:36.000Z","dependencies_parsed_at":"2022-07-12T01:47:30.539Z","dependency_job_id":null,"html_url":"https://github.com/hyperhype/hyperscript","commit_stats":null,"previous_names":["dominictarr/hyperscript"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperhype%2Fhyperscript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperhype%2Fhyperscript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperhype%2Fhyperscript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperhype%2Fhyperscript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyperhype","download_url":"https://codeload.github.com/hyperhype/hyperscript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253360733,"owners_count":21896376,"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":["hyperscript","templating"],"created_at":"2024-07-31T07:01:00.921Z","updated_at":"2025-12-12T04:13:04.505Z","avatar_url":"https://github.com/hyperhype.png","language":"HTML","readme":"# HyperScript\n\nCreate HyperText with JavaScript, on client or server.\n\n[![testling badge](https://ci.testling.com/hyperhype/hyperscript.png)](https://ci.testling.com/hyperhype/hyperscript)\n\n[Interactive Demo](http://hyperhype.github.io/hyperscript)\n\nSee also [mercury](https://github.com/Raynos/mercury), a modular ui\nframework influenced by hyperscript but much more heavily optimized.\n\n## Example\n\n``` js\nvar h = require('hyperscript')\nh('div#page',\n  h('div#header',\n    h('h1.classy', 'h', { style: {'background-color': '#22f'} })),\n  h('div#menu', { style: {'background-color': '#2f2'} },\n    h('ul',\n      h('li', 'one'),\n      h('li', 'two'),\n      h('li', 'three'))),\n    h('h2', 'content title',  { style: {'background-color': '#f22'} }),\n    h('p',\n      \"so it's just like a templating engine,\\n\",\n      \"but easy to use inline with javascript\\n\"),\n    h('p',\n      \"the intention is for this to be used to create\\n\",\n      \"reusable, interactive html widgets. \"))\n```\n\n## On the server\n\nYou can still use hyperscript on the server,\nthe limitation is that events don't make sense anymore,\nbut you can use it to generate html:\n\n``` js\nconsole.log(h('h1', 'hello!').outerHTML)\n=\u003e '\u003ch1\u003ehello!\u003c/h1\u003e'\n```\n\n## h (tag, attrs, [text?, Elements?,...])\n\nCreate an `HTMLElement`. The first argument must be the tag name, you may use a\nfully qualified tagname for building e.g. XML documents: `h('ns:tag')`.\n\n### classes \u0026 id\n\nIf the tag name is of form `name.class1.class2#id` that is a shortcut\nfor setting the class and id.\n\n### default tag name\n\nIf the tag name begins with a class or id, it defaults to a `\u003cdiv\u003e`.\n\n### Attributes\n\nIf an `{}` object is passed in it will be used to set attributes.\n\n``` js\nvar h = require('hyperscript')\nh('a', {href: 'https://npm.im/hyperscript'}, 'hyperscript')\n```\n\nNote that hyperscript sets properties on the DOM element object, not\nattributes on the HTML element. This makes for better consistency across\nbrowsers and a nicer API for booleans. There are some gotchas, however.\nAttributes such as `colspan` are camel cased to `colSpan`, and `for` on the\nlabel element is `htmlFor` to avoid collision with the language keyword. See the\n[DOM HTML specification](http://www.w3.org/TR/DOM-Level-2-HTML/html.html)\nfor details.\n\n### events\n\nIf an attribute is a function, then it will be registered as an event listener.\n\n``` js\nvar h = require('hyperscript')\nh('a', {href: '#',\n  onclick: function (e) {\n    alert('you are 1,000,000th visitor!')\n    e.preventDefault()\n  }\n}, 'click here to win a prize')\n```\n\n### styles\n\nIf an attribute has a style property, then that will be handled specially.\n\n``` js\nvar h = require('hyperscript')\nh('h1.fun', {style: {'font-family': 'Comic Sans MS'}}, 'Happy Birthday!')\n```\n\nor as a string\n\n``` js\nvar h = require('hyperscript')\nh('h1.fun', {style: 'font-family: Comic Sans MS'}, 'Happy Birthday!')\n```\n\nYou may pass in attributes in multiple positions, it's no problem!\n\n### children - string\n\nIf an argument is a string, a TextNode is created in that position.\n\n### children - HTMLElement\n\nIf a argument is a `Node` (or `HTMLElement`), for example, the return value of a call to `h`\nthat's cool, too.\n\n### children - null.\n\nThis is just ignored.\n\n### children - Array\n\nEach item in the array is treated like a ordinary child. (string or HTMLElement)\nthis is useful when you want to iterate over an object:\n\n``` js\nvar h = require('hyperscript')\nvar obj = {\n  a: 'Apple',\n  b: 'Banana',\n  c: 'Cherry',\n  d: 'Durian',\n  e: 'Elder Berry'\n}\nh('table',\n  h('tr', h('th', 'letter'), h('th', 'fruit')),\n  Object.keys(obj).map(function (k) {\n    return h('tr',\n      h('th', k),\n      h('td', obj[k])\n    )\n  })\n)\n```\n\n### Cleaning Up\n\nIf you need to clean up a widget created using hyperscript - deregistering all its event handlers and observable listeners, you can use `context()`.\n\n``` js\nvar h = require('hyperscript').context()\nvar o = require('observable')\nvar text = o()\ntext('click here to win a prize')\nh('a', {href: '#',\n  onclick: function (e) {\n    text('you are 1,000,000th visitor!')\n    e.preventDefault()\n  }\n}, text)\n\n// then if you want to remove this widget from the page\n// to cleanup\nh.cleanup()\n\n```\n## Ecosystem\n\n* [html2hscript](https://github.com/twilson63/html2hscript) - Parse HTML into hyperscript\n* [dom2hscript](https://github.com/AkeemMcLennon/dom2hscript) - Frontend library for parsing HTML into hyperscript using the browser's built in parser.\n* [html2hscript.herokuapp.com](http://html2hscript.herokuapp.com/) - Online Tool that converts html snippets to hyperscript\n* [html2hyperscript](https://github.com/unframework/html2hyperscript) - Original commandline utility to convert legacy HTML markup into hyperscript\n* [hyperscript-helpers](https://github.com/ohanhi/hyperscript-helpers) - write `div(h1('hello'))` instead of `h('div', h('h1', 'hello'))`\n* [react-hyperscript](https://github.com/mlmorg/react-hyperscript) - use hyperscript with React.\n* [hyperaxe](https://github.com/ungoldman/hyperaxe) - an enchanted hyperscript weapon.\n\n## License\n\nMIT\n","funding_links":[],"categories":["HTML","Element Creation"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperhype%2Fhyperscript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyperhype%2Fhyperscript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperhype%2Fhyperscript/lists"}