A Hapi.js plugin to aid in server-side rendering using Handlebars and React.

Usage no npm install needed!

<script type="module">
  import vrboCatalystRender from 'https://cdn.skypack.dev/@vrbo/catalyst-render';



NPM Version Dependency Status NPM Downloads


A Hapi.js plugin that works with the catalyst-server to aid in server-side rendering using Handlebars and React. It allows you to relate a Handlebars template and a React component to a route. This route will automatically be registered with the server and will decorate request.pre.component with the react component and the request.pre.template with the template. It will also register @hapi/vision and server views with Handlebars rendering for the page scaffolding



npm install @vrbo/catalyst-render

Register the plugin in the application's manifest:

"register": {
    "catalyst-render": {
        "plugin": "require:@vrbo/catalyst-render",
        "options": {
            "routes": [{
                "route": "require:./routes/application.js",
                "component": "require:../components/App/server.js",
                "template": "./templates/welcome.hbs"

The require:./routes/application.js points to a route file that exports a Hapi.js route object and will look something like this (with a very basic render):

module.exports = {
    method: 'GET',
    path: '/',
    options: {
        handler(request, h){
            const template = request.pre.template;
            const Component = request.pre.component;
            const body = ReactDOMServer.renderToString(<Component/>);
            return h.view(template, { body })
        id: 'root'


Register the plugin server.register(server, options)

Param Type Description
server object Hapi.js server
options object Overriding options
options.routes array A list of route objects to register on server.
[options.viewsOptions] object Options to add to (or override) when on server.views method is called for adding things like partials ,, layouts, helpers and others.
[options.visionOptions] object Proxy for options when registering @hapi/vision.
[options.resolveAssetHelper] object A Handlebars helper to help resolve static assets, as in publishing to a CDN.
options.resolveAssetHelper.name string Name of helper.
options.resolveAssetHelper.helper function Helper function.


This is an object for registering routes, React components, and templates

Property Type Description
route object Hapi.js route object to register on server.
component object A React component to render. Available as request.pre.component in handler in above route.
template array A Handlebars template to use to render page scaffold. Available as request.pre.template in handler in above route.

Further Reading