TypeScript icon, indicating that this package has built-in type declarations

    0.2.6 • Public • Published


    This is a template engine for Nestjs applications that allows you to use JSX-based templates with strongly-typed params for server-side rendered HTML.

    You don't need any extra templating engine like nunjucks or handlebars, and you get type-safety out of the box.

    There's no additional compiler, since TypeScript compiles JSX natively.

    ⚠️ WIP: this package is still in progress and that API is extremely volatile. Suggest not using in production.


    Install the package:

    npm install nest-jsx-template-engine

    Update your tsconfig.json file to include jsx and jsxFactory options:

      "compilerOptions": {
        "jsx": "react",
        "jsxFactory": "h"

    Install the middleware in your Nest app.module:

    // app.module.ts
    import { Module, NestModule, MiddlewareConsumer } from '@nestjs/common';
    import { RenderMiddleware } from 'nest-jsx-template-engine';
    import { SomeModule } from './some/some.module';
      imports: [SomeModule],
    export class AppModule implements NestModule {
      configure(consumer: MiddlewareConsumer) {

    Suggest installing it globally for all routes, but see Nest's documentation for other options on installing the middleware.

    ⚠️ by default, the middleware will not render the template for requests that do not expect HTML in the header (e.g., Accept: 'text/html'). It will merely return the value from the controller. You can modify this behavior by extending the middleware class.


    // app.controller.ts
    import { Controller, Get } from '@nestjs/common';
    import { AppService } from './app.service';
    import { Render } from 'nest-jsx-template-engine';
    import { App, IAppProps } from './app.view';
    import { AppViewTransferObject } from './app.vto';
    export class AppController {
      constructor(private readonly appService: AppService) {}
      @Render<IAppProps>(App) // pass the App view directly to the Render decorator
      getHello(): IAppProps {
        return this.appService.getHello();

    Define your template with JSX:

    // app.view.tsx
    import { h, JSXTemplate }  from 'nest-jsx-template-engine'
    export interface IAppProps  {
      name: string
     * @param {any} data the value returned from the controller
     * @param {JSXTemplate.RenderProps} props framework provided props containing request.
     * See below on extending the props passed
    export function App(data: IAppProps, props: JSXTemplate.RenderProps): string {
      return <html>
          <h1 class="foo">{}</h1>
          <div>Request Path: {props.$req.path} from ip: {props.$req.ip}

    See a working demo in the Github repo.

    Extending Render behavior

    The Render behavior provided by the middleware can be overriden in two key ways by sub-classing the middleware.

    import { RenderMiddleware, JSXTemplate } from 'next-jsx-template-engine';
    export interface CustomRenderProps extends JSXTemplate.RenderProps {
      $foo: boolean
    export class CustomRenderMiddleware {
      // by default, the middleware will not render requests that do not expect HTML in the response.
      // returning false will disable this check. You can do this variably by introspecting the req object
      applyStrictAcceptHtmlCheck(req: Request): boolean {
        // returning false means that the template will be rendered for all requests,
        // regardless of client's accept headers.
        return false;
      // apply additional request/response specific properties that will be passed as
      // the second parameter to the JSX template along with the data returned from 
      // the controller. 
      // Common use-cases might be supplying session data, CSRF tokens, etc.
      decorateRenderProps(req: Request, res: Response): Partial<CustomRenderProps> {
        return {
          $foo: false

    A Note on React-Flavored JSX

    This package does not support React flavored JSX (e.g., className, htmlFor, etc). It expects basic HTML properties.


    npm i nest-jsx-template-engine

    DownloadsWeekly Downloads






    Unpacked Size

    366 kB

    Total Files


    Last publish


    • sjones6