{"id":27373982,"url":"https://github.com/arccoza/hyperscript-html","last_synced_at":"2025-07-27T19:09:26.966Z","repository":{"id":41461662,"uuid":"100128782","full_name":"arccoza/hyperscript-html","owner":"arccoza","description":"A fast, simple, hyperscript implementation for generating HTML.","archived":false,"fork":false,"pushed_at":"2022-03-23T23:52:43.000Z","size":137,"stargazers_count":9,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T01:50:39.405Z","etag":null,"topics":["fast","generator","html","html5","hyperscript","lightweight","micro","simple","small","terse","tiny"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/arccoza.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":"2017-08-12T17:52:46.000Z","updated_at":"2024-11-09T13:17:10.000Z","dependencies_parsed_at":"2022-09-09T03:41:05.997Z","dependency_job_id":null,"html_url":"https://github.com/arccoza/hyperscript-html","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arccoza%2Fhyperscript-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arccoza%2Fhyperscript-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arccoza%2Fhyperscript-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arccoza%2Fhyperscript-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arccoza","download_url":"https://codeload.github.com/arccoza/hyperscript-html/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248707615,"owners_count":21148921,"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":["fast","generator","html","html5","hyperscript","lightweight","micro","simple","small","terse","tiny"],"created_at":"2025-04-13T11:36:08.112Z","updated_at":"2025-04-13T11:36:08.738Z","avatar_url":"https://github.com/arccoza.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[travis]:       https://travis-ci.org/arccoza/hyperscript-html\n[travis-img]:   https://travis-ci.org/arccoza/hyperscript-html.svg\n\n# hyperscript-html [![Travis Build Status][travis-img]][travis]\nHyperscript-html provides a simple, fast, and lightweight hyperscript function to generate HTML.\n\n## Example\n\n### Input\n```js\nvar {HyperScript, wrap} = require('hyperscript-html')\n// import {HyperScript, wrap} from 'hyperscript-html'  // If you're using es modules.\n\nvar h = HyperScript()\n\nvar html = \nh('div#id.cls.cls2[attr1=val1][style=background-color:#ff0000; position:relative]',\n  h('h1', {class: ['title']}, 'The Title'),\n  h('p.content', 'The content'),\n)\n```\n\n### Input with wrapped elements\n```js\nvar {HyperScript, wrap} = require('hyperscript-html')\n// import {HyperScript, wrap} from 'hyperscript-html'  // If you're using es modules.\n\nvar {div, h1, p} = wrap({div: 'div', h1: 'h1', p: 'p'})\n\nvar html = \ndiv({id: 'id', class: ['cls', 'cls2'], style: {backgroundColor: '#ff0000', position: 'relative'}},\n  h1({class: ['title']}, 'The Title'),\n  p({class: ['content']}, 'The content'),\n)\n```\n\n### Output\n```html\n\u003cdiv\n class=\"cls cls2\"\n style=\"background-color:#ff0000; position:relative;\"\n id=\"id\"\n attr1=\"val1\"\u003e\n\t\u003ch1\n\t class=\"title\"\u003e\n\t\tThe Title\n\t\u003c/h1\u003e\n\t\u003cp\n\t class=\"content\"\u003e\n\t\tThe content\n\t\u003c/p\u003e\n\u003c/div\u003e\n```\n\n## API\n\n### HyperScript([options])\n\nThe `hyperscript` constructor, takes optional options object argument, returns a `hyperscript` function.\n\n```js\nvar h = HyperScript()\n\n// or with options\nvar h = HyperScript({tab:'\\t', nl:'\\n', attrsNewLine:true, prettyPrint:true,\n  flexibleArgs:true, voidElements:true, shortHand:true})\n```\n\n### hyperscript(tag[, attrs[, ...children]])\n\nThe `hyperscript` function returned from the `HyperScript` constructor, takes a required tag name (eg. `'div'`), and optional attributes object, and optional children. The children can be added as an array or multiple arguments, or a combination of arrays and arguments.\n\n```js\n// tag\nh('div')\n\n// tag and attributes\nh('div', {id: 'id', class: ['cls']})\n\n// If the `shortHand` option is `true` (default),\n// you can supply a CSS selector like string for the tag\n// and the values will be extracted to their respective attributes.\nh('div#id.cls[attr1=val][attr2]')\n\n// tag with child arguments\nh('div', 'hello', h('b', 'world'))\n\n// tag with child array\nh('div', ['hello', h('b', 'world')])\n\n// tag with attributes and child arguments\nh('div', {class: ['cls']}, 'hello', h('b', 'world'))\n```\n\n### wrap(elements[, options])\n\nThe wrap function creates shorthand `hyperscript` functions. It takes an object of elements with mapping `function name : element tag` (eg. `{div: 'div', BOX: 'div}`), and an optional options object (the same options that `HyperScript` takes). It returns an object of bound shorthand hyperscript functions.\n\n```js\nvar {box, h1, p} = wrap({box: 'div', h1: 'h1', p: 'p'})\n\nbox(\n  h1('Title'),\n  p('Content'),\n)\n```\n\n### options object\n\n**Option** | **Default value** | **Description**\n---:|:---|:---\n`tab` | `'\\t'` | What to use as the tab.\n`nl` | `'\\n'` | What to use as the line break.\n`prettyPrint` | `true` | Format the HTML output nicely with newlines and tabs, set to `false` for faster rendering.\n`attrsNewLine` | `true` | Put attributes on a new line when `prettyPrint` is `true`.\n`shortHand` | `true`, always `false` for `wrap` fn | Use CSS like selector syntax in tag names for shorthand id, class and attributes values. Set to `false` for faster rendering.\n`voidElements` | `true` | Leave the closing tag off of empty void elements.\n`flexibleArgs` | `true` | Make the hyperscript functions interface flexible, if `false` you must provide a value for attributes argument or `null` if you supply children (eg. `h('div', null, 'child text')`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farccoza%2Fhyperscript-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farccoza%2Fhyperscript-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farccoza%2Fhyperscript-html/lists"}