How to return HTML from a Netlify function
Why returning HTML from a Netlify function is useful
When you start building with Netlify Functions, most tutorials focus on returning JSON or plain text. That makes sense, because functions are often used as APIs.
But after a while, you may notice situations where plain text is not enough. You might want to open a function URL in the browser and see a real page. Maybe you are testing something quickly, building a tiny internal tool, or showing a simple success or error screen.
Netlify functions can do this very well. They can return full HTML pages, just like a traditional server. You only need to configure the response correctly.
What happens if you return text only
A very basic Netlify function written in TypeScript often looks like this:
import { Handler } from "@netlify/functions"
export const handler: Handler = async () => {
return {
statusCode: 200,
body: "Hello from Netlify"
}
}
If you visit this function in the browser, you will only see plain text. Even if you add HTML tags inside the body, the browser will not render them as a page.
This happens because the browser does not know that the response should be treated as HTML.
The important part: telling the browser it is HTML
Browsers decide how to display a response based on headers. If you want HTML to be rendered, the response must include a Content-Type header with the value text/html.
Without this header, the browser assumes the response is plain text. With it, the browser renders the response as a web page.
This rule applies everywhere, including Netlify Functions.
Returning HTML from a Netlify function in TypeScript
Here is a complete TypeScript Netlify function that returns HTML and renders correctly in the browser:
import { Handler } from "@netlify/functions"
export const handler: Handler = async () => {
return {
statusCode: 200,
headers: {
"Content-Type": "text/html; charset=utf-8"
},
body: `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Netlify Function HTML</title>
</head>
<body style="margin:0; background:#020617; color:#f8fafc; font-family: system-ui, sans-serif;">
<main style="min-height:100vh; display:flex; align-items:center; justify-content:center;">
<section>
<h1>HTML from a Netlify Function</h1>
<p>This page is rendered directly by a Netlify serverless function.</p>
</section>
</main>
</body>
</html>
`
}
}
When you deploy this to Netlify and open the function URL, the browser will display a styled HTML page instead of raw text.
Why this works so well on Netlify
Netlify Functions follow standard HTTP behavior. Even though they are serverless, they still return normal HTTP responses.
Once you set the correct headers, the browser treats the function like any other web server. This makes Netlify functions surprisingly flexible.
You can use them not only for APIs, but also for small pages that load fast and require no frontend framework.
Common use cases for HTML responses in Netlify functions
Returning HTML from a Netlify function is often used for:
- Login or authentication callback pages
- Simple success or error messages
- Internal tools with no frontend build step
- Debug pages during development
- SEO friendly utility pages on a Netlify site
For small features, this approach can save a lot of time and complexity.
Conclusion
Returning HTML from a Netlify function in TypeScript is straightforward once you know what the browser expects.
The key points are simple:
- Use a Netlify function written in TypeScript
- Set the Content-Type header to text/html
- Return valid HTML as the response body
With this setup, your Netlify functions can behave like small server rendered pages. This makes Netlify an even more powerful platform for building simple, fast, and practical web features.
Manage Netlify on the go
Download Netli.fyi and monitor your sites, check deploys, and manage your projects from anywhere.
