{"id":15314717,"url":"https://github.com/unframework/hyperscript","last_synced_at":"2025-10-09T00:32:48.115Z","repository":{"id":141683550,"uuid":"32438728","full_name":"unframework/hyperscript","owner":"unframework","description":"Create HyperText with JavaScript.","archived":false,"fork":true,"pushed_at":"2015-03-18T04:56:58.000Z","size":148,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-14T18:22:16.339Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"hyperhype/hyperscript","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unframework.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":"2015-03-18T04:55:16.000Z","updated_at":"2019-08-18T16:41:02.000Z","dependencies_parsed_at":"2023-03-12T20:11:13.298Z","dependency_job_id":null,"html_url":"https://github.com/unframework/hyperscript","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unframework%2Fhyperscript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unframework%2Fhyperscript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unframework%2Fhyperscript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unframework%2Fhyperscript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unframework","download_url":"https://codeload.github.com/unframework/hyperscript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219877247,"owners_count":16554912,"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":[],"created_at":"2024-10-01T08:46:47.711Z","updated_at":"2025-10-09T00:32:42.794Z","avatar_url":"https://github.com/unframework.png","language":"HTML","readme":"# HyperScript\n\nCreate HyperText with JavaScript, on client or server.\n\n[![testling badge](https://ci.testling.com/dominictarr/hyperscript.png)]\n  (https://ci.testling.com/dominictarr/hyperscript)\n\n[Interactive Demo](http://dominictarr.github.com/hyperscript)\n\nSee also [mercury](https://github.com/Raynos/mercury) is 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 intension 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 any more,\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 short cut\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`\nthats 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 uesful 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\n## Tools\n\n* [html2hscript](https://github.com/twilson63/html2hscript) - Parse HTML into hyperscript\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\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funframework%2Fhyperscript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funframework%2Fhyperscript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funframework%2Fhyperscript/lists"}