### Live Example Source: https://docs.htmlcsstoimage.com/guides/using-google-fonts An example demonstrating how to load multiple Google Fonts (Montserrat and Roboto) simultaneously. ```APIDOC ## Live Example This example loads both Montserrat and Roboto fonts: ```json { "google_fonts": "Montserrat|Roboto", "html": "
Hello World!
", "css": ".text { font-family: 'Montserrat'; }" } ``` ``` -------------------------------- ### Install official npm client Source: https://docs.htmlcsstoimage.com/example-code/typescript Command to install the official typed SDK for the HTML/CSS to Image service. ```bash npm install @html-css-to-image/client ``` -------------------------------- ### Setup for Zed Source: https://docs.htmlcsstoimage.com/integrations/mcp Instructions for setting up the MCP server in Zed. ```APIDOC ## Setup for Zed Zed is a high-performance code editor with AI features. Add the MCP server to your Zed settings (`~/.config/zed/settings.json`): ```json { "context_servers": { "hcti": { "command": "npx", "args": ["-y", "mcp-remote", "https://mcp.hcti.io"] } } } ``` The first time you use the server, you’ll be prompted to authorize access via your browser. ``` -------------------------------- ### Usage Examples Source: https://docs.htmlcsstoimage.com/guides/using-google-fonts Examples demonstrating how to use the `google_fonts` parameter for single and multiple font loading. ```APIDOC ### Single Font ```json { "google_fonts": "Roboto", "html": "
Hello World
", "css": ".text { font-family: 'Roboto', sans-serif; }" } ``` ``` ```APIDOC ### Multiple Fonts ```json { "google_fonts": "Open Sans|Roboto|Montserrat", "html": "
Title
Content
", "css": ".heading { font-family: 'Montserrat', sans-serif; }\n.body { font-family: 'Open Sans', sans-serif; }" } ``` ``` -------------------------------- ### Setup for Cursor Source: https://docs.htmlcsstoimage.com/integrations/mcp Instructions for setting up the MCP server in the Cursor IDE. ```APIDOC ## Setup for Cursor Click the button below to automatically install the HTML/CSS to Image MCP server in Cursor: Or manually add the following configuration to your `.cursor/mcp.json` file: ```json { "mcpServers": { "hcti": { "type": "http", "url": "https://mcp.hcti.io" } } } ``` Restart Cursor after saving the configuration. The first time you use the server, you’ll be prompted to authorize access via your browser. ``` -------------------------------- ### Install HtmlCssToImage NuGet Package Source: https://docs.htmlcsstoimage.com/example-code/c Use the dotnet CLI or Package Manager Console to install the core client library for the HTML/CSS to Image API. ```csharp dotnet add package HtmlCssToImage ``` ```csharp Install-Package HtmlCssToImage ``` -------------------------------- ### cURL Example Source: https://docs.htmlcsstoimage.com/example-code A quick reference example using cURL to test the API. ```APIDOC ## cURL Example ### Description This example demonstrates how to use cURL to make a POST request to the HTML/CSS to Image API. ### Method POST ### Endpoint `https://hcti.io/v1/image` ### Request Example ```bash curl -X POST https://hcti.io/v1/image \ -u 'your-user-id:your-api-key' \ -H 'Content-Type: application/json' \ -d '{"html": "

Hello!

"}' ``` ``` -------------------------------- ### Setup for Claude Desktop Source: https://docs.htmlcsstoimage.com/integrations/mcp Instructions for setting up the MCP server in Claude Desktop. ```APIDOC ## Setup for Claude Desktop Claude Desktop (the standalone app) also supports MCP servers. Edit your Claude Desktop configuration file: **macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json` **Windows:** `%APPDATA%\Claude\claude_desktop_config.json` Add the following configuration: ```json { "mcpServers": { "hcti": { "command": "npx", "args": ["-y", "mcp-remote", "https://mcp.hcti.io"] } } } ``` Restart Claude Desktop after saving the configuration. The first time you use the server, you’ll be prompted to authorize access via your browser. ``` -------------------------------- ### HTML Structure Example Source: https://docs.htmlcsstoimage.com/parameters/selector This is an example of an HTML structure that can be used with the selector parameter. ```html
This is an example
``` -------------------------------- ### Setup for Windsurf Source: https://docs.htmlcsstoimage.com/integrations/mcp Instructions for setting up the MCP server in Windsurf (by Codeium). ```APIDOC ## Setup for Windsurf Windsurf (by Codeium) supports MCP servers. Add the following to your `~/.codeium/windsurf/mcp_config.json` file: ```json { "mcpServers": { "hcti": { "serverUrl": "https://mcp.hcti.io" } } } ``` Restart Windsurf after updating the configuration. The first time you use the server, you’ll be prompted to authorize access via your browser. ``` -------------------------------- ### Example API Response (JSON) Source: https://docs.htmlcsstoimage.com/getting-started/creating-an-image This is an example of a successful API response (HTTP 200 OK) containing image data aggregated by hour, day, and month. ```json { "data": { "hour": { "2024-03-14T14:00:00Z": 54, "2024-03-14T15:00:00Z": 56, "2024-03-14T16:00:00Z": 56, "2024-03-14T17:00:00Z": 57, "2024-03-14T18:00:00Z": 59, "2024-03-14T19:00:00Z": 55, "2024-03-14T20:00:00Z": 58, "2024-03-14T21:00:00Z": 54, "2024-03-14T22:00:00Z": 57, "2024-03-14T23:00:00Z": 57, "2024-03-15T00:00:00Z": 60, "2024-03-15T01:00:00Z": 56, "2024-03-15T02:00:00Z": 56, "2024-03-15T03:00:00Z": 55, "2024-03-15T04:00:00Z": 57, "2024-03-15T05:00:00Z": 55, "2024-03-15T06:00:00Z": 55, "2024-03-15T07:00:00Z": 56, "2024-03-15T08:00:00Z": 55, "2024-03-15T09:00:00Z": 60, "2024-03-15T10:00:00Z": 62, "2024-03-15T11:00:00Z": 60, "2024-03-15T12:00:00Z": 62, "2024-03-15T13:00:00Z": 62, "2024-03-15T14:00:00Z": 62, "2024-03-15T15:00:00Z": 61, "2024-03-15T16:00:00Z": 61, "2024-03-15T17:00:00Z": 60, "2024-03-15T18:00:00Z": 61, "2024-03-15T19:00:00Z": 64, "2024-03-15T20:00:00Z": 61, "2024-03-15T21:00:00Z": 61, "2024-03-15T22:00:00Z": 62, "2024-03-15T23:00:00Z": 63, "2024-03-16T00:00:00Z": 62, "2024-03-16T01:00:00Z": 62, "2024-03-16T02:00:00Z": 60, "2024-03-16T03:00:00Z": 60, "2024-03-16T04:00:00Z": 62, "2024-03-16T05:00:00Z": 53, "2024-03-16T06:00:00Z": 60, "2024-03-16T07:00:00Z": 60, "2024-03-16T08:00:00Z": 60, "2024-03-16T09:00:00Z": 60, "2024-03-16T10:00:00Z": 60, "2024-03-16T11:00:00Z": 60, "2024-03-16T12:00:00Z": 68, "2024-03-16T13:00:00Z": 62, "2024-03-16T14:00:00Z": 61, "2024-03-16T15:00:00Z": 60, "2024-03-16T16:00:00Z": 60, "2024-03-16T17:00:00Z": 65, "2024-03-16T18:00:00Z": 63, "2024-03-16T19:00:00Z": 60, "2024-03-16T20:00:00Z": 60, "2024-03-16T21:00:00Z": 60, "2024-03-16T22:00:00Z": 62, "2024-03-16T23:00:00Z": 61, "2024-03-17T00:00:00Z": 60, "2024-03-17T01:00:00Z": 60, "2024-03-17T02:00:00Z": 65, "2024-03-17T03:00:00Z": 63, "2024-03-17T04:00:00Z": 62, "2024-03-17T05:00:00Z": 63, "2024-03-17T06:00:00Z": 63, "2024-03-17T07:00:00Z": 64, "2024-03-17T08:00:00Z": 63, "2024-03-17T09:00:00Z": 64, "2024-03-17T10:00:00Z": 60, "2024-03-17T11:00:00Z": 61, "2024-03-17T12:00:00Z": 61, "2024-03-17T13:00:00Z": 29 }, "day": { "2024-01-19T00:00:00Z": 1569, "2024-01-20T00:00:00Z": 1722, "2024-01-21T00:00:00Z": 1604, "2024-01-22T00:00:00Z": 1560, "2024-01-23T00:00:00Z": 1571, "2024-01-24T00:00:00Z": 1627, "2024-01-25T00:00:00Z": 1660, "2024-01-26T00:00:00Z": 1527, "2024-01-27T00:00:00Z": 1588, "2024-01-28T00:00:00Z": 1549, "2024-01-29T00:00:00Z": 1523, "2024-01-30T00:00:00Z": 1662, "2024-01-31T00:00:00Z": 1556, "2024-02-01T00:00:00Z": 1585, "2024-02-02T00:00:00Z": 1539, "2024-02-03T00:00:00Z": 1556, "2024-02-04T00:00:00Z": 1487, "2024-02-05T00:00:00Z": 1580, "2024-02-06T00:00:00Z": 1498, "2024-02-07T00:00:00Z": 1485, "2024-02-08T00:00:00Z": 1474, "2024-02-09T00:00:00Z": 1487, "2024-02-10T00:00:00Z": 1513, "2024-02-11T00:00:00Z": 1477, "2024-02-12T00:00:00Z": 1464, "2024-02-13T00:00:00Z": 1458, "2024-02-14T00:00:00Z": 1452, "2024-02-15T00:00:00Z": 1477, "2024-02-16T00:00:00Z": 1471, "2024-02-17T00:00:00Z": 1482, "2024-02-18T00:00:00Z": 1499, "2024-02-19T00:00:00Z": 1504, "2024-02-20T00:00:00Z": 1530, "2024-02-21T00:00:00Z": 1502, "2024-02-22T00:00:00Z": 1501, "2024-02-23T00:00:00Z": 1486, "2024-02-24T00:00:00Z": 1475, "2024-02-25T00:00:00Z": 1469, "2024-02-26T00:00:00Z": 1460, "2024-02-27T00:00:00Z": 1451, "2024-02-28T00:00:00Z": 1443, "2024-02-29T00:00:00Z": 1447, "2024-03-01T00:00:00Z": 1443, "2024-03-02T00:00:00Z": 1455, "2024-03-03T00:00:00Z": 1473, "2024-03-04T00:00:00Z": 1482, "2024-03-05T00:00:00Z": 1463, "2024-03-06T00:00:00Z": 1472, "2024-03-07T00:00:00Z": 1452, "2024-03-08T00:00:00Z": 1469, "2024-03-09T00:00:00Z": 1478, "2024-03-10T00:00:00Z": 1494, "2024-03-11T00:00:00Z": 1469, "2024-03-12T00:00:00Z": 1471, "2024-03-13T00:00:00Z": 1465, "2024-03-14T00:00:00Z": 1462, "2024-03-15T00:00:00Z": 1336, "2024-03-16T00:00:00Z": 1427, "2024-03-17T00:00:00Z": 838 }, "month": { "2023-10-01T00:00:00Z": 44847, "2023-11-01T00:00:00Z": 44973, "2023-12-01T00:00:00Z": 43263, "2024-01-01T00:00:00Z": 59095, "2024-02-01T00:00:00Z": 56422, "2024-03-01T00:00:00Z": 50747 } }, "per_billing_period": [ { "total_images": 439 } ] } ``` -------------------------------- ### Install the Ruby Gem Source: https://docs.htmlcsstoimage.com/example-code/ruby Add the gem to your Gemfile to use the official client. ```ruby gem 'htmlcsstoimage-api' ``` -------------------------------- ### Live Font Loading Example Source: https://docs.htmlcsstoimage.com/advanced-examples/using-google-fonts A basic implementation demonstrating the loading of multiple fonts. ```json { "google_fonts": "Montserrat|Roboto", "html": "
Hello World!
", "css": ".text { font-family: 'Montserrat'; }" } ``` -------------------------------- ### Setup for Cline (VS Code) Source: https://docs.htmlcsstoimage.com/integrations/mcp Instructions for setting up the MCP server in Cline for VS Code. ```APIDOC ## Setup for Cline (VS Code) Cline is a popular autonomous coding agent for VS Code. To add the MCP server: 1. Open VS Code and go to **Cline Settings** 2. Navigate to **MCP Servers** 3. Click **Add Server** and configure: ```json { "hcti": { "url": "https://mcp.hcti.io" } } ``` Alternatively, edit your Cline MCP settings file directly at `~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json`. The first time you use the server, you’ll be prompted to authorize access via your browser. ``` -------------------------------- ### Example API Response for Image Creation Source: https://docs.htmlcsstoimage.com/getting-started/creating-an-image This is an example of a successful HTTP 200 OK response when creating images. It includes image IDs, URLs, creation timestamps, and pagination details. ```json { "images": [ { "id": "be4c5118-fe19-462b-a49e-48cf72697a9d", "url": "https://hcti.io/v1/image/be4c5118-fe19-462b-a49e-48cf72697a9d", "created_at": "2024-03-15T10:30:00Z" }, { "id": "a3ab2ab2-906e-4b5c-a88d-41a1c3f3779e", "url": "https://hcti.io/v1/image/a3ab2ab2-906e-4b5c-a88d-41a1c3f3779e", "created_at": "2024-03-14T08:15:00Z" } ], "next_page_token": "eyJsYXN0X2lkIjoiYTNhYjJhYjItOTA2ZS00YjVjLWE4OGQtNDFhMWMzZjM3NzllIn0=", "has_next_page": true } ``` -------------------------------- ### Setup for Claude Code Source: https://docs.htmlcsstoimage.com/integrations/mcp Instructions for setting up the MCP server with Claude Code. ```APIDOC ## Setup for Claude Code To use the MCP server with Claude Code, run the following command: ```bash claude mcp add hcti --transport http https://mcp.hcti.io ``` To verify the server was added: ```bash claude mcp list ``` The first time you use the server, you’ll be prompted to authorize access via your browser. ``` -------------------------------- ### Image Format URLs Source: https://docs.htmlcsstoimage.com/getting-started/creating-an-image Examples of image URLs with different file extensions. ```text https://hcti.io/v1/image/a3ab2ab2-906e-4b5c-a88d-41a1c3f3779e.png ``` ```text https://hcti.io/v1/image/a3ab2ab2-906e-4b5c-a88d-41a1c3f3779e.jpg ``` ```text https://hcti.io/v1/image/a3ab2ab2-906e-4b5c-a88d-41a1c3f3779e.webp ``` ```text https://hcti.io/v1/image/a3ab2ab2-906e-4b5c-a88d-41a1c3f3779e.pdf ``` -------------------------------- ### Generate an image with advanced parameters Source: https://docs.htmlcsstoimage.com/example-code/curl Example using additional parameters like ms_delay and selector. Ensure each line ends with a backslash. ```bash # Replace UserID and APIKey with your credentials from the dashboard https://htmlcsstoimage.com/dashboard curl -X POST https://hcti.io/v1/image -u 'UserID:APIKey'\ -d html="
Pong ✅
" \ -d css=".ping { padding: 20px; font-family: 'sans-serif'; }" \ -d ms_delay=1000 \ -d selector=".ping" ``` -------------------------------- ### Standard ms_delay Usage (1 credit) Source: https://docs.htmlcsstoimage.com/parameters/ms_delay Use this for standard scenarios where a small delay is sufficient. This example uses 3000ms delay and consumes 1 credit. ```json { "html": "
Your content
", "ms_delay": 3000 } ``` -------------------------------- ### List template versions Source: https://docs.htmlcsstoimage.com/getting-started/templates Retrieve all versions of a specific template via a GET request. Authentication is required. ```http get https://hcti.io**/v1/template/:template_id** ``` -------------------------------- ### Social Media Card - Good Approach (Sharp) Source: https://docs.htmlcsstoimage.com/guides/debugging/blurry-images This example shows the correct method for creating social media cards. By using a source image with double the required display dimensions (`avatar-300x300.jpg` for a `150x150px` display), the image remains sharp on all screen types. ```html
``` -------------------------------- ### Increased ms_delay Usage (2 credits) Source: https://docs.htmlcsstoimage.com/parameters/ms_delay This example demonstrates a delay of 8000ms, suitable for pages with more assets, consuming 2 credits. ```json { "html": "
Your content
", "ms_delay": 8000 } ``` -------------------------------- ### Capture Landing Pages for Review Source: https://docs.htmlcsstoimage.com/parameters/full_screen Screenshot entire landing pages for design review or competitive analysis. This example uses `device_scale` and `block_consent_banners` for enhanced capture quality. ```json { "url": "https://example.com", "full_screen": true, "device_scale": 2, "block_consent_banners": true } ``` -------------------------------- ### HTML Download Link Source: https://docs.htmlcsstoimage.com/parameters/dl Example of how to create an HTML anchor tag to provide a direct download link for a generated image. ```HTML Download Image ``` -------------------------------- ### Constructing a Signed URL Source: https://docs.htmlcsstoimage.com/getting-started/create-and-render Example of a final URL structure using a computed HMAC token. ```text https://hcti.io/v1/image/create-and-render/your-api-id-here/a659c427bc8eb94c32a3ca9cf92a1ad873da2b36be436f3084b8b76eaa6e7b65/png?html=
Hello
``` -------------------------------- ### List templates Source: https://docs.htmlcsstoimage.com/getting-started/templates Retrieve a list of all templates via a GET request. Authentication is required. ```http get https://hcti.io**/v1/template** ``` -------------------------------- ### Maximum ms_delay Usage (4 credits) Source: https://docs.htmlcsstoimage.com/parameters/ms_delay This example shows the maximum allowed delay of 20000ms for complex applications, consuming 4 credits. ```json { "html": "
Your content
", "ms_delay": 20000 } ``` -------------------------------- ### Template list response Source: https://docs.htmlcsstoimage.com/getting-started/templates Example response structure for a successful template list request. ```text STATUS: 200 OK ``` ```json { "data": [ { "css": null, "created_at": "2020-07-19T17:16:43.987+00:00", "description": null, "device_scale": 2.0, "google_fonts": null, "html": "
\n

\n\n\n\n
", "id": "t-5ff7b966-d32c-4143-bda3-57a440e97a80", "max_wait_ms": null, "ms_delay": 1500, "name": null, "render_when_ready": null, "render_count": 142, "color_scheme": null, "timezone": null, "updated_at": "2020-07-19T17:16:43.987+00:00", "version": 1595179003987, "viewport_height": null, "viewport_width": null } ], "pagination": { "next_page_start": null } } ``` -------------------------------- ### Screenshot Documentation Pages Source: https://docs.htmlcsstoimage.com/parameters/full_screen Capture entire documentation pages for offline reference or archival. This example sets specific viewport dimensions, but the API will generate a larger image if the content exceeds the specified height. ```json { "url": "https://docs.example.com/api-reference", "full_screen": true, "viewport_width": 1200, "viewport_height": 1200 } ``` -------------------------------- ### Render Base64 to Image using HTML Source: https://docs.htmlcsstoimage.com/guides/advanced/base64 Use an `img` tag and set the `src` attribute to the base64 string of your image, prefixed with `data:image/png;base64,` or `data:image/jpg;base64,`. The base64 string is truncated in this example. ```html ``` -------------------------------- ### Add ASP.NET Core Dependency Injection Source: https://docs.htmlcsstoimage.com/example-code/c Install the HtmlCssToImage.DependencyInjection NuGet package for ASP.NET Core applications. Configure the service in Program.cs with your User ID and API Key. ```csharp dotnet add package HtmlCssToImage.DependencyInjection ``` ```csharp builder.Services.AddHtmlCssToImage(options => { options.UserId = "your-user-id"; options.ApiKey = "your-api-key"; }); ``` -------------------------------- ### Generate image with async/await and axios Source: https://docs.htmlcsstoimage.com/example-code/javascript Uses the axios package to perform an asynchronous POST request. Requires the axios library installed via npm. ```javascript const axios = require('axios'); async function createImage() { const payload = { html: "
Test
", css: "div { background-color: blue; }" }; let headers = { auth: { username: 'user-id', password: 'api-key' }, headers: { 'Content-Type': 'application/json' } } try { const response = await axios.post('https://hcti.io/v1/image', JSON.stringify(payload), headers); console.log(response.data.url); } catch (error) { console.error(error); } } createImage(); ``` -------------------------------- ### Social Media Card - Bad Approach (Blurry) Source: https://docs.htmlcsstoimage.com/guides/debugging/blurry-images This example demonstrates an incorrect approach for creating social media cards, where the embedded image's source resolution is insufficient for the display size, leading to blurriness on high-DPI screens. ```html
``` -------------------------------- ### Get Usage Data with cURL Source: https://docs.htmlcsstoimage.com/guides/account-usage Use this cURL command to fetch detailed usage statistics from the /v1/usage endpoint. Ensure you replace 'user-id' and 'api-key' with your actual credentials. ```bash curl -X GET https://hcti.io/v1/usage \ -u 'user-id:api-key' ``` -------------------------------- ### GET /v1/image/:image_id - Get Image Source: https://docs.htmlcsstoimage.com/getting-started/creating-an-image Retrieves a previously generated image using its unique ID. The returned URL provides access to the image, which is optimized and cached globally. ```APIDOC ## GET /v1/image/:image_id ### Description Retrieves a previously generated image using its unique ID. The image URL is permanent and globally cached. ### Method GET ### Endpoint https://hcti.io/v1/image/:image_id ### Parameters #### Path Parameters - **image_id** (String) - Required - The unique identifier of the image to retrieve. ### Response #### Success Response (200) - **url** (String) - The URL of the generated image. - **id** (String) - The unique identifier for the generated image. #### Response Example ```json { "url": "https://hcti.io/v1/image/be4c5118-fe19-462b-a49e-48cf72697a9d", "id": "be4c5118-fe19-462b-a49e-48cf72697a9d" } ``` ``` -------------------------------- ### Initialize the API Client Source: https://docs.htmlcsstoimage.com/example-code/ruby Configure the client using explicit credentials or environment variables. ```ruby require "htmlcsstoimage" # Retrieve your user id and api key from https://htmlcsstoimage.com/dashboard client = HTMLCSSToImage.new(user_id: "user-id", api_key: "api-key") ``` ```ruby client = HTMLCSSToImage.new ``` -------------------------------- ### GET /v1/template/:template_id Source: https://docs.htmlcsstoimage.com/getting-started/templates Retrieves all versions of a specific template. ```APIDOC ## GET /v1/template/:template_id ### Description Lists all available versions for a specific template ID. ### Method GET ### Endpoint https://hcti.io/v1/template/:template_id ### Parameters #### Path Parameters - **template_id** (String) - Required - The ID of the template. ``` -------------------------------- ### GET /v1/images Source: https://docs.htmlcsstoimage.com/getting-started/using-the-api Retrieves a paginated list of all images created by the account. ```APIDOC ## GET /v1/images ### Description Retrieve a list of all images created by your account with pagination support. ### Method GET ### Endpoint https://hcti.io/v1/images ### Parameters #### Query Parameters - **count** (Integer) - Optional - Number of images to return. Default 50, maximum 50. - **page_token** (String) - Optional - Token for pagination. ``` -------------------------------- ### GET /v1/template Source: https://docs.htmlcsstoimage.com/getting-started/templates Retrieves a list of all templates associated with the authenticated account. ```APIDOC ## GET /v1/template ### Description Lists all templates created by the user. ### Method GET ### Endpoint https://hcti.io/v1/template ### Response #### Success Response (200) - **data** (Array) - List of template objects - **pagination** (Object) - Pagination details #### Response Example { "data": [ { "id": "t-5ff7b966-d32c-4143-bda3-57a440e97a80", "render_count": 142, "version": 1595179003987 } ], "pagination": { "next_page_start": null } } ``` -------------------------------- ### Documentation screenshot configuration Source: https://docs.htmlcsstoimage.com/parameters/color_scheme Generate light-themed documentation screenshots. ```json { "url": "https://docs.example.com", "color_scheme": "light" } ``` -------------------------------- ### GET /v1/images Source: https://docs.htmlcsstoimage.com/getting-started/creating-an-image Retrieve a list of all images associated with your account, with support for pagination. ```APIDOC ## GET /v1/images ### Description Retrieve a list of all images created by your account. This endpoint supports pagination to manage large numbers of images. ### Method GET ### Endpoint `https://hcti.io/v1/images` ### Parameters #### Query Parameters - **count** (Integer) - The number of images to return per page. Default is 50, maximum is 50. - **page_token** (String) - A token for pagination. Use the `next_page_token` provided in the previous response to fetch the next page of results. ``` -------------------------------- ### Using color_scheme Parameter Source: https://docs.htmlcsstoimage.com/parameters/color_scheme Demonstrates how to use the `color_scheme` parameter to control light/dark mode rendering for screenshots. ```APIDOC ## Using color_scheme ### Description The `color_scheme` parameter allows you to explicitly set Chrome to render a page as if the user has selected either light or dark mode. This is particularly useful for websites that implement CSS using the `prefers-color-scheme` media query. ### Values - **`light`**: Renders the page as if the user prefers light mode. - **`dark`**: Renders the page as if the user prefers dark mode. ### When to Use - Capturing screenshots of websites that offer a dark mode. - Testing the appearance of your designs in both light and dark color schemes. - Ensuring consistent screenshot generation regardless of the user's system settings. - Creating distinct dark mode versions of your images. ### Example Usage #### cURL Request Example (Dark Mode) ```bash curl -X POST https://hcti.io/v1/image -u 'UserID:APIKey' \ --data-urlencode url="https://github.com" \ --data color_scheme=dark ``` #### JSON Request Example (Dark Mode) ```json { "url": "https://twitter.com", "color_scheme": "dark" } ``` #### HTML with Dark Mode Styles Example ```json { "html": "
Hello World
", "css": ".card { padding: 20px; } @media (prefers-color-scheme: dark) { .card { background: #1a1a1a; color: white; } }", "color_scheme": "dark" } ``` ### Common Use Cases #### Social Media Screenshots To generate consistent dark-themed screenshots for social platforms: ```json { "url": "https://twitter.com/username/status/123", "color_scheme": "dark", "device_scale": 2 } ``` #### Documentation Screenshots To generate both light and dark versions of documentation pages: ```json { "url": "https://docs.example.com", "color_scheme": "light" } ``` #### Design Testing To test how your HTML renders in both modes: ```json { "html": "
Content
", "css": "@media (prefers-color-scheme: dark) { .theme-aware { background: #000; color: #fff; } } @media (prefers-color-scheme: light) { .theme-aware { background: #fff; color: #000; } }", "color_scheme": "dark" } ``` ### Technical Details The `color_scheme` parameter emulates the CSS media feature `prefers-color-scheme`. When set, Chrome's rendering engine behaves as if the user has that specific color scheme preference, causing CSS rules within `@media (prefers-color-scheme: dark)` or `@media (prefers-color-scheme: light)` to apply accordingly. JavaScript checking `window.matchMedia('(prefers-color-scheme: dark)')` will also return the appropriate value. If a website does not support `prefers-color-scheme`, this parameter will not affect the output. ``` -------------------------------- ### API response status codes Source: https://docs.htmlcsstoimage.com/getting-started/creating-an-image Examples of HTTP status codes returned by the API. ```http STATUS: 200 OK ``` ```http STATUS: 400 BAD REQUEST ``` ```http STATUS: 429 TOO MANY REQUESTS ``` -------------------------------- ### Create HTML/CSS to Image Client Source: https://docs.htmlcsstoimage.com/example-code/c Instantiate the HtmlCssToImageClient using your User ID and API Key obtained from the dashboard. This client is used to interact with the API. ```csharp using HtmlCssToImage; // Retrieve your User ID and API Key from https://htmlcsstoimage.com/dashboard var client = new HtmlCssToImageClient("your-user-id", "your-api-key"); ``` -------------------------------- ### Triggering Downloads via JavaScript Source: https://docs.htmlcsstoimage.com/parameters/dl Programmatically initiate a download by updating the window location with the formatted URL. ```javascript function downloadImage(imageId) { const downloadUrl = `https://hcti.io/v1/image/${imageId}?dl=1`; window.location.href = downloadUrl; } ``` -------------------------------- ### Nested Selector Example Source: https://docs.htmlcsstoimage.com/parameters/selector Select deeply nested elements by chaining multiple CSS selectors. ```html
...
``` ```css .container .content .post ``` -------------------------------- ### ID Selector Example Source: https://docs.htmlcsstoimage.com/parameters/selector Select a unique element by its ID using a CSS ID selector. ```html ``` ```css #header ``` -------------------------------- ### Class Selector Example Source: https://docs.htmlcsstoimage.com/parameters/selector Select elements by their class name using a CSS class selector. ```html
...
``` ```css .profile-card ``` -------------------------------- ### Troubleshooting Source: https://docs.htmlcsstoimage.com/guides/using-google-fonts Guidance on resolving common issues such as Flash of Unstyled Text (FOUT) and ensuring correct font names and weights are used. ```APIDOC ### Flash of Unstyled Text (FOUT) If fonts aren’t rendering correctly, use the `ms_delay` parameter to allow time for font loading: ```json { "google_fonts": "Roboto", "ms_delay": 500, "html": "
Hello World
", "css": ".text { font-family: 'Roboto', sans-serif; }" } ``` Start with `ms_delay: 500` and increase if needed. ``` ```APIDOC ### Common Issues 1. **Font not appearing** : Verify the font name matches exactly as shown on Google Fonts 2. **Wrong font weight** : Ensure you’re using a weight that exists for the chosen font 3. **Incorrect quotes** : Use single quotes in CSS: `font-family: 'Roboto', sans-serif;` ``` -------------------------------- ### API Error Responses Source: https://docs.htmlcsstoimage.com/getting-started/create-and-render Examples of status codes and JSON error messages returned by the API. ```text STATUS: 400 BAD REQUEST ``` ```json { "error": "Bad Request", "statusCode": 400, "message": "HTML is Required" } ``` ```text STATUS: 401 UNAUTHORIZED ``` ```json { "error": "Unauthorized", "statusCode": 401, "message": "Invalid token" } ``` -------------------------------- ### Generate high-resolution screenshots Source: https://docs.htmlcsstoimage.com/use-cases/screenshots Set the device_scale parameter to 2 to produce retina-quality images. ```bash curl -X POST https://hcti.io/v1/image -u 'UserID:APIKey' \ --data-urlencode url="https://example.com" \ --data device_scale=2 ``` -------------------------------- ### Multiple Classes Selector Example Source: https://docs.htmlcsstoimage.com/parameters/selector Select elements that possess multiple specific classes by concatenating their class names. ```html
...
``` ```css .card.premium.featured ``` -------------------------------- ### GET /usage-statistics Source: https://docs.htmlcsstoimage.com/getting-started/using-the-api Retrieves historical usage data for image generation, broken down by hourly, daily, and monthly intervals. ```APIDOC ## GET /usage-statistics ### Description Retrieves historical usage data for image generation, broken down by hourly, daily, and monthly intervals. ### Method GET ### Endpoint /usage-statistics ### Response #### Success Response (200) - **data** (object) - Contains usage metrics - **hour** (object) - Map of ISO timestamps to integer counts - **day** (object) - Map of ISO timestamps to integer counts - **month** (object) - Map of ISO timestamps to integer counts #### Response Example { "data": { "hour": { "2024-03-14T14:00:00Z": 54 }, "day": { "2024-01-19T00:00:00Z": 1569 }, "month": { "2023-10-01T00:00:00Z": 44847 } } } ``` -------------------------------- ### Creating an HTML Download Link Source: https://docs.htmlcsstoimage.com/parameters/dl Use an anchor tag with the modified URL to provide a direct download link to users. ```html Download Image ``` -------------------------------- ### Retrieve an image via GET request Source: https://docs.htmlcsstoimage.com/getting-started/creating-an-image Endpoint to fetch a previously generated image using its unique ID. ```http get https://hcti.io**/v1/image/:image_id** ``` -------------------------------- ### GET /v1/usage Source: https://docs.htmlcsstoimage.com/guides/account-usage Retrieves comprehensive usage statistics including hourly, daily, monthly, and billing period data. ```APIDOC ## GET https://hcti.io/v1/usage ### Description Retrieves detailed usage statistics broken down by hourly, daily, monthly, and billing period intervals. ### Method GET ### Endpoint https://hcti.io/v1/usage ### Request Example curl -X GET https://hcti.io/v1/usage \ -u 'user-id:api-key' ### Response #### Success Response (200) - **data** (object) - Usage data organized by time periods (hour, day, month). - **per_billing_period** (array) - List of statistics for previous billing periods. #### Response Example { "data": { "hour": { "2024-03-17T13:00:00Z": 29 }, "day": { "2024-03-17T00:00:00Z": 838 }, "month": { "2024-03-01T00:00:00Z": 50747 } }, "per_billing_period": [ { "total_images": 40935, "start": "2024-03-01T00:00:00Z", "end": "2024-04-01T00:00:00Z" } ] } ``` -------------------------------- ### Add MCP Server via CLI Source: https://docs.htmlcsstoimage.com/integrations/mcp Use the command line interface to add the MCP server to your OpenCode environment. ```bash opencode mcp add ``` -------------------------------- ### MCP Server Configuration Source: https://docs.htmlcsstoimage.com/integrations/mcp Instructions for adding the HTML/CSS to Image MCP server to your OpenCode configuration. ```APIDOC ## Configuration ### Description Add the MCP server to your `opencode.json` configuration file or via the command line. ### Configuration File ```json { "mcp": { "hcti": { "type": "remote", "url": "https://mcp.hcti.io", "enabled": true } } } ``` ### Command Line `opencode mcp add` ``` -------------------------------- ### Example JSON Data for Template Source: https://docs.htmlcsstoimage.com/getting-started/templates This JSON object represents sample data that can be used with an HTML template to generate an image. ```json { "text": "With templates, you can use variables to replace parts of your image.", "avatar_url": "https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairDreads01&accessoriesType=Round&hairColor=BrownDark&facialHairType=BeardLight&facialHairColor=BrownDark&clotheType=BlazerShirt&eyeType=Happy&eyebrowType=DefaultNatural&mouthType=Eating&skinColor=Brown", "name": "Freddy", "username": "@freddy" } ``` -------------------------------- ### GET /v1/usage Source: https://docs.htmlcsstoimage.com/getting-started/using-the-api Retrieves the total number of images created for the account, categorized by time periods, suitable for usage tracking. ```APIDOC ## GET /v1/usage ### Description Checks the account usage by returning the total images created, rolled up into different time periods. ### Method GET ### Endpoint https://hcti.io/v1/usage ``` -------------------------------- ### Generate Image using Templates Source: https://docs.htmlcsstoimage.com/use-cases/social-cards Use a pre-defined template ID and dynamic values to generate images at scale. ```bash curl -X POST https://hcti.io/v1/image -u 'UserID:APIKey' \ -H "Content-Type: application/json" \ -d '{ "template_id": "your-template-id", "template_values": { "title": "My Blog Post Title", "author": "Jane Doe", "date": "December 2025" } }' ```