HtmlCssToImage.Blazor 0.0.9

.NET 9.0 This package targets .NET 9.0. The package is compatible with this framework or higher. 
dotnet add package HtmlCssToImage.Blazor --version 0.0.9
                    


                    

                
NuGet\Install-Package HtmlCssToImage.Blazor -Version 0.0.9
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="HtmlCssToImage.Blazor" Version="0.0.9" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="HtmlCssToImage.Blazor" Version="0.0.9" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="HtmlCssToImage.Blazor" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add HtmlCssToImage.Blazor --version 0.0.9
                    


                    

                
#r "nuget: HtmlCssToImage.Blazor, 0.0.9"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package HtmlCssToImage.Blazor@0.0.9
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=HtmlCssToImage.Blazor&version=0.0.9
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=HtmlCssToImage.Blazor&version=0.0.9
                    


                            Install as a Cake Tool

HTML/CSS to Image

.NET / C# Client - Blazor Integration

HCTI Logo

This package provides Blazor integration for generating Open Graph meta tags using the HtmlCssToImage client.

NuGet Version

Getting Started

Installation

Add the package to your project:

dotnet add package HtmlCssToImage.Blazor

Configuration

You'll also need to register the IHtmlCssToImageClient in your application's startup (usually Program.cs or Startup.cs):

builder.Services.AddHtmlCssToImage("api_id", "api_key");

Refer to the HtmlCssToImage.DependencyInjection docs for more details on configuring the client.

Setup

In your App.razor you need to add a HCTIOutlet to your head tag to include the generated meta tags on all pages:

<head>
 <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <base href="/"/>
    
    <ImportMap/>
    <HeadOutlet/>
    <HCTIOutlet AdditionalMetaTypes="@(["twitter:image"])"></HCTIOutlet>
</head>

You can specify additional meta types to generate automatically by passing them to the HCTIOutlet component in the AdditionalMetaTypes parameter. By default, og:image will be generated. You can also specify them on an individual basis.

Blazor Components

There are 2 available components, to inject meta tags for your pages.

HCTI_Templated_OgMetaTag

Use the HCTI_Templated_OgMetaTag<T> component to generate OG meta tags using a HCTI template.

Parameters
Parameter Required Description
TemplateId ✅ The ID of the template to use.
TemplateValues ✅ A JSON-serializable object that will serve as the template_values in the request
TypeInfo A System.Text.Json.JsonTypeInfo<T> instance that will be used to serialize TemplateValues
JsonSerializerOptions A System.Text.Json.JsonSerializerOptions instance that will be used to serialize TemplateValues if provided
TemplateVersion An optional version of the template to use, if not specified, the latest version will be used
OgMetaType The type of meta tag to generate, such as twitter:image. When not specified, og:image will be used.
Template Values

When providing TemplateValues, your object must be serializable to JSON. If you don't want to provide an existing class or create a dedicated one, a System.Text.Json.Nodes.JsonObject can be provided instead.

If you are using a custom class and care about performance/AOT or just want to control serialization, you can provide either a JsonSerializerOptions instance or JsonTypeInfo<T>. The TypeInfo parameter will be used if provided.

HCTI_Url_OgMetaTag

Use the HCTI_Url_OgMetaTag component to generate an OG meta tag with a URL-generating image request. This tag is handy if you want to use existing styling / razor templates etc as your image source.

Parameters
Parameter Required Description
ImageRequest ✅ An instance of HtmlCssToImage.Models.Requests.CreateUrlImageRequest
OgMetaType The type of meta tag to generate, such as twitter:image. When not specified, og:image will be used.
Image Request

The ImageRequest parameter must be an instance of HtmlCssToImage.Models.Requests.CreateUrlImageRequest . The options will be used to generate a create-and-render request url. All options that are provided will be URL-encoded and included in the hmac signature except for pdf_options which is not currently supported in create-and-render.

Examples

Check out the Sample Project for a full example implementation.

Other Notes

  • You can use multiple tag helpers on the same page to define different meta tags like og:image and twitter:image
  • You must include the HCTIOutlet in your head tag to ensure the meta tags are generated on all pages.
  • It is best to keep the TemplateValues / ImageRequest parameters as simple as possible to avoid unnecessary complexity and potentially large urls.
  • Your generated urls will be signed with your API Key & ID, so if you change them, your meta tags will generate different urls.
  • If you are interested in using the HCTI API directly to generate & store your images, check out the HtmlCssToImage Client docs

Check out the HTML/CSS To Image Docs for more details on the API's capabilities.

Get started for free at htmlcsstoimage.com.

Product Compatible and additional computed target framework versions.
.NET net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
0.0.9 40 1/9/2026
0.0.8 35 1/7/2026
0.0.7 39 1/6/2026
0.0.6 38 1/6/2026
0.0.5 36 1/6/2026
0.0.4 35 1/6/2026