Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 639 Commits
.changeset		.changeset
.github/workflows		.github/workflows
benchmarks		benchmarks
config		config
demo		demo
src		src
test		test
.editorconfig		.editorconfig
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
jsx.d.ts		jsx.d.ts
jsx.js		jsx.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
typings.json		typings.json
vitest.config.ts		vitest.config.ts

Repository files navigation

preact-render-to-string

Render JSX andPreact components to an HTML string.

Works in Node & the browser, making it useful for universal/isomorphic rendering.

>>Cute Fox-Related Demo(@ CodePen) <<

Render JSX/VDOM to HTML

import{render}from'preact-render-to-string';import{h}from'preact';/**@jsx h */letvdom=<divclass="foo">content</div>;lethtml=render(vdom);console.log(html);// <div>content</div>

Render Preact Components to HTML

import{render}from'preact-render-to-string';import{h,Component}from'preact';/**@jsx h */// Classical components workclassFoxextendsComponent{render({ name}){return<spanclass="fox">{name}</span>;}}// ... and so do pure functional components:constBox=({ type, children})=>(<divclass={`box box-${type}`}>{children}</div>);lethtml=render(<Boxtype="open"><Foxname="Finn"/></Box>);console.log(html);// <div><span>Finn</span></div>

Render JSX / Preact / Whatever via Express!

importexpressfrom'express';import{h}from'preact';import{render}from'preact-render-to-string';/**@jsx h */// silly example component:constFox=({ name})=>(<divclass="fox"><h5>{name}</h5><p>This page is all about{name}.</p></div>);// basic HTTP server via express:constapp=express();app.listen(8080);// on each request, render and return a component:app.get('/:fox',(req,res)=>{lethtml=render(<Foxname={req.params.fox}/>);// send it back wrapped up as an HTML5 document:res.send(`<!DOCTYPE html><html><body>${html}</body></html>`);});

Error Boundaries

Rendering errors can be caught by Preact viagetDerivedStateFromErrors orcomponentDidCatch. To enable that feature inpreact-render-to-string seterrorBoundaries = true

import{options}from'preact';// Enable error boundaries in `preact-render-to-string`options.errorBoundaries=true;

`Suspense` &`lazy` components with`preact/compat`

npm install preact preact-render-to-string

exportdefault()=>{return<h1>Home page</h1>;};

import{Suspense,lazy}from'preact/compat';// Creation of the lazy componentconstHomePage=lazy(()=>import('./pages/home'));constMain=()=>{return(<Suspensefallback={<p>Loading</p>}><HomePage/></Suspense>);};

import{renderToStringAsync}from'preact-render-to-string';import{Main}from'./main';constmain=async()=>{// Rendering of lazy componentsconsthtml=awaitrenderToStringAsync(<Main/>);console.log(html);// <h1>Home page</h1>};// Execution & error handlingmain().catch((error)=>{console.error(error);});