This repo contains a .NET client for the HTML/CSS to Image API, allowing you to generate images from HTML/CSS content directly from your .NET applications, as well as helper packages for integrating with ASP.NET Core and Blazor.
dotnet add package HtmlCssToImagevar options = new HtmlCssToImageOptions("api-id", "api-key");
var http = new HttpClient();
var client = new HtmlCssToImageClient(http, options);You can also load the credentials from HCTI_API_ID and HCTI_API_KEY:
var options = HtmlCssToImageOptions.FromEnvironmentVariables();
var http = new HttpClient();
var client = new HtmlCssToImageClient(http, options);Pass custom variable names when your application uses different names:
var options = HtmlCssToImageOptions.FromEnvironmentVariables(
"MY_HCTI_API_ID",
"MY_HCTI_API_KEY");var html_request = new CreateHtmlCssImageRequest()
{
Html = "<h1>Hello World</h1>",
Css = "h1 { color: green; }",
ViewportWidth = 400,
ViewportHeight = 200
};
using var html_image = await client.CreateImageAsync(html_request);
if(html_image.Success)
{
Console.WriteLine(html_image.Response.Url);
}else{
Console.WriteLine(html_image.ErrorDetails.Message);
}Check out the package READMEs for more details on integrating:
| Package | Description | Readme | Nuget |
|---|---|---|---|
| HtmlCssToImage | Core library for working with the API |  |
 |
| HtmlCssToImage.DependencyInjection | Dependency injection helpers for ASP.NET Core | |
 |
| HtmlCssToImage.Blazor | Blazor component for generating Open Graph image meta tags | |
 |
| HtmlCssToImage.TagHelpers | ASP.NET Core TagHelpers for generating Open Graph image meta tags | |
 |
Important
Check out the HTML/CSS To Image Docs for more details on the API's capabilities.
Tip
Get started for free at htmlcsstoimage.com.
Create images from one or more templates with shared defaults and ordered variations:
using System.Text.Json.Nodes;
using HtmlCssToImage.Models;
using HtmlCssToImage.Models.Requests;
using var result = await client.CreateTemplatedImageBatchAsync(new CreateTemplatedImageBatchRequest
{
DefaultOptions = new() { TemplateId = "t-card", TemplateVersion = 3, Format = RenderImageFormat.WEBP },
Variations =
[
new() { TemplateValues = new JsonObject { ["title"] = "First" } },
new() { TemplateId = "t-other", TemplateValues = new JsonObject { ["title"] = "Second" } }
]
});Omitted fields inherit defaults. Supplying a template ID resets the inherited version; omit its version to use latest. Template value objects merge recursively on the API; arrays, scalars, and explicit null values replace defaults. Results preserve input order and identical images reuse existing assets. Each merged values object must be nonempty and satisfy its template's required variables.
See the API reference for plan limits and examples.
