# Templating
The FhyTS framework provides a simple templating system for creating HTML pages. This system allows you to separate the view from the application logic, making the code more modular and easier to maintain.
## Views Directory Structure
```bash
app/views/
├── layouts/
│ └── main.ejs # Main layout template
└── page.ejs # Content page template
```
* **layouts/main.ejs**: A base template containing common HTML structures, such as the , , and tags.
* **page.ejs**: A template for the page content that is rendered into the layout.
## Layout Template ( **main.ejs** )
```html
<%= title || 'FhyTS' %>
<%- content %>
```
* **<%= title %>** is used to safely insert the value of the title variable (HTML escape).
* **<%- content %>** is used to insert HTML content without escaping, allowing rendering of the page template within the layout.
## Controller Using Views
```javascript
import { Controller, Request, Response, Views } from 'fhyts';
export class PageController extends Controller {
private views = new Views();
async index(req: Request, res: Response) {
// Renders the 'page' template with the page title data
const page = this.views.render('page', {
title: 'Pages Example'
});
// Sends rendered HTML with status 200
return res.status(200).html(page);
}
}
```
* **new Views()** creates an instance to access the templating render function.
* **render('page', { title: 'Pages Example' })** processes the views/page.ejs template file with the title variable data.
* **res.status(200).html(page)** sends the rendered result as an HTML response.
## Next
Continue to the [Models](#models) section to start managing the data structure and logic in your application.