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 !.
npm i fastify fastify-htmlimport fastify from 'fastify'
import fastifyHtml from 'fastify-html'
const app = fastify()
await app.register(fastifyHtml)
app.addLayout(function (inner, reply) {
return app.html`
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<!-- Prefix expressions with ! if they contain safe HTML -->
!${inner}
</body>
</html>
`
}, { skipOnHeader: 'hx-request' })
app.get('/', async (req, reply) => {
const name = req.query.name || 'World'
return reply.html`<h1>Hello ${name}</h1>`
})
app.get('/complex-response/:page', async (req, reply) => {
const name = req.query.name || 'World'
const userInfo = await getInfo(name) || {}
const demand = req.query.demand
return reply.html`
<div>
Welcome, ${name}.
<br /><br />
User information:
<br />
<!-- Don't forget to prefix expressions that contain other html tags -->
!${Object.keys(userInfo).map(
(key) => app.html`
${key}: <b>${userInfo[key]}</b>
<br />
`
)}
<br />
!${
demand
? app.html`
<p>Your demand: ${demand}</p>
`
: ""
}
</div>
`
})
await app.listen({ port: 3000 })Encapsulation is supported and respected for layouts, meaning that addLayout
calls will be not exposed to the parent plugin, like the following:
import fastify from 'fastify'
import fastifyHtml from 'fastify-html'
const app = fastify()
await app.register(fastifyHtml)
app.addLayout(function (inner, reply) {
return app.html`
<!DOCTYPE html>
<html lang="en">
<body>
!${inner}
</body>
</html>
`
})
app.get('/', async (req, reply) => {
const name = req.query.name || 'World'
strictEqual(reply.html`<h1>Hello ${name}</h1>`, reply)
return reply
})
app.register(async function (app) {
app.addLayout(function (inner) {
return app.html`
<i>
!${inner}
</i>
`
})
app.get('/nested', async (req, reply) => {
const name = req.query.name || 'World'
return reply.html`<h1>Nested ${name}</h1>`
})
})
await app.listen({ port: 3000 })MIT
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent