---
schema_version: "1"
id: 89617606f24d0ea4906462919094f4ceec67c2e196d90e2a6698973f3ffc4118
title: Content and Layout Templates in LWR on Node.js
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lwr-node/lwr/guides/lwr-templates.md
canonical_url: https://developer.salesforce.com/docs/platform/lwr/guide/lwr-templates.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: ad448c12692289fa43af3bd7dcd22ba2dcff3af2135491b5d8fa6cb2773ef8d5
products:
  - Lightning Web Runtime
---
# Content and Layout Templates in LWR on Node.js

When LWR renders the response for a page request, it uses content and layout templates. You can individually configure the content and layout templates for each [route](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-routing.md) in an application with LWR.

If your site doesn't have a layout template already, you should create one in your project's `src/layouts` directory. To see a sample layout template in the context of a working LWR site, we recommend that you complete the StaticSite project described in [Quick Start: LWR on Node.js](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-get-started.md).

LWR supports the following languages for templating:

- [HTML](https://en.wikipedia.org/wiki/HTML)
- [Markdown](https://www.markdownguide.org/)
- [Nunjucks](https://mozilla.github.io/nunjucks/)

## Templates in Your StaticSite Project

Let's review the files you created in [your first static site project](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-get-started.md).

In `lwr.config.json`, there are content and layout template files specified with the `Home` route `id`. LWR uses the [route's](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-routing.md) templates along with the [context](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-compile-data.md) to render the response.

```json
// route with templates in lwr.config.json
{
  "id": "Home",
  "path": "/",
  "contentTemplate": "$contentDir/home.md",
  "layoutTemplate": "$layoutsDir/main_layout.njk"
}
```

Let's first examine the **content templates** in `/src/content`. In this example, they're written in Markdown. Each of these files (for example, `about.md`) contains a heading and the body content for a page on your site. Content templates are fairly self-explanatory, so we don't spend much time discussing them.

Next, in the `/src/layouts` directory of your project, there's a **layout template**: `main_layout.njk`. Layout templates can get fairly complex, but let's start with the simple one that LWR generated for your project.

When you examine the following code sample, you find that the `main_layout.njk` file is mostly doing things you might encounter elsewhere:

- telling LWR the location of the CSS style sheet for the site
- describing the logo to draw at the top of each page
- setting up the labels and destinations for the top navigation buttons

But when you get all the way down to `<main>`, there’s something that’s probably new: `{{ body | safe }}`.

Here `body` is an LWR [**context object**](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-compile-data.md#lwr) property that’s available in layout templates. It's essentially a string containing the rendered page content from the route's `contentTemplate` or `rootComponent`. Applying the `safe` filter to `body` prevents HTML escaping.

And that’s it. Keep reading for more on the resources you can use in your LWR templates.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <title></title>
    <link rel="stylesheet" href="$assetsDir/css/main.css" />
  </head>

  <body>
    <div class="wrapper">
      <header>
        <svg class="logo" viewBox="0 0 64 64">
          <path fill="#00a1e0" d="M23 6h22l-8 18h11L20 58l6-26H16l7-26z"></path>
          <path
            fill="#032e61"
            d="M20 60a2 2 0 0 1-1.95-2.45L23.5 34H16a2 2 0 0 1-1.93-2.52l7-26A2 2 0 0 1 23 4h22a2 2 0 0 1 1.83 2.81L40.08 22H48a2 2 0 0 1 1.54 3.27l-28 34A2 2 0 0 1 20 60zm-1.4-30H26a2 2 0 0 1 1.95 2.45l-4.1 17.72L43.76 26H37a2 2 0 0 1-1.83-2.81L41.92 8h-17.4z"
          ></path>
          <path
            fill="#fff"
            d="M26 26a2 2 0 0 1-1.93-2.53l3-11a2 2 0 1 1 3.86 1.05l-3 11A2 2 0 0 1 26 26z"
          ></path>
        </svg>
      </header>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/explore">Explore</a></li>
          <li>
            <a href="//developer.salesforce.com/docs/platform/lwr/overview"> Learn LWR </a>
          </li>
        </ul>
      </nav>
      <main>{{ body | safe }}</main>
    </div>
  </body>
</html>
```

## Template Resources

You can use the following resources in your LWR templates when creating dynamic content.

- [**Asset references**](#template-and-asset-references)
- [**Context objects**](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-compile-data.md)
- Embedded [**Lightning web components**](https://lwc.dev/)

**warning:** If you want to include Lightning web components in your content or layout templates, the `lwr_resources` context object is required. See [LWR Compile-Time Data](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-compile-data.md) for more about `lwr_resources`.

The following snippets in LWR’s various templating languages provide examples of using each of these resource types. In each example, the code adds an asset reference to a logo file, then embeds the `c/info` Lightning web component. The HTML and Nunjucks example also uses the `someText` context object property.

```html
<h1>Some Topic</h1>

<img src="$assetsDir/images/logo.svg" alt="logo" />
<c-info message="{{someText}}"></c-info>
```

Unlike the HTML and Nunjucks example above, the following Markdown example doesn't include the `someText` [context object](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-compile-data.md) property. Context objects aren't available in Markdown templates unless you use a custom route handler. Route handlers are an advanced topic, so for now know that a route handler is a function that is configured for a route.

```html
# Some Topic

![logo]($assetsDir/images/logo.svg "logo")
<c-info message="static string"></c-info>
```

## Template and Asset References

You can configure the directory locations of templates, global context data, and static assets in your `lwr.config.json` file:

- `contentDir`: The content templates directory. The default is `"$rootDir/src/content"`.
- `layoutsDir`: The layout templates directory. The default is `"$rootDir/src/layouts"`.
- `globalDataDir`: The directory of [global data](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-compile-data.md#global-data) for templating. The default is `"$rootDir/src/data"`.
- `assets`: You can configure one or more files or directories to serve static assets. For each file or directory, include these properties:
  - `alias`: A name for this path to use in content or layout templates.
  - `dir` or `file`: The file system path containing the asset.
  - `urlPath`: The URI path that serves the asset.

Here's an example:

```
{
    "contentDir": "$rootDir/templates",
    "layoutsDir": "$rootDir/layouts",
    "globalDataDir": "$rootDir/src/context",
    "assets": [
        {
            "alias": "imageDir",
            "dir": "$rootDir/src/images",
            "urlPath": "/images"
        }
        {
            "file": "$rootDir/logo.png",
            "urlPath": "/logo"
        }
    ]
}
```

After you set up an asset reference, you can use the static assets in LWC content or layout templates using either the `alias` or the `urlPath` value:

By `alias`:

```html
<!-- /src/layouts/main.html -->
<html>
  <head>
    <link rel="icon" href="$imageDir/logo.svg" />
    <title>My Website</title>
  </head>
  <body>
    <!-- ... -->
  </body>
</html>
```

By `urlPath`:

```html
<!-- /src/modules/my/component/component.html -->
<template>
  <img src="/logo" alt="logo" />
  <img src="/images/home.png" alt="home" />
</template>
```

## Next Steps

Curious about routing in LWR? [Find out more now](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-routing.md).