Product
Socket for Jira Is Now Available
Socket for Jira lets teams turn alerts into Jira tickets with manual creation, automated ticketing rules, and two-way sync.
By Jeppe Hasseriis - Apr 20, 2026
Launch Week Day 1: Socket for Jira Is Now Available.Learn More →
express-tsx-views
Advanced tools
express-tsx-views
Server-side JSX/TSX rendering for your express or NestJS application 🚀
Server-side JSX/TSX rendering for your express or NestJS application
Description
With this template engine, TSX files can be rendered server-side by your Express application. Unlike other JSX express renderers, this one does not rely on JSX files being transpiled by babel at runtime. Instead, TSX files are processed once by the tsc compiler.
For this to work, the templates are imported dynamically during rendering. And for this you have to provide a default export in your main TSX files. (Embeddable TSX components don't have to use a default export).
Highlights
- Fast, since the JSX/TSX files do not have to be transpiled on-the-fly with every request
- Works with compiled files (
.js/node) and uncompiled files (.tsx/ts-node,ts-jest, ...) - Provides the definition of React contexts on middleware level
- Supports execution of GraphQL queries from JSX components
Table of contents
Usage
$ npm install --save express-tsx-views
You have to set the jsx setting in your TypeScript configuration tsconfig.json to the value react and to enable esModuleInterop:
{
"compilerOptions": {
"jsx": "react",
"esModuleInterop": true
}
}
This template engine can be used in express and NestJS applications. The function setupReactViews() is provided, with which the engine is made available to the application.
import { setupReactViews } from "express-tsx-views";
const options = {
viewsDirectory: path.resolve(__dirname, "../views"),
};
setupReactViews(app, options);
The following options may be passed:
| Option | Type | Description | Default |
|---|---|---|---|
viewsDirectory | string | The directory where your views (.tsx files) are stored. Must be specified. | - |
doctype | string | Doctype to be used. | <!DOCTYPE html>\n |
transform | (html: string) => string | With this optional function the rendered HTML document can be modified. For this purpose a function must be defined which gets the HTML string as argument. The function returns a modified version of the HTML string as string. | - |
middlewares | TsxRenderMiddleware[] | A list of TsxRenderMiddleware objects that can be used to modify the render context. See Render middlewares | - |
Express
Example express app (See also example/app.ts in this project):
import express from "express";
import { resolve } from "path";
import { setupReactViews } from "express-tsx-views";
import { Props } from "./views/my-view";
export const app = express();
setupReactViews(app, {
viewsDirectory: resolve(__dirname, "views"),
prettify: true, // Prettify HTML output
});
app.get("/my-route", (req, res, next) => {
const data: Props = { title: "Test", lang: "de" };
res.render("my-view", data);
});
app.listen(8080);
views/my-view.tsx:
import React, { Component } from "react";
import MyComponent from "./my-component";
import { MyLayout } from "./my-layout";
export interface Props {
title: string;
lang: string;
}
// Important -- use the `default` export
export default class MyView extends Component<Props> {
render() {
return <div>Hello from React! Title: {this.props.title}</div>;
}
}
NestJS
See nestjs-tsx-views.
express-tsx-views can also be used in NestJS. For this purpose the template engine must be made available in your main.ts:
Render Middlewares
Prettify
Prettifies generated HTML markup using prettier.
setupReactViews(app, {
middlewares: [new PrettifyRenderMiddleware()],
});
Provide React Context
Provides a react context when rendering your react view.
// my-context.ts
import {createContext} from 'react'
export interface MyContextProps = {name: string}
export const MyContext = createContext<MyContextProps | undefined>(undefined)
Use addReactContext() to set the context in your route or in any other middleware:
// app.ts
// Route:
app.get("/", (request: Request, res: Response) => {
addReactContext(res, MyContext, { name: "philipp" });
res.render("my-view");
});
// Middleware:
app.use((req: Request, res: Response, next: NextFunction) => {
addReactContext(res, MyContext, {
name: "philipp",
});
next();
});
Now you can consume the context data in any component:
// my-component.tsx
import { useContext } from "react";
import { MyContext } from "./my-context";
export function MyComponent() {
const { name } = useContext(MyContext);
return <span>Hallo, {name}!</span>;
}
GraphQL
This module supports the execution of GraphQL queries from the TSX template. For this purpose graphql, @apollo/client and cross-fetch have to be installed separately:
$ npm install --save @apollo/client cross-fetch
Now you can create an ApolloRenderMiddleware object and configure it as a middleware within express-tsx-views:
import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client";
import { ApolloRenderMiddleware } from "express-tsx-views/dist/apollo";
// needed to create a apollo client HTTP link:
import { fetch } from "cross-fetch";
// Apollo client linking to an example GraphQL server
const apollo = new ApolloClient({
ssrMode: true,
link: createHttpLink({
uri: "https://swapi-graphql.netlify.app/.netlify/functions/index",
fetch,
}),
cache: new InMemoryCache(),
});
setupReactViews(app, {
viewsDirectory: resolve(__dirname, "views"),
middlewares: [new ApolloRenderMiddleware(apollo)],
});
Example view (see the example folder in this project):
export interface Film {
id: string;
title: string;
releaseDate: string;
}
export interface AllFilms {
allFilms: {
films: Film[];
};
}
const MY_QUERY = gql`
query AllFilms {
allFilms {
films {
id
title
releaseDate
}
}
}
`;
export interface Props {
title: string;
lang: string;
}
export default function MyView(props: Props): ReactElement {
const { data, error } = useQuery<AllFilms>(MY_QUERY);
if (error) {
throw error;
}
return (
<MyLayout lang={props.lang} title={props.title}>
<h2>Films:</h2>
{data?.allFilms.films.map((film) => (
<ul key={film.id}>
{film.title} ({new Date(film.releaseDate).getFullYear()})
</ul>
))}
</MyLayout>
);
}
License
express-tsx-views is distributed under the MIT license. See LICENSE for details.
FAQs
Server-side JSX/TSX rendering for your express or NestJS application 🚀
The npm package express-tsx-views receives a total of 245 weekly downloads. As such, express-tsx-views popularity was classified as not popular.
We found that express-tsx-views demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 09 Jul 2023
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Company News
Socket Named Top Sales Organization by RepVue
Socket won two 2026 Reppy Awards from RepVue, ranking in the top 5% of all sales orgs. AE Alexandra Lister shares what it's like to grow a sales career here.
By Sarah Gooding - Apr 17, 2026
Security News
NIST Officially Stops Enriching Most CVEs as Vulnerability Volume Skyrockets
NIST will stop enriching most CVEs under a new risk-based model, narrowing the NVD's scope as vulnerability submissions continue to surge.
By Sarah Gooding - Apr 17, 2026