---
url: https://lit-ui-router.dev/reference/lit-ui-router/types/RoutedLitTemplate.md
---
[lit-ui-router](../index.md) / RoutedLitTemplate

# Type Alias: RoutedLitTemplate\<T>

```ts
type RoutedLitTemplate<T> = (props) => TemplateResult;
```

Defined in: [packages/lit-ui-router/src/interface.ts:248](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router/src/interface.ts#L248)

A function that returns a Lit TemplateResult for rendering in a `<ui-view>`.

This is the **simplest way** to define route components - no LitElement class needed.
The function optionally receives [UIViewInjectedProps](UIViewInjectedProps.md) as its argument.

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
|  `T` *extends* [`DefaultResolvesType`](DefaultResolvesType.md) | [`DefaultResolvesType`](DefaultResolvesType.md) |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`UIViewInjectedProps`](UIViewInjectedProps.md)<`T`> |

## Returns

[`TemplateResult`](https://lit.dev/docs/api/templates/#TemplateResult)

## Examples

**Simple template (no props needed)**

```ts
import { html } from 'lit';
import type { LitStateDeclaration, RoutedLitTemplate } from 'lit-ui-router';

const HomeView: RoutedLitTemplate = () => html`<h1>Welcome Home</h1>`;

// Or inline in a state declaration:
const home: LitStateDeclaration = { name: 'home', url: '/', component: () => html`<h1>Home</h1>` };
```

**With route parameters**

```ts
import { html } from 'lit';
import type { RoutedLitTemplate } from 'lit-ui-router';

const UserView: RoutedLitTemplate = (props) => html`
  <h1>User: ${props?.transition?.params().id}</h1>
`;
```

**With resolved data (typed)**

```ts
import { html } from 'lit';
import type { RoutedLitTemplate } from 'lit-ui-router';

interface UserResolves { user: { name: string } }

const UserDetail: RoutedLitTemplate<UserResolves> = (props) => html`
  <h1>${props?.resolves?.user?.name}</h1>
`;
```