# fastify-html Generate html in the most natural Fastify way, using template tags, layouts and the plugin system. Template expressions are escaped by default unless they are prefixed with `!`. ## Install ```bash npm i fastify fastify-html ``` ## Usage ```js import fastify from 'fastify' import fastifyHtml from 'fastify-html' const app = fastify() await app.register(fastifyHtml) app.addLayout(function (inner, reply) { return app.html` !${inner} ` }, { skipOnHeader: 'hx-request' }) app.get('/', async (req, reply) => { const name = req.query.name || 'World' return reply.html`

Hello ${name}

` }) app.get('/complex-response/:page', async (req, reply) => { const name = req.query.name || 'World' const userInfo = await getUserInfo(name) || {} const demand = req.query.demand return reply.html`

Welcome, ${name}.

User information:
!${Object.keys(userInfo).map( (key) => app.html` ${key}: ${userInfo[key]}
` )}
!${ demand ? app.html`

Your demand: ${demand}

` : "" }

` }) await app.listen({ port: 3000 }) async function getUserInfo(name) { return { age: 25, location: "Earth" }; } ``` ## Async Mode Usage ```js import fastify from 'fastify' import fastifyHtml from 'fastify-html' import { createReadStream } from 'node:fs' const app = fastify() await app.register(fastifyHtml, { async: true }) app.addLayout(function (inner, reply) { return app.html` !${inner} ` }, { skipOnHeader: 'hx-request' }) app.get('/:name', async (req, reply) => { return reply.html`

Welcome, ${req.params.name}.

User information:
!${getUserInfoPromise(req.params.name)}

File content:
!${createReadStream('./path/to/file.txt')}

` }) await app.listen({ port: 3000 }) async function getUserInfoPromise(name) { return new Promise((resolve) => { setTimeout(() => { resolve({ age: 25, location: "Earth" }); }, 1000); }); } ``` ### Plugins Encapsulation is supported and respected for layouts, meaning that `addLayout` calls will be not exposed to the parent plugin, like the following: ```js import fastify from 'fastify' import fastifyHtml from 'fastify-html' const app = fastify() await app.register(fastifyHtml) app.addLayout(function (inner, reply) { return app.html` !${inner} ` }) app.get('/', async (req, reply) => { const name = req.query.name || 'World' strictEqual(reply.html`

Hello ${name}

`, reply) return reply }) app.register(async function (app) { app.addLayout(function (inner) { return app.html` !${inner} ` }) app.get('/nested', async (req, reply) => { const name = req.query.name || 'World' return reply.html`

Nested ${name}

` }) }) await app.listen({ port: 3000 }) ``` ## Options - `async`: Enables async mode for handling asynchronous template expressions. Set this option to true when registering the fastify-html plugin to take advantage of features like promise resolution, stream handling, and async generator support. ## License MIT