{"id":13525136,"url":"https://github.com/preactjs/preact-render-to-string","last_synced_at":"2025-12-12T04:39:21.894Z","repository":{"id":37431655,"uuid":"44454813","full_name":"preactjs/preact-render-to-string","owner":"preactjs","description":"📄 Universal rendering for Preact: render JSX and Preact components to HTML.","archived":false,"fork":false,"pushed_at":"2025-02-14T19:06:39.000Z","size":1503,"stargazers_count":676,"open_issues_count":26,"forks_count":96,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-05-07T11:41:47.504Z","etag":null,"topics":["html","preact","preact-components","universal"],"latest_commit_sha":null,"homepage":"http://npm.im/preact-render-to-string","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/preactjs.png","metadata":{"funding":{"github":["preactjs"],"open_collective":"preact"},"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2015-10-17T21:12:30.000Z","updated_at":"2025-05-02T14:11:57.000Z","dependencies_parsed_at":"2025-04-09T21:12:30.404Z","dependency_job_id":"67801b26-21af-4657-85e5-48f6c30902de","html_url":"https://github.com/preactjs/preact-render-to-string","commit_stats":{"total_commits":478,"total_committers":51,"mean_commits":9.372549019607844,"dds":0.7405857740585774,"last_synced_commit":"77595a14879b183a3d38beee5e3bd3b33d36823f"},"previous_names":["developit/preact-render-to-string"],"tags_count":109,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/preactjs%2Fpreact-render-to-string","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/preactjs%2Fpreact-render-to-string/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/preactjs%2Fpreact-render-to-string/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/preactjs%2Fpreact-render-to-string/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/preactjs","download_url":"https://codeload.github.com/preactjs/preact-render-to-string/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252992313,"owners_count":21837080,"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","preact","preact-components","universal"],"created_at":"2024-08-01T06:01:16.256Z","updated_at":"2025-12-12T04:39:21.837Z","avatar_url":"https://github.com/preactjs.png","language":"JavaScript","readme":"# preact-render-to-string\n\n[![NPM](http://img.shields.io/npm/v/preact-render-to-string.svg)](https://www.npmjs.com/package/preact-render-to-string)\n[![Build status](https://github.com/preactjs/preact-render-to-string/actions/workflows/ci.yml/badge.svg)](https://github.com/preactjs/preact-render-to-string/actions/workflows/ci.yml)\n\nRender JSX and [Preact](https://github.com/preactjs/preact) components to an HTML string.\n\nWorks in Node \u0026 the browser, making it useful for universal/isomorphic rendering.\n\n\\\u003e\\\u003e **[Cute Fox-Related Demo](http://codepen.io/developit/pen/dYZqjE?editors=001)** _(@ CodePen)_ \u003c\u003c\n\n---\n\n### Render JSX/VDOM to HTML\n\n```js\nimport { render } from 'preact-render-to-string';\nimport { h } from 'preact';\n/** @jsx h */\n\nlet vdom = \u003cdiv class=\"foo\"\u003econtent\u003c/div\u003e;\n\nlet html = render(vdom);\nconsole.log(html);\n// \u003cdiv class=\"foo\"\u003econtent\u003c/div\u003e\n```\n\n### Render Preact Components to HTML\n\n```js\nimport { render } from 'preact-render-to-string';\nimport { h, Component } from 'preact';\n/** @jsx h */\n\n// Classical components work\nclass Fox extends Component {\n\trender({ name }) {\n\t\treturn \u003cspan class=\"fox\"\u003e{name}\u003c/span\u003e;\n\t}\n}\n\n// ... and so do pure functional components:\nconst Box = ({ type, children }) =\u003e (\n\t\u003cdiv class={`box box-${type}`}\u003e{children}\u003c/div\u003e\n);\n\nlet html = render(\n\t\u003cBox type=\"open\"\u003e\n\t\t\u003cFox name=\"Finn\" /\u003e\n\t\u003c/Box\u003e\n);\n\nconsole.log(html);\n// \u003cdiv class=\"box box-open\"\u003e\u003cspan class=\"fox\"\u003eFinn\u003c/span\u003e\u003c/div\u003e\n```\n\n---\n\n### Render JSX / Preact / Whatever via Express!\n\n```js\nimport express from 'express';\nimport { h } from 'preact';\nimport { render } from 'preact-render-to-string';\n/** @jsx h */\n\n// silly example component:\nconst Fox = ({ name }) =\u003e (\n\t\u003cdiv class=\"fox\"\u003e\n\t\t\u003ch5\u003e{name}\u003c/h5\u003e\n\t\t\u003cp\u003eThis page is all about {name}.\u003c/p\u003e\n\t\u003c/div\u003e\n);\n\n// basic HTTP server via express:\nconst app = express();\napp.listen(8080);\n\n// on each request, render and return a component:\napp.get('/:fox', (req, res) =\u003e {\n\tlet html = render(\u003cFox name={req.params.fox} /\u003e);\n\t// send it back wrapped up as an HTML5 document:\n\tres.send(`\u003c!DOCTYPE html\u003e\u003chtml\u003e\u003cbody\u003e${html}\u003c/body\u003e\u003c/html\u003e`);\n});\n```\n\n### Error Boundaries\n\nRendering errors can be caught by Preact via `getDerivedStateFromErrors` or `componentDidCatch`. To enable that feature in `preact-render-to-string` set `errorBoundaries = true`\n\n```js\nimport { options } from 'preact';\n\n// Enable error boundaries in `preact-render-to-string`\noptions.errorBoundaries = true;\n```\n\n---\n\n### `Suspense` \u0026 `lazy` components with [`preact/compat`](https://www.npmjs.com/package/preact)\n\n```bash\nnpm install preact preact-render-to-string\n```\n\n```jsx\nexport default () =\u003e {\n\treturn \u003ch1\u003eHome page\u003c/h1\u003e;\n};\n```\n\n```jsx\nimport { Suspense, lazy } from 'preact/compat';\n\n// Creation of the lazy component\nconst HomePage = lazy(() =\u003e import('./pages/home'));\n\nconst Main = () =\u003e {\n\treturn (\n\t\t\u003cSuspense fallback={\u003cp\u003eLoading\u003c/p\u003e}\u003e\n\t\t\t\u003cHomePage /\u003e\n\t\t\u003c/Suspense\u003e\n\t);\n};\n```\n\n```jsx\nimport { renderToStringAsync } from 'preact-render-to-string';\nimport { Main } from './main';\n\nconst main = async () =\u003e {\n\t// Rendering of lazy components\n\tconst html = await renderToStringAsync(\u003cMain /\u003e);\n\n\tconsole.log(html);\n\t// \u003ch1\u003eHome page\u003c/h1\u003e\n};\n\n// Execution \u0026 error handling\nmain().catch((error) =\u003e {\n\tconsole.error(error);\n});\n```\n\n---\n\n### License\n\n[MIT](http://choosealicense.com/licenses/mit/)\n","funding_links":["https://github.com/sponsors/preactjs","https://opencollective.com/preact"],"categories":["Packages","Uncategorized"],"sub_categories":["SSR","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpreactjs%2Fpreact-render-to-string","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpreactjs%2Fpreact-render-to-string","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpreactjs%2Fpreact-render-to-string/lists"}