{"id":18786868,"url":"https://github.com/chfoidl/preact-html-converter","last_synced_at":"2026-05-17T08:33:56.653Z","repository":{"id":135051984,"uuid":"125670238","full_name":"chfoidl/preact-html-converter","owner":"chfoidl","description":"Converts a raw HTML string into Preact Elements or even Preact Components. Ships with integrations for node and browser.","archived":false,"fork":false,"pushed_at":"2018-07-29T11:59:29.000Z","size":49,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-10T13:27:54.528Z","etag":null,"topics":["html","preact","preact-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/chfoidl.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":"2018-03-17T21:26:22.000Z","updated_at":"2018-07-29T11:59:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"8dc9c2ed-dad0-4994-a45f-d20fd3bcc732","html_url":"https://github.com/chfoidl/preact-html-converter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chfoidl/preact-html-converter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chfoidl%2Fpreact-html-converter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chfoidl%2Fpreact-html-converter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chfoidl%2Fpreact-html-converter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chfoidl%2Fpreact-html-converter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chfoidl","download_url":"https://codeload.github.com/chfoidl/preact-html-converter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chfoidl%2Fpreact-html-converter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33131955,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T06:27:06.342Z","status":"ssl_error","status_checked_at":"2026-05-17T06:26:59.432Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","preact","preact-components"],"created_at":"2024-11-07T20:52:50.738Z","updated_at":"2026-05-17T08:33:56.621Z","avatar_url":"https://github.com/chfoidl.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# preact-html-converter [![Build Status](https://travis-ci.org/Sethorax/preact-html-converter.svg?branch=master)](https://travis-ci.org/Sethorax/preact-html-converter) [![npm version](https://badge.fury.io/js/preact-html-converter.svg)](https://badge.fury.io/js/preact-html-converter)\n\nThis module converts a raw HTML string to a Preact element or an array of Preact elements. Component rendering is also supported.  \n\n\u003e Want to use this module with React? Checkout the React version - [react-html-converter](https://github.com/Sethorax/react-html-converter)\n\n## Installation\n\nInstall via **npm**:  \n`npm install --save preact-html-converter`\n\nor **yarn**:  \n`yarn add preact-html-converter`\n\n## General Info\n\nThis module ships with two integrations. One for node and one for the browser.  \n\n\u003e The browser version only depends on `preact` and uses the native `DOMParser`!\n\nThe main reason behind having to versions is that altough the node version also works in the browser, the usage of `parse5` does add a lot to the overall bundle filesize. Therefore the browser version uses the native `DOMParser` instead of `parse5` to handle the html string parsing.\n\nModule usage is the same for node and for the browser.\n\n## Example\n\n```js\nimport { h, Component } from 'preact';\nimport { PreactHTMLConverter } from 'preact-html-converter';\n\nclass Test extends Component {\n    render() (\n        return \u003cdiv\u003e{this.props.text}\u003c/div\u003e;\n    );\n}\n\nconst converter = PreactHTMLConverter();\nconverter.registerComponent('test', Test);\n\nconst html = '\u003cdiv class=\"my-div\"\u003e\u003cTest text=\"Hello World\" /\u003e\u003c/div\u003e';\n\nclass App extends Component {\n    render() {\n        return (\n            \u003cdiv class=\"my-app\"\u003e\n                {converter.convert(html)}\n            \u003c/div\u003e\n        );\n    }\n}\n```\n\nAs shown in the above example the PreactHTMLConverter just takes a simple HTML string as an argument and returns a Preact element or an array of Preact elements. Those elements can then be easily used in other Preact components.\n\nThe PreactHTMLConverter is also able to create Preact components from the HTML string. To make this work all components must be registered in the converter before converting the HTML string. Just pass in the name of the component's tag and the component itself and the converter will convert those components if they appear in the HTML string.\n\nPlease note that any sibling nodes of a Preact component will not be rendered! Make sure to wrap the component with a div element.\n\n### Static rendering\nIf you just want to quickly render a html string, you can import the `convertStatic` function of this module. With this function only the root node will be converted to a Preact element. All child nodes will be rendered with `dangerouslySetInnerHTML`.\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchfoidl%2Fpreact-html-converter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchfoidl%2Fpreact-html-converter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchfoidl%2Fpreact-html-converter/lists"}