Gathering detailed insights and metrics for @jacob-ebey/preact-render-to-string
Gathering detailed insights and metrics for @jacob-ebey/preact-render-to-string
📄 Universal rendering for Preact: render JSX and Preact components to HTML.
Installations
npm install @jacob-ebey/preact-render-to-stringDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
19.8.1
NPM Version
9.5.1
Score
74
Supply Chain
89.2
Quality
75.2
Maintenance
100
Vulnerability
99.6
License
Releases
98
Languages
2
JavaScript
TypeScript
JavaScript (99.9%)
TypeScript (0.1%)
🚀 npmpackage.info for sale
Built with Next.js • Fully responsive • SEO optimized • Open source ready
Developer
Download Statistics
Total Downloads
504
Last Day
1
Last Week
3
Last Month
8
Last Year
136
GitHub Statistics
MIT License
684 Stars
625 Commits
95 Forks
10 Watchers
38 Branches
49 Contributors
Updated on Sep 01, 2025
Maintainers
1
Package Meta Information
Latest Version
0.0.0-streaming.2
Package Id
@jacob-ebey/preact-render-to-string@0.0.0-streaming.2
Unpacked Size
487.80 kB
Size
109.86 kB
File Count
50
NPM Version
9.5.1
Node Version
19.8.1
Published on
Apr 01, 2023
Total Downloads
Cumulative downloads
Total Downloads
504
Last Day
0%
1
Compared to previous day
Last Week
50%
3
Compared to previous week
Last Month
100%
8
Compared to previous month
Last Year
3%
136
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
1
preact-render-to-string
Render JSX and Preact 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
1import { render } from 'preact-render-to-string'; 2import { h } from 'preact'; 3/** @jsx h */ 4 5let vdom = <div class="foo">content</div>; 6 7let html = render(vdom); 8console.log(html); 9// <div class="foo">content</div>
Render Preact Components to HTML
1import { render } from 'preact-render-to-string'; 2import { h, Component } from 'preact'; 3/** @jsx h */ 4 5// Classical components work 6class Fox extends Component { 7 render({ name }) { 8 return <span class="fox">{name}</span>; 9 } 10} 11 12// ... and so do pure functional components: 13const Box = ({ type, children }) => ( 14 <div class={`box box-${type}`}>{children}</div> 15); 16 17let html = render( 18 <Box type="open"> 19 <Fox name="Finn" /> 20 </Box> 21); 22 23console.log(html); 24// <div class="box box-open"><span class="fox">Finn</span></div>
Render JSX / Preact / Whatever via Express!
1import express from 'express'; 2import { h } from 'preact'; 3import { render } from 'preact-render-to-string'; 4/** @jsx h */ 5 6// silly example component: 7const Fox = ({ name }) => ( 8 <div class="fox"> 9 <h5>{name}</h5> 10 <p>This page is all about {name}.</p> 11 </div> 12); 13 14// basic HTTP server via express: 15const app = express(); 16app.listen(8080); 17 18// on each request, render and return a component: 19app.get('/:fox', (req, res) => { 20 let html = render(<Fox name={req.params.fox} />); 21 // send it back wrapped up as an HTML5 document: 22 res.send(`<!DOCTYPE html><html><body>${html}</body></html>`); 23});
Suspense & lazy components with preact/compat & preact-ssr-prepass
1npm install preact preact-render-to-string preact-ssr-prepass
1export default () => { 2 return ( 3 <h1>Home page</h1> 4 ) 5}
1import { Suspense, lazy } from "preact/compat" 2 3// Creation of the lazy component 4const HomePage = lazy(() => import("./pages/home")) 5 6const Main = () => { 7 return ( 8 <Suspense fallback={<p>Loading</p>}> 9 <HomePage /> 10 </Suspense> 11 ) 12}
1import { render } from "preact-render-to-string" 2import prepass from "preact-ssr-prepass" 3import { Main } from "./main" 4 5const main = async () => { 6 // Creation of the virtual DOM 7 const vdom = <Main /> 8 9 // Pre-rendering of lazy components 10 await prepass(vdom) 11 12 // Rendering of components 13 const html = render(vdom) 14 15 console.log(html) 16 // <h1>Home page</h1> 17} 18 19// Execution & error handling 20main().catch(error => { 21 console.error(error) 22})
License
No vulnerabilities found.