Deepkit Template is a JSX based template engine to generate HTML or XML format.


Typesafe components.
Async components.
Dependency Injection
Dependency Injection.
High Performance
High Performance.


JSX allows you to write HTML, or any other XML based format in a typesafe way. It is a superset of JavaScript and thus allows you to use all JavaScript features.

export function MyComponent(props: { title: string }) {
    return <div>Hello {props.title}</div>;

router.get('/hello/:text', (text: string) => {
    return <MyComponent title={text}/>;

//GET /hello/world => <div>Hello world</div>

High Performance

All JSX components are compiled to native JavaScript code at runtime. This allows to execute templates with the same performance as native JavaScript code.

// original TypeScript TSX
export function MyComponent(props: {title: string}) {
    return <div>Hello {props.title}</div>;
// is optimised at runtime
export function MyComponent(props) {
    return '<div>Hello ' + escape(props.title) + '</div>';

Async Components

Components can be async. This allows you to load data from a file, database, or remote API and render the component once the data is available.

export async function MyComponent(props: { title: string }) {
    const data = await fetch('https://example.com/data');
    return <div>Hello {props.title} {data}</div>;

Dependency Injection

Deepkit Template supports dependency injection. This allows you to inject services into your components.

export async function User(
    props: { id: number }, 
    database: Database,
) {
    const user = await database.query(User)
        .filter({ id: props.id })

    return <div>Hello {user.name}</div>;

router.get('/user/:id', (id: number) => {
    return <User id={id}/>;

Questions & Answers

1. How does the Deepkit template engine differ from other template engines?

The Deepkit template engine allows you to write typesafe, fast, and secure HTML templates. It is based on JSX and is specifically designed for server-side rendering (SSR). Unlike other template engines, Deepkit's template engine is not compatible with React.

2. Can I use the Deepkit template engine with React?

No, the Deepkit template engine is not compatible with React, Preact, or any other JSX based engine. If you want to use React, you cannot use @deepkit/template. Deepkit Template is designed to be used in the backend only.

3. What is server-side rendering and why is Deepkit's template engine designed for it?

Server-side rendering (SSR) is the process of rendering HTML on the server before sending it to the client. Deepkit's template engine is designed specifically for SSR and is not intended for client-side rendering. SSR has several advantages like improved performance, better SEO, and enhanced accessibility.

4. How do I install and configure the Deepkit template engine in my TypeScript project?

To install and configure the Deepkit template engine in your TypeScript project, you need to adjust the tsconfig.json file. In the compilerOptions, set the jsx value to "react-jsx" and the jsxImportSource value to "@deepkit/template". You also need to make sure you have "experimentalDecorators": true and "emitDecoratorMetadata": true enabled. Then you can use JSX directly in your controller.

5. Can I use JSX directly in my Deepkit controller?

Yes, after installing and configuring the Deepkit template engine, you can use JSX directly in your Deepkit controller. You can write JSX code that represents your HTML templates and return them from your route methods. The template engine will automatically set the HTTP content type to text/html; charset=utf-8 when you return a JSX template.

No answer for your question? Ask a question or see all questions.

See all questionsAsk a question


Made in Germany