---
url: https://lit-ui-router.dev/api/reference/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:217](https://github.com/simshanith/lit-ui-router/blob/94983cdc3394e721dde003188282f6209606ba22/packages/lit-ui-router/src/interface.ts#L217)

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
const HomeView: RoutedLitTemplate = () => html`<h1>Welcome Home</h1>`;

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

**With route parameters**

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

**With resolved data (typed)**

```ts
interface UserResolves { user: { name: string } }

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