{"id":15416551,"url":"https://github.com/jahilldev/preact-parser","last_synced_at":"2025-04-19T14:33:17.484Z","repository":{"id":44741742,"uuid":"449687728","full_name":"jahilldev/preact-parser","owner":"jahilldev","description":"Avoid use of dangerouslySetInnerHTML with this lightweight (2KB) function. Can parse HTML strings into VDom trees, ready to render in your Preact components","archived":false,"fork":false,"pushed_at":"2023-10-30T09:31:45.000Z","size":120,"stargazers_count":9,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-23T04:17:13.124Z","etag":null,"topics":["browser","dangerouslysetinnerhtml","html","isomorphic","jsx","parser","preact","render","server","string"],"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/jahilldev.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":"2022-01-19T12:44:55.000Z","updated_at":"2024-03-25T16:30:38.000Z","dependencies_parsed_at":"2024-06-21T17:32:16.172Z","dependency_job_id":"52d5d27d-0595-4c21-a263-45fcc99fdfd0","html_url":"https://github.com/jahilldev/preact-parser","commit_stats":{"total_commits":31,"total_committers":2,"mean_commits":15.5,"dds":"0.032258064516129004","last_synced_commit":"bff3288c7ca6c03cdeec6db077d49930b41db66e"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jahilldev%2Fpreact-parser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jahilldev%2Fpreact-parser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jahilldev%2Fpreact-parser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jahilldev%2Fpreact-parser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jahilldev","download_url":"https://codeload.github.com/jahilldev/preact-parser/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249715151,"owners_count":21314987,"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":["browser","dangerouslysetinnerhtml","html","isomorphic","jsx","parser","preact","render","server","string"],"created_at":"2024-10-01T17:12:23.886Z","updated_at":"2025-04-19T14:33:17.454Z","avatar_url":"https://github.com/jahilldev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# preact-parser\n\nWhen dealing with HTML strings in Preact, our only real option is to use `dangerouslySetInnerHTML`. This is fine(-ish) if you 100% trust the contents of that HTML, but regardless, it opens up potential vectors for attack, problems and bugs. Ideally, we'd be able to sanitise, and convert this HTML into VDom nodes that can be natively rendered in the same manner as defined JSX or `h()` calls.\n\nThis lightweight package (**2KB** GZipped) accepts an HTML string (doesn't have to contain HTML, can be text), parses it, and returns a tree of VDom nodes ready to render by Preact. It can work both on the client (Dom Parser) and the server, so is ideal for isomorphic applications.\n\nIt automatically strips `\u003cscript /\u003e` tags, so you no longer have to worry about someone \"accidentally\" adding an `alert('Hello')` in your CMS / API of choice.\n\n# Getting Started\n\nInstall with Yarn:\n\n```bash\n$ yarn add preact-parser\n```\n\nInstall with NPM:\n\n```bash\n$ npm i preact-parser\n```\n\n# Using parse()\n\n`preact-parser` exports a single function, `parse()`, that accepts a string of HTML or text, and can be used directly within your component trees. As mentioned above, in the browser it makes use of the native DOM parser, and on the server uses a tiny, efficient string parser.\n\nFor example:\n\n```jsx\nimport { parse } from 'preact-parser';\n\n/*[...]*/\n\nconst htmlApiResponse = `\n   \u003cp\u003eContrary to popular belief, Lorem Ipsum is not simply random text.\u003c/p\u003e\n   \u003cp\u003eThere are many variations of passages of Lorem Ipsum available\u003c/p\u003e\n   \u003cscript\u003e\n      alert('Gotcha!');\n   \u003c/script\u003e\n`;\n\n/*[...]*/\n\nfunction BlogContent() {\n  return \u003carticle class=\"content\"\u003e{parse(htmlApiResponse)}\u003c/article\u003e;\n}\n```\n\nWhen rendered, the above will output:\n\n```html\n\u003cp\u003eContrary to popular belief, Lorem Ipsum is not simply random text.\u003c/p\u003e\n\u003cp\u003eThere are many variations of passages of Lorem Ipsum available\u003c/p\u003e\n```\n\n# Acknowledgement\n\nThe server side HTML string parser in this package takes inspiration from the fantastically fast `node-html-parser`. That package provides a full DOM representation, including methods, which was overkill for this. In order to keep the size of `preact-parser` to a minimum, we've made use of the excellent parsing function found there.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjahilldev%2Fpreact-parser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjahilldev%2Fpreact-parser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjahilldev%2Fpreact-parser/lists"}