# preact-render-to-string
[](https://www.npmjs.com/package/preact-render-to-string)
[](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);
//