{"id":13451927,"url":"https://github.com/developit/vhtml","last_synced_at":"2025-05-15T08:11:03.910Z","repository":{"id":44713263,"uuid":"53761955","full_name":"developit/vhtml","owner":"developit","description":"Render JSX/Hyperscript to HTML strings, without VDOM 🌈","archived":false,"fork":false,"pushed_at":"2024-04-15T08:46:22.000Z","size":20,"stargazers_count":798,"open_issues_count":26,"forks_count":36,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-11T08:42:57.515Z","etag":null,"topics":["html-string","hyperscript","jsx","preact","vdom","virtual-dom"],"latest_commit_sha":null,"homepage":"http://npm.im/vhtml","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/developit.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-03-13T01:29:44.000Z","updated_at":"2025-05-02T16:50:34.000Z","dependencies_parsed_at":"2024-01-14T08:13:04.075Z","dependency_job_id":"1423bd14-41b3-439e-887d-a5e951956935","html_url":"https://github.com/developit/vhtml","commit_stats":{"total_commits":19,"total_committers":9,"mean_commits":2.111111111111111,"dds":0.631578947368421,"last_synced_commit":"96fe21e63a983d7a8f52d8c51a0c994490313abc"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fvhtml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fvhtml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fvhtml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fvhtml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/developit","download_url":"https://codeload.github.com/developit/vhtml/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254301432,"owners_count":22047904,"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":["html-string","hyperscript","jsx","preact","vdom","virtual-dom"],"created_at":"2024-07-31T07:01:07.181Z","updated_at":"2025-05-15T08:11:03.890Z","avatar_url":"https://github.com/developit.png","language":"JavaScript","readme":"# vhtml\n\n[![NPM](https://img.shields.io/npm/v/vhtml.svg?style=flat)](https://www.npmjs.org/package/vhtml)\n[![travis-ci](https://travis-ci.org/developit/vhtml.svg?branch=master)](https://travis-ci.org/developit/vhtml)\n\n### **Render JSX/Hyperscript to HTML strings, without VDOM**\n\n\u003e Need to use HTML strings (angular?) but want to use JSX? vhtml's got your back.\n\u003e\n\u003e Building components? do yourself a favor and use [\u003cimg title=\"Preact\" alt=\"Preact\" src=\"https://cdn.rawgit.com/developit/b4416d5c92b743dbaec1e68bc4c27cda/raw/8dd78c9d138f13e3fec98cbdd6d1c619cf986ee0/preact-logo-trans.svg\" height=\"24\" align=\"top\"\u003e](https://github.com/developit/preact)\n\n[**JSFiddle Demo**](https://jsfiddle.net/developit/9q0vyskg/)\n\n---\n\n\n## Installation\n\nVia npm:\n\n`npm install --save vhtml`\n\n\n---\n\n\n## Usage\n\n```js\n// import the library:\nimport h from 'vhtml';\n\n// tell babel to transpile JSX to h() calls:\n/** @jsx h */\n\n// now render JSX to an HTML string!\nlet items = ['one', 'two', 'three'];\n\ndocument.body.innerHTML = (\n  \u003cdiv class=\"foo\"\u003e\n    \u003ch1\u003eHi!\u003c/h1\u003e\n    \u003cp\u003eHere is a list of {items.length} items:\u003c/p\u003e\n    \u003cul\u003e\n      { items.map( item =\u003e (\n        \u003cli\u003e{ item }\u003c/li\u003e\n      )) }\n    \u003c/ul\u003e\n  \u003c/div\u003e\n);\n```\n\n\n### New: \"Sortof\" Components!\n\n`vhtml` intentionally does not transform JSX to a Virtual DOM, instead serializing it directly to HTML.\nHowever, it's still possible to make use of basic Pure Functional Components as a sort of \"template partial\".\n\nWhen `vhtml` is given a Function as the JSX tag name, it will invoke that function and pass it `{ children, ...props }`.\nThis is the same signature as a Pure Functional Component in react/preact, except `children` is an Array of already-serialized HTML strings.\n\nThis actually means it's possible to build compositional template modifiers with these simple Components, or even higher-order components.\n\nHere's a more complex version of the previous example that uses a component to encapsulate iteration items:\n\n```js\nlet items = ['one', 'two'];\n\nconst Item = ({ item, index, children }) =\u003e (\n  \u003cli id={index}\u003e\n    \u003ch4\u003e{item}\u003c/h4\u003e\n    {children}\n  \u003c/li\u003e\n);\n\nconsole.log(\n  \u003cdiv class=\"foo\"\u003e\n    \u003ch1\u003eHi!\u003c/h1\u003e\n    \u003cul\u003e\n      { items.map( (item, index) =\u003e (\n        \u003cItem {...{ item, index }}\u003e\n          This is item {item}!\n        \u003c/Item\u003e\n      )) }\n    \u003c/ul\u003e\n  \u003c/div\u003e\n);\n```\n\nThe above outputs the following HTML:\n\n```html\n\u003cdiv class=\"foo\"\u003e\n  \u003ch1\u003eHi!\u003c/h1\u003e\n  \u003cul\u003e\n    \u003cli id=\"0\"\u003e\n      \u003ch4\u003eone\u003c/h4\u003eThis is item one!\n    \u003c/li\u003e\n    \u003cli id=\"1\"\u003e\n      \u003ch4\u003etwo\u003c/h4\u003eThis is item two!\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n","funding_links":[],"categories":["JavaScript","others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelopit%2Fvhtml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevelopit%2Fvhtml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelopit%2Fvhtml/lists"}