# preact-render-to-string [![NPM](http://img.shields.io/npm/v/preact-render-to-string.svg)](https://www.npmjs.com/package/preact-render-to-string) [![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) Render JSX and [Preact](https://github.com/preactjs/preact) components to an HTML string. Works in Node & the browser, making it useful for universal/isomorphic rendering. \>\> **[Cute Fox-Related Demo](http://codepen.io/developit/pen/dYZqjE?editors=001)** _(@ CodePen)_ << --- ### Render JSX/VDOM to HTML ```js import { render } from 'preact-render-to-string'; import { h } from 'preact'; /** @jsx h */ let vdom =

content

; let html = render(vdom); console.log(html); //

content

``` ### Render Preact Components to HTML ```js import { render } from 'preact-render-to-string'; import { h, Component } from 'preact'; /** @jsx h */ // Classical components work class Fox extends Component { render({ name }) { return {name}; } } // ... and so do pure functional components: const Box = ({ type, children }) => (

{children}

); let html = render( ); console.log(html); //

Finn

``` --- ### Render JSX / Preact / Whatever via Express! ```js import express from 'express'; import { h } from 'preact'; import { render } from 'preact-render-to-string'; /** @jsx h */ // silly example component: const Fox = ({ name }) => (

{name}

This page is all about {name}.

); // basic HTTP server via express: const app = express(); app.listen(8080); // on each request, render and return a component: app.get('/:fox', (req, res) => { let html = render(); // send it back wrapped up as an HTML5 document: res.send(`${html}`); }); ``` ### Error Boundaries Rendering errors can be caught by Preact via `getDerivedStateFromErrors` or `componentDidCatch`. To enable that feature in `preact-render-to-string` set `errorBoundaries = true` ```js import { options } from 'preact'; // Enable error boundaries in `preact-render-to-string` options.errorBoundaries = true; ``` --- ### `Suspense` & `lazy` components with [`preact/compat`](https://www.npmjs.com/package/preact) ```bash npm install preact preact-render-to-string ``` ```jsx export default () => { return

Home page

; }; ``` ```jsx import { Suspense, lazy } from 'preact/compat'; // Creation of the lazy component const HomePage = lazy(() => import('./pages/home')); const Main = () => { return ( Loading

}> ); }; ``` ```jsx import { renderToStringAsync } from 'preact-render-to-string'; import { Main } from './main'; const main = async () => { // Rendering of lazy components const html = await renderToStringAsync(

); console.log(html); //

Home page

}; // Execution & error handling main().catch((error) => { console.error(error); }); ``` --- ### License [MIT](http://choosealicense.com/licenses/mit/)

c	File Name	Size	T	Date
zip	dist/	4096	---	2026-06-10 03:36:41
zip	src/	4096	---	2026-06-10 03:36:41
-	LICENSE	1079	%	2026-05-20 11:21:45
-	README.md	3333	md	2026-05-20 11:21:45
-	jsx.d.ts	496	ts	2026-05-20 11:21:46
-	jsx.js	40	js	2026-05-20 11:21:46
-	package.json	4569	json	2026-05-20 11:21:46
-	typings.json	88	json	2026-05-20 11:21:46

🌲 / quartz node_modules preact-render-to-string

control-panel