# Convert HTML to image in C#: PuppeteerSharp, Playwright or an API
> HTML to PNG in C# and .NET with PuppeteerSharp or Microsoft.Playwright, what Chromium needs in Docker, and the same image via HttpClient.
Published 2026-11-04 · https://shareglint.com/en/guides/html-to-image-csharp
To convert HTML to an image in C#, drive headless Chromium with **PuppeteerSharp** or **Microsoft.Playwright**: load the markup with `SetContentAsync(html)` and call `ScreenshotAsync` on the page or on one element. Both give you Chrome's real rendering — grid, gradients, web fonts — in about fifteen lines. The work is in deployment: Chromium is a few hundred megabytes with its own system dependencies and sandbox rules, which bites in containers. If you would rather not ship a browser, an HTML to image API takes the same job with one `HttpClient` call.
Every sample below was compiled and run on .NET 10: PuppeteerSharp 25.15.0 and Microsoft.Playwright 1.64.1 inside Microsoft's Playwright Noble image, the API call against a live server.
## The HTML
```csharp
// Card.cs
static class Card
{
public const string Html = """
Release notes · v2.4
HTML to image in C#, rendered by Chromium
""";
}
```
## PuppeteerSharp
```bash
dotnet add package PuppeteerSharp
```
```csharp
using PuppeteerSharp;
// Downloads a matching Chrome on first run, into the app's directory.
await new BrowserFetcher().DownloadAsync();
await using var browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
Headless = true,
// Docker's default seccomp profile blocks Chrome's sandbox. Drop it only
// for HTML you wrote yourself; for anyone else's HTML, fix the sandbox.
Args = new[] { "--no-sandbox" },
});
await using var page = await browser.NewPageAsync();
await page.SetViewportAsync(new ViewPortOptions { Width = 1200, Height = 630, DeviceScaleFactor = 2 });
await page.SetContentAsync(Card.Html, new SetContentOptions
{
WaitUntil = new[] { WaitUntilNavigation.Load },
Timeout = 15_000,
});
await page.EvaluateExpressionAsync("document.fonts.ready");
var card = await page.QuerySelectorAsync(".card");
await card.ScreenshotAsync("card.png"); // 2400×1260, the element only
byte[] jpeg = await page.ScreenshotDataAsync(new ScreenshotOptions
{
Type = ScreenshotType.Jpeg,
Quality = 85,
FullPage = true,
});
```
Two version notes. In PuppeteerSharp 25 the overload `SetContentAsync(string, NavigationOptions)` is obsolete — the compiler warns that "the networkidle0 and networkidle2 wait conditions never worked reliably with SetContent" — so use `SetContentOptions` as above. And `BrowserFetcher` saves the browser next to your binaries: on our first run it wrote about 670 MB (Chrome plus chrome-headless-shell) into the output directory and took about a minute. Download it at image build time, not on the first request. The [project README](https://github.com/hardkoded/puppeteer-sharp) shows the same fetch-launch-screenshot sequence.
## Microsoft.Playwright
```bash
dotnet add package Microsoft.Playwright
dotnet build
pwsh bin/Debug/net10.0/playwright.ps1 install chromium # match your target framework
```
```csharp
using Microsoft.Playwright;
using var playwright = await Playwright.CreateAsync();
await using var browser = await playwright.Chromium.LaunchAsync();
var page = await browser.NewPageAsync(new()
{
ViewportSize = new() { Width = 1200, Height = 630 },
DeviceScaleFactor = 2,
});
await page.SetContentAsync(Card.Html, new() { WaitUntil = WaitUntilState.Load });
await page.Locator(".card").ScreenshotAsync(new() { Path = "card.png" });
byte[] png = await page.ScreenshotAsync(new()
{
Clip = new() { X = 0, Y = 0, Width = 600, Height = 315 },
OmitBackground = true, // transparent where the page paints nothing
});
```
Playwright needs no `--no-sandbox`, because its `chromiumSandbox` launch option [defaults to false](https://playwright.dev/docs/api/class-browsertype) — which also means Chromium runs unsandboxed unless you turn it on. The browsers live outside your build output (`playwright.ps1 install`, see the [.NET install docs](https://playwright.dev/dotnet/docs/intro)).
## Chromium in containers
PuppeteerSharp failed twice for us before it worked, in ways you will meet in production:
- **Running as root.** PuppeteerSharp in a container as root: "Running as root without --no-sandbox is not supported."
- **No usable sandbox.** As a normal user, Docker's default seccomp profile blocked Chrome's sandbox ("No usable sandbox!"). Microsoft's [Playwright Docker guidance](https://playwright.dev/dotnet/docs/docker): for trusted pages root is acceptable; for pages you do not control, run as a separate user with a seccomp profile that enables the sandbox.
- **Libraries and fonts.** Chromium needs dozens of shared libraries and real fonts, including emoji and CJK if your text has them. Microsoft publishes `mcr.microsoft.com/playwright/dotnet:v1.64.1-noble` with everything installed; pin the tag to your package version, or Playwright cannot find its browser. Alpine is not supported (musl, not glibc).
- **Flags.** The same page recommends `--ipc=host` (Chromium can run out of shared memory) and `--init` (zombie processes).
Then the usual browser operations: keep one browser alive and open a page per render, cap concurrent pages, time out every render, restart the browser now and then. If users supply the HTML, block outbound requests (`page.RouteAsync` in Playwright, request interception in PuppeteerSharp) so the markup cannot reach internal addresses.
## The same image from an API with HttpClient
An [HTML to image API](https://shareglint.com/en/html-to-image) removes Chromium from your deployment. With Shareglint you save the HTML and CSS once as a template with named fields, then each image is one request with the values:
```csharp
using System.Net.Http.Headers;
using System.Net.Http.Json;
using var http = new HttpClient
{
BaseAddress = new Uri("https://shareglint.com/v1/"), // trailing slash matters
Timeout = TimeSpan.FromSeconds(60),
};
http.DefaultRequestHeaders.Authorization =
new AuthenticationHeaderValue("Bearer", Environment.GetEnvironmentVariable("IMAGE_API_KEY"));
// 1. Save the template once (a deploy step or a migration).
var created = await http.PostAsJsonAsync("templates", new
{
name = "Article card",
slug = "article-card",
width = 1200,
height = 630,
fields = new[] { "kicker", "title", "author" },
html = """{{ kicker }}
{{ title }}
{{ author }}