---
schema_version: "1"
id: facfad6f1703657804980cc2dd99a688b91c0034bdc6ebfb4e5ab11062340c56
title: Compile-Time Data 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-compile-data.md
canonical_url: https://developer.salesforce.com/docs/platform/lwr/guide/lwr-compile-data.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: f8ec3a5749e2fab3eed53c90ebe2cdae7aef811a8afa76026df45a93adb6238f
products:
  - Lightning Web Runtime
---
# Compile-Time Data in LWR on Node.js

After you understand the basics about [templating and layouts](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-templates.md) with LWR, you can use the various data provided by LWR for more complex scenarios. The place to start is with **context objects**.

## Understand Context Objects

LWR uses a [route’s](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-routing.md) templates and context to render the response for a page request.

The context object that LWR passes into HTML and Nunjucks templates contains data from several locations. This data is merged into a single object in this order:

- [Global Data](#global-data)

- [Front Matter](#front-matter)

- [Page Information](#page-information)

- [Markdown Metadata](#markdown-metadata)

- [Static Route Properties](#static-route-properties)

- [Route Handlers](#route-handlers)

- [LWR Properties](#lwr)

**note:** When it comes to context objects, Markdown templates are a little different from HTML and Nunjucks templates. Context isn't passed into Markdown templates unless you use a route handler, which is a way of customizing the page response. ["Route Handler Functions"](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-routing-server.md#route-handler-functions) in [Server-Side Routing in LWR](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-routing-server.md) discusses this advanced topic.

## Global Data

From the file system, you can pass any static global context data into your app's content and layout templates. This data is available to all HTML or Nunjucks templates within your application. It is not available to component HTML templates, however.

```cli
src/
  └── data/     // global template context data
      ├── site/
      │   └── navbar.json
      └── global.json
```

```json
// $rootDir/src/data/global.json
{
  "siteTitle": "LWR Docs"
}
```

```json
// $rootDir/src/data/site/navbar.json
[
  {
    "id": "guide",
    "name": "Guide",
    "url": "/guide/introduction"
  },
  {
    "id": "recipes",
    "name": "Recipes",
    "url": "/recipes"
  }
]
```

This global data is then added to the context.

```json
// context object
{
  "global": {
    "siteTitle": "LWR Docs"
  },
  "site": {
    "navbar": [
      {
        "id": "guide",
        "name": "Guide",
        "url": "/guide/introduction"
      },
      {
        "id": "recipes",
        "name": "Recipes",
        "url": "/recipes"
      }
    ]
  }
}
```

## Front Matter

LWR reads any front matter out of a template and adds it to the [context object](#understand-context-objects). Front matter values are local to the template.

LWR uses the [gray-matter](https://www.npmjs.com/package/gray-matter) parser to process front matter. This allows you to use YAML, JSON, TOML, or CoffeeScript to format front matter, or you can even [set custom delimiters](https://www.npmjs.com/package/gray-matter#optionsdelimiters). The following is a YAML front matter example:

```html
---
custom: 9000
someText: Good to meet you
immutable: false
layoutTemplate: $layoutsDir/main_layout.njk
---

{# $rootDir/src/content/home.njk #}
<p>{{someText}}</p>
<p>{{custom}}</p>
It is now {{ now | date('dddd, MMMM Do YYYY, h:mm:ss a') }}
```

```html
---
custom: 9000
someText: Good to meet you
immutable: false
layoutTemplate: $layoutsDir/main_layout.njk
---

{# $rootDir/src/content/home.njk #}
<p>{{someText}}</p>
<p>{{custom}}</p>
It is now {{ now | date('dddd, MMMM Do YYYY, h:mm:ss a') }}
```

LWR has predefined the following front matter variables:

| Variable         | Supported Template Languages | Notes                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| ---------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `layoutTemplate` | HTML, Nunjucks, Markdown     | Sets the layout template inside a content template. This value is overridden by the `layoutTemplate` set on the route.                                                                                                                                                                                                                                                                                                                                                                                           |
| `immutable`      | Nunjucks                     | Set this variable to `false` if the template contents are mutable; the default is `true`. Nunjucks templating allows mutable constructs to be embedded in a template's content, for example, [random](https://mozilla.github.io/nunjucks/templating.html#random) and [cycler](https://mozilla.github.io/nunjucks/templating.html#cycler-item1-item2-itemn). Due to this capability, templates that use these features must mark the template as mutable so LWR can modify the cacheability of the page response. |

## Page Information

LWR can pass information about the page from the current route and request.

- `id`: `route.id`
- `title`: set to the first defined value of the following:
  - `properties.title` from the route or `viewParams.title` from the route handler
  - filename from `route.contentTemplate`
  - "LWR App"
- `url`: the request URL, relative to the origin

Example 1: When the current browser location is `http://localhost:3000/` and the route is:

```json
// route in lwr.config.json
{
  "id": "home_page",
  "path": "/",
  "contentTemplate": "$contentDir/home.html",
  "layoutTemplate": "$layoutsDir/main_layout.njk"
}
```

Then, the page information is:

```json
// context object
{
  "page": {
    "id": "home_page",
    "title": "home",
    "url": "/"
  }
}
```

Example 2: When the current browser location is `http://localhost:3000/recipes?sort=desc` and the route is:

```json
// route in lwr.config.json
{
  "id": "recipes",
  "path": "/recipes",
  "contentTemplate": "$contentDir/recipes.md",
  "properties": {
    "title": "Recipes Repository"
  }
}
```

Then, the page information is:

```json
// context object
{
  "page": {
    "id": "recipes",
    "title": "Recipes Repository",
    "url": "/recipes?sort=desc"
  }
}
```

The object is accessible via the page context variable in the HTML/Nunjucks templates:

```html
{# $layoutsDir/layout.njk shows the page title and a logo on the home page #}
<!DOCTYPE html>
<html>
  <head>
    <title>{{page.title}}</title>
  </head>
  <body>
    {% if page.id === 'home_page' %}
    <img src="$assetsDir/images/logo.svg" alt="logo" />
    {% endif %}{{ body | safe }}{{ lwr_resources | safe }}
  </body>
</html>
```

## Markdown Metadata

Markdown content templates produce context on their headings, which can be accessed from an HTML or Nunjucks layout template. Information on each heading starting with two or more `#` is included. For example, this Markdown:

```markdown
## Topic 1

### Sub-Topic

#### Grandchild
```

Produces this context object:

```json
// context object
{
  "headings": [
    {
      "text": "Topic 1",
      "slug": "topic-1"
    },
    {
      "text": "Sub-Topic",
      "slug": "sub-topic"
    },
    {
      "text": "Grandchild",
      "slug": "grandchild"
    }
  ]
}
```

The object is accessible via the `headings` context property in HTML/Nunjucks layout templates:

```json
{# $layoutsDir/partials/nav.njk shows a link for each heading #}
<ul>
    {% for mdHeading in headings %}
        <li><a href="#{{mdHeading.slug}}">{{mdHeading.text}}</a></li>
    {% endfor %}
</ul>
```

## Static Route Properties

You can pass static context into HTML/Nunjucks templates from a route via its `properties`:

```json
// route with properties in lwr.config.json
{
  "id": "about",
  "path": "/about",
  "contentTemplate": "$contentDir/about.html",
  "properties": {
    "someText": "Lorem ipsum dolor sit amet"
  }
}
```

```html
<!-- $contentDir/about.html shows the route property -->
<h2>About</h2>
<p>{{someText}}</p>
```

## Route Handlers

Context objects can optionally contain route handlers. Route handlers are functions that allow you to customize the page response for a route. ["Route Handler Functions"](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-routing-server.md#route-handler-functions) in [Server-Side Routing in LWR](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-routing-server.md) discusses this advanced topic.

## LWR

LWR automatically passes two context object properties:

- `body`: Available in layout templates, a string containing the rendered page content that is output from the route's `contentTemplate` or `rootComponent`.
- `lwr_resources`: A string containing all the scripts required to run your application, such as the Lightning Web Component library and LWR client resources. If this string is excluded from the page response, embedded Lightning web components don't render.
  - **Note**: The `lwr_resources` property is optional. If you have purely static HTML content (no Lightning web components, module resolution, or other LWR features), you don't require LWR resources in your layout. In the static site you created as your first project, the `main_layout.njk` file doesn't include `lwr_resources`.

Here are examples of HTML and Nunjucks layout templates that use both LWR properties:

**HTML:**

```html
<!-- $layoutsDir/main.html -->
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <!-- triple braces prevents HTML escaping -->
    {{{body}}} {{{lwr_resources}}}
  </body>
</html>
```

**Nunjucks:**

```html
{# $layoutsDir/main.njk #}
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    {# the "safe" filter prevents HTML escaping #} {{ body | safe }}{{lwr_resources | safe }}
  </body>
</html>
```