{"id":13525150,"url":"https://github.com/developit/preact-markup","last_synced_at":"2025-04-04T21:07:33.283Z","repository":{"id":49102091,"uuid":"50375662","full_name":"developit/preact-markup","owner":"developit","description":":zap: Render HTML5 as VDOM, with Components as Custom Elements!","archived":false,"fork":false,"pushed_at":"2021-06-28T22:52:20.000Z","size":216,"stargazers_count":202,"open_issues_count":17,"forks_count":30,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-28T20:07:41.208Z","etag":null,"topics":["dom","html-renderer","jsx","markdown","markup","parse","preact","preact-components","xml"],"latest_commit_sha":null,"homepage":"http://npm.im/preact-markup","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}},"created_at":"2016-01-25T19:36:48.000Z","updated_at":"2025-03-18T23:30:30.000Z","dependencies_parsed_at":"2022-09-19T09:00:24.429Z","dependency_job_id":null,"html_url":"https://github.com/developit/preact-markup","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fpreact-markup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fpreact-markup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fpreact-markup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fpreact-markup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/developit","download_url":"https://codeload.github.com/developit/preact-markup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247249524,"owners_count":20908212,"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":["dom","html-renderer","jsx","markdown","markup","parse","preact","preact-components","xml"],"created_at":"2024-08-01T06:01:16.379Z","updated_at":"2025-04-04T21:07:33.255Z","avatar_url":"https://github.com/developit.png","language":"JavaScript","readme":"# preact-markup [![NPM](http://img.shields.io/npm/v/preact-markup.svg)](https://www.npmjs.com/package/preact-markup) [![travis-ci](https://travis-ci.org/developit/preact-markup.svg)](https://travis-ci.org/developit/preact-markup)\n\nA `\u003cMarkup\u003e` component that renders HTML (or XML) using Virtual DOM, mapping a set of element names to Components. Works beautifully with [Preact].\n\n\u003e **Think of this like an HTML5 renderer where Web Components are implemented as [Preact] Components**.\n\n### :zap: **[JSFiddle Demo](https://jsfiddle.net/developit/narb8qmo/)** :zap:\n\n\u003cimg src=\"https://i.gyazo.com/f98be3c0d3a40c50d151dbc72f317f2f.gif\" alt=\"demo preview\" width=\"425\" height=\"255\" /\u003e\n\n\n\n## Use Cases\n\n- Rendering Markdown in VDOM - see [preact-markdown](https://github.com/laggingreflex/preact-markdown)\n- Component-base app design and/or layout via HTML\n- Define app structure using a standard HTML CMS\n- Support arbitrary component extensions by allowing safe HTML\n- Build using Custom Elements, implemented using React's API\n\n\n---\n\n\n### Overview\n\nThe `\u003cMarkup /\u003e` component takes some `markup`, an optional mapping of custom element names to `components`, and an optional `type` of either `xml` or `html`.\n\nIn it's simplest form, `\u003cMarkup /\u003e` is just a diffing XML/HTML renderer. It only re-renders when you change the `markup` prop.\n\n```js\nimport Markup from 'preact-markup';\n\nlet html = `\u003ch1\u003ehello\u003c/h1\u003e \u003cp\u003eTesting 1 2 3...\u003c/p\u003e`;\nrender(\u003cMarkup markup={html} /\u003e, document.body);\n```\n\n\u003e **Note:** by default, content is parsed as XML, which may be too strict for your content but is the fastest option. Pass `type=\"html\"` to parse as HTML.\n\n\n### Custom Elements via Components\n\nThe real value of `\u003cMarkup /\u003e` is seen when passing a `components` prop. This prop is an Object that lets us map any HTML/XML element name to a preact Component. The mapped component is injected and rendered as if it had been referenced from within JSX. HTML attributes defined on the custom element in `markup` get passed to the mapped Component as `props`.\n\n```js\nimport Markup from 'preact-markup';\n\nconst Sidebar = ({ title, children }) =\u003e (\n\t\u003caside class=\"sidebar\"\u003e\n\t\t\u003ch2\u003e{ title }\u003c/h2\u003e\n\t\t{ children }\n\t\u003c/aside\u003e\n);\n\nlet html = `\n\u003ch1\u003eHello, World\u003c/h1\u003e\n\u003csidebar title=\"My Sidebar!\"\u003e\n\t\u003cp\u003eSidebar contents.\u003c/p\u003e\n\u003c/sidebar\u003e\n`;\nrender(\u003cMarkup markup={html} components={{ Sidebar }} /\u003e, document.body);\n```\n\nWhen `render()` is invoked, Our `\u003cSidebar /\u003e` component is substituted for the `\u003csidebar\u003e` element, which means it gets mounted and rendered like a normal Preact Component.  The result is this HTML DOM:\n\n```html\n\u003cdiv class=\"markup\"\u003e\n\t\u003ch1\u003eHello, World\u003c/h1\u003e\n\t\u003caside class=\"sidebar\"\u003e\n\t\t\u003ch2\u003eMy Sidebar!\u003c/h2\u003e\n\t\t\u003cp\u003eSidebar contents.\u003c/p\u003e\n\t\u003c/aside\u003e\n\u003c/div\u003e\n```\n\nSubsequent `render()`s diff against that DOM just like a normal JSX rendering flow would.\n\n### Optional properties\n\n`type` - By default, content is parsed as XML. Pass `type=\"html\"` to use an HTML parser.\n\n`trim` - Trimming tries to emulate HTML semantics by default, but these differ from JSX semantics. Pass `false` to retain all whitespace, or `all` to omit all whitespace.\n\n`onError` - Suppress XML/HTML parse errors and instead pass them to this function.\n\n`allow-scripts` - By default, preact-markup sanitizes the rendered HTML by removing script tags. The `allow-scripts` property re-enables script tags, _executing any JavaScript code within them_.\n\n\u003e ##### Example\n\u003e\n\u003e ```js\n\u003e let markup = `\u003cem\u003ehello!\u003c/em\u003e\u003ch1\u003easdflkj\u003c/h1\u003e\u003cscript\u003ealert(\"Hello world\");\u003c/script\u003e`;\n\u003e render(\u003cMarkup markup={markup} allow-scripts /\u003e, document.body);\n\u003e ```\n\n---\n\n\n### License\n\n[MIT]\n\n\n[Preact]: https://github.com/developit/preact\n[MIT]: http://choosealicense.com/licenses/mit/\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelopit%2Fpreact-markup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevelopit%2Fpreact-markup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelopit%2Fpreact-markup/lists"}