Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 316 Commits
.github/workflows		.github/workflows
benchmarks		benchmarks
config		config
src		src
test		test
.gitignore		.gitignore
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

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>`);});

Migration guide

Migrating from 5.x to 6.x

The only breaking change introduced with the6.x is that thedefault exports have been removed in favor of named exports. To update, replace the default import in your code with a named one.

- import render from 'preact-render-to-string';+ import { render } from 'preact-render-to-string';

Similarily if you've been using thejsx renderer, the default import needs to be swapped with a named import:

- import render from 'preact-render-to-string/jsx';+ import { render } from 'preact-render-to-string/jsx';

Note: The named exports were already present in the5.x release line. So if you can't update today for any reason, you can apply the above changes safely to make a future update to6.x easier!