### Start Development Server

Source: https://github.com/cherry/placeholders.dev/blob/main/README.md

Locally start the Cloudflare Worker for testing using wrangler dev.

```bash
npm run start:dev
```

--------------------------------

### HTML Integration Examples

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Examples of how to embed placeholder images directly in HTML for mockups, prototypes, and development testing.

```APIDOC
## HTML Integration Examples

Embed placeholder images directly in HTML for mockups, prototypes, and development testing.

```html
<!-- Basic placeholder in img tag -->
<img src="https://images.placeholders.dev/350x150" alt="Placeholder">

<!-- Responsive placeholder with custom styling -->
<img
  src="https://images.placeholders.dev/?width=800&height=400&text=Hero%20Image&bgColor=%23e0e0e0"
  alt="Hero placeholder"
  style="width: 100%; max-width: 800px; height: auto;"
>

<!-- Card layout with multiple placeholders -->
<div class="card-grid">
  <img src="https://images.placeholders.dev/?width=300&height=200&bgColor=%23000&textColor=%23fff" alt="Card 1">
  <img src="https://images.placeholders.dev/?width=300&height=200&bgColor=%23313131&textColor=%23dfdfde" alt="Card 2">
  <img src="https://images.placeholders.dev/?width=300&height=200&bgColor=%23434343&textColor=%23dfdfde" alt="Card 3">
</div>

<!-- Avatar placeholder with custom dimensions -->
<img
  src="https://images.placeholders.dev/?width=64&height=64&text=JD&bgColor=%233b82f6&textColor=%23fff&fontSize=24"
  alt="User avatar"
  style="border-radius: 50%;"
>
```
```

--------------------------------

### Dark Mode Support Example

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Enable automatic dark mode support with dedicated background and text colors that respond to the user's system preference using CSS `prefers-color-scheme` media query.

```bash
# Placeholder with dark mode colors
curl "https://images.placeholders.dev/?width=400&height=200&bgColor=%23ffffff&textColor=%23000000&darkBgColor=%23000000&darkTextColor=%23ffffff"
```

```xml
# Response includes CSS media query for dark mode:
# <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 200">
#   <style>
#     @media (prefers-color-scheme: dark) {
#       rect { fill: #000000; }
#       text { fill: #ffffff; }
#     }
#   </style>
#   <rect fill="#ffffff" width="400" height="200"/>
#   <text fill="#000000" ...>400×200</text>
# </svg>
```

--------------------------------

### Text Wrapping Mode Example

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Enable text wrapping for long text content using foreignObject SVG elements. This mode uses a flexbox-based HTML div inside the SVG for better text flow control.

```bash
# Enable text wrapping for long content
curl "https://images.placeholders.dev/?width=300&height=200&text=This%20is%20a%20longer%20text%20that%20will%20automatically%20wrap%20to%20fit&textWrap=true"
```

--------------------------------

### API Options Reference: Width and Height

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Configure placeholder image width and height using query parameters. Defaults are provided if not specified.

```bash
# width - Width of generated image (default: 300)
curl "https://images.placeholders.dev/?width=500"
```

```bash
# height - Height of generated image (default: 150)
curl "https://images.placeholders.dev/?height=250"
```

--------------------------------

### Full URL Path for Placeholder Image

Source: https://github.com/cherry/placeholders.dev/blob/main/README.md

Specify both width and height using the full URL path.

```url
https://images.placeholders.dev/350x150
```

--------------------------------

### Basic URL Path for Placeholder Image

Source: https://github.com/cherry/placeholders.dev/blob/main/README.md

Use this format for a basic placeholder image with default dimensions.

```url
https://images.placeholders.dev/350
```

--------------------------------

### Generate Placeholder Image with Query Parameters

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Customize placeholder images using query parameters for full control over dimensions, colors, text, and fonts.

```bash
# Basic placeholder with custom dimensions
curl "https://images.placeholders.dev/?width=400&height=200"
```

```bash
# Custom background and text colors
curl "https://images.placeholders.dev/?width=400&height=200&bgColor=%23000000&textColor=%23ffffff"
```

```bash
# Custom text with specific font settings
curl "https://images.placeholders.dev/?width=600&height=300&text=Hello%20World&fontFamily=Georgia&fontWeight=400&fontSize=32"
```

```bash
# Full customization example
curl "https://images.placeholders.dev/?width=800&height=400&text=Custom%20Placeholder&bgColor=%23f7f6f6&textColor=%236d6e71&fontFamily=sans-serif&fontWeight=bold&fontSize=48"
```

```xml
# Response: SVG image with content-type: image/svg+xml
# <svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400">
#   <rect fill="#f7f6f6" width="800" height="400"/>
#   <text fill="#6d6e71" font-family="sans-serif" font-size="48" dy="16.8" font-weight="bold" x="50%" y="50%" text-anchor="middle">Custom Placeholder</text>
# </svg>
```

--------------------------------

### Placeholder Image with Query Parameters

Source: https://github.com/cherry/placeholders.dev/blob/main/README.md

Customize image dimensions, background color, text, and text color using query parameters.

```url
https://images.placeholders.dev/?width=1055&height=100&text=Made%20with%20placeholders.dev&bgColor=%23f7f6f6&textColor=%236d6e71
```

--------------------------------

### Publish to Workers.dev

Source: https://github.com/cherry/placeholders.dev/blob/main/README.md

Push the service to your workers.dev domain.

```bash
npm run publish
```

--------------------------------

### Generate Placeholder Image via URL Path

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Generate placeholder images using simple URL paths. Specify dimensions directly in the path as width or width×height format.

```bash
# Generate a 350x350 square placeholder
curl "https://images.placeholders.dev/350"
```

```bash
# Generate a 350x150 rectangle placeholder
curl "https://images.placeholders.dev/350x150"
```

```html
# Use in HTML img tag
# <img src="https://images.placeholders.dev/350x150" alt="placeholder">
```

--------------------------------

### Publish to Production Workers

Source: https://github.com/cherry/placeholders.dev/blob/main/README.md

Deploy the placeholders.dev service to the production environment via Cloudflare Workers.

```bash
npm run publish:prod
```

--------------------------------

### Publish to Staging Workers

Source: https://github.com/cherry/placeholders.dev/blob/main/README.md

Deploy the placeholders.dev service to the staging environment via Cloudflare Workers.

```bash
npm run publish:staging
```

--------------------------------

### API Options Reference: Text Customization

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Customize the text displayed on the placeholder image. Supports custom text content and font styling.

```bash
# text - Custom text to display (default: dimensions like "300×150")
curl "https://images.placeholders.dev/?text=Loading..."
```

```bash
# fontFamily - CSS font family (default: sans-serif)
curl "https://images.placeholders.dev/?fontFamily=monospace"
```

```bash
# fontWeight - Font weight value (default: bold)
curl "https://images.placeholders.dev/?fontWeight=400"
```

```bash
# fontSize - Font size in pixels (default: 20% of shortest dimension)
curl "https://images.placeholders.dev/?fontSize=24"
```

```bash
# dy - Vertical text adjustment for centering (default: 35% of fontSize)
curl "https://images.placeholders.dev/?dy=10"
```

--------------------------------

### API Options Reference: Color Customization

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Configure background and text colors for the placeholder image. Supports hex codes and RGBA/HSLA values.

```bash
# bgColor - Background color, URL-encoded (default: #ddd)
curl "https://images.placeholders.dev/?bgColor=%23ff5733"
```

```bash
# textColor - Text color, supports rgba/hsla (default: rgba(0,0,0,0.5))
curl "https://images.placeholders.dev/?textColor=rgba(255,255,255,0.8)"
```

--------------------------------

### Responsive HTML Placeholder with Custom Styling

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Create a responsive placeholder image for hero sections with custom text, background color, and inline styling for width and aspect ratio.

```html
<img
  src="https://images.placeholders.dev/?width=800&height=400&text=Hero%20Image&bgColor=%23e0e0e0"
  alt="Hero placeholder"
  style="width: 100%; max-width: 800px; height: auto;"
>
```

--------------------------------

### Generate Placeholder Image with Query Parameters

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Customize placeholder images using query parameters for full control over dimensions, colors, text, and fonts.

```APIDOC
## GET /api/images/placeholders

### Description
Customize placeholder images using query parameters for full control over dimensions, colors, text, and fonts.

### Method
GET

### Endpoint
`https://images.placeholders.dev/`

### Parameters
#### Query Parameters
- **width** (integer) - Optional - Width of generated image (default: 300).
- **height** (integer) - Optional - Height of generated image (default: 150).
- **bgColor** (string) - Optional - Background color, URL-encoded (default: #ddd).
- **textColor** (string) - Optional - Text color, supports rgba/hsla (default: rgba(0,0,0,0.5)).
- **text** (string) - Optional - Custom text to display (default: dimensions like "300\u00d7150").
- **fontFamily** (string) - Optional - CSS font family (default: sans-serif).
- **fontWeight** (string) - Optional - Font weight value (default: bold).
- **fontSize** (integer) - Optional - Font size in pixels (default: 20% of shortest dimension).
- **dy** (integer) - Optional - Vertical text adjustment for centering (default: 35% of fontSize).
- **textWrap** (boolean) - Optional - Enable text wrapping (default: false).

### Request Example
```bash
# Basic placeholder with custom dimensions
curl "https://images.placeholders.dev/?width=400&height=200"

# Custom background and text colors
curl "https://images.placeholders.dev/?width=400&height=200&bgColor=%23000000&textColor=%23ffffff"

# Custom text with specific font settings
curl "https://images.placeholders.dev/?width=600&height=300&text=Hello%20World&fontFamily=Georgia&fontWeight=400&fontSize=32"

# Full customization example
curl "https://images.placeholders.dev/?width=800&height=400&text=Custom%20Placeholder&bgColor=%23f7f6f6&textColor=%236d6e71&fontFamily=sans-serif&fontWeight=bold&fontSize=48"
```

### Response
#### Success Response (200)
- **image/svg+xml** - The generated SVG placeholder image.
```

--------------------------------

### HTML Card Layout with Multiple Placeholders

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Display multiple placeholder images in a grid layout for card elements, each with different background and text colors.

```html
<div class="card-grid">
  <img src="https://images.placeholders.dev/?width=300&height=200&bgColor=%23000&textColor=%23fff" alt="Card 1">
  <img src="https://images.placeholders.dev/?width=300&height=200&bgColor=%23313131&textColor=%23dfdfde" alt="Card 2">
  <img src="https://images.placeholders.dev/?width=300&height=200&bgColor=%23434343&textColor=%23dfdfde" alt="Card 3">
</div>
```

--------------------------------

### Full Options Interface for simpleSvgPlaceholder

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Defines all available configuration options for the `simpleSvgPlaceholder` function, including defaults for dimensions, text, colors, fonts, and advanced features like text wrapping and dark mode.

```typescript
// Full Options interface:
interface Options {
  width?: number;        // Default: 300
  height?: number;       // Default: 150
  text?: string;         // Default: "{width}×{height}"
  dy?: number;           // Default: fontSize * 0.35
  fontFamily?: string;   // Default: 'sans-serif'
  fontWeight?: string | number;  // Default: 'bold'
  fontSize?: number;     // Default: Math.floor(Math.min(width, height) * 0.2)
  lineHeight?: number;   // Default: 1.2
  bgColor?: string;      // Default: '#ddd'
  textColor?: string;    // Default: 'rgba(0,0,0,0.5)'
  darkBgColor?: string;  // Optional dark mode background
  darkTextColor?: string; // Optional dark mode text color
  dataUri?: boolean;     // Default: true
  charset?: string;      // Default: 'UTF-8'
  textWrap?: boolean;    // Default: false
  padding?: string;      // Default: '0.5em' (used with textWrap)
}
```

--------------------------------

### Generate Placeholder Image via URL Path

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Generate placeholder images by specifying dimensions directly in the URL path. Supports width or width x height format.

```APIDOC
## GET /api/images/placeholders

### Description
Generate placeholder images using simple URL paths. Specify dimensions directly in the path as width or width\u00d7height format.

### Method
GET

### Endpoint
`https://images.placeholders.dev/<width>[x<height>]`

### Parameters
#### Path Parameters
- **width** (integer) - Required - The desired width of the placeholder image.
- **height** (integer) - Optional - The desired height of the placeholder image. If not provided, it defaults to the width, creating a square image.

### Request Example
```bash
# Generate a 350x350 square placeholder
curl "https://images.placeholders.dev/350"

# Generate a 350x150 rectangle placeholder
curl "https://images.placeholders.dev/350x150"

# Use in HTML img tag
# <img src="https://images.placeholders.dev/350x150" alt="placeholder">
```

### Response
#### Success Response (200)
- **image/svg+xml** - The generated SVG placeholder image.
```

--------------------------------

### Basic HTML Placeholder Image

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Embed a basic placeholder image using the `<img>` tag with a direct URL.

```html
<img src="https://images.placeholders.dev/350x150" alt="Placeholder">
```

--------------------------------

### Dark Mode Support

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Enable automatic dark mode support with dedicated background and text colors that respond to the user's system preference.

```APIDOC
## GET /api/images/placeholders

### Description
Enable automatic dark mode support with dedicated background and text colors that respond to the user's system preference using CSS `prefers-color-scheme` media query.

### Method
GET

### Endpoint
`https://images.placeholders.dev/`

### Parameters
#### Query Parameters
- **bgColor** (string) - Optional - Background color for light mode (default: #ddd).
- **textColor** (string) - Optional - Text color for light mode (default: rgba(0,0,0,0.5)).
- **darkBgColor** (string) - Optional - Background color for dark mode.
- **darkTextColor** (string) - Optional - Text color for dark mode.

### Request Example
```bash
# Placeholder with dark mode colors
curl "https://images.placeholders.dev/?width=400&height=200&bgColor=%23ffffff&textColor=%23000000&darkBgColor=%23000000&darkTextColor=%23ffffff"
```

### Response
#### Success Response (200)
- **image/svg+xml** - The generated SVG placeholder image, including CSS media query for dark mode.
```

--------------------------------

### Basic SVG Placeholder Generation (TypeScript)

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Generate a basic SVG placeholder using default options. The function returns a data URI encoded SVG string.

```typescript
import { simpleSvgPlaceholder, Options } from './simple-svg-placeholder';

// Basic usage with defaults
const svg = simpleSvgPlaceholder({});
// Returns: data:image/svg+xml;charset=UTF-8,...
```

--------------------------------

### Image Generation Endpoint

Source: https://github.com/cherry/placeholders.dev/blob/main/README.md

Generate placeholder images by specifying dimensions and other customizable options.

```APIDOC
## GET /images.placeholders.dev

### Description
Generates a placeholder image with specified dimensions and customizable options.

### Method
GET

### Endpoint
`/images.placeholders.dev`

### Query Parameters
- **width** (integer) - Optional - Width of the generated image. Defaults to `300`.
- **height** (integer) - Optional - Height of the generated image. Defaults to `150`.
- **text** (string) - Optional - Text to display on the image. Defaults to the image dimensions (e.g., "300x150").
- **fontFamily** (string) - Optional - Font to use for the text. Defaults to `sans-serif`.
- **fontWeight** (string) - Optional - Font weight for the text. Defaults to `bold`.
- **fontSize** (string) - Optional - Font size for the text. Defaults to `20%` of the shortest image dimension, rounded down.
- **dy** (string) - Optional - Vertical adjustment for the text. Defaults to `35%` of the font size.
- **bgColor** (string) - Optional - Background color of the image. Defaults to `#ddd`.
- **textColor** (string) - Optional - Color of the text. Can use RGBA or HSLA for transparency. Defaults to `rgba(0,0,0,0.5)`.
- **textWrap** (boolean) - Optional - Enables text wrapping within the image. Defaults to `false`.

### Request Example
```json
{
  "example": "https://images.placeholders.dev/?width=1055&height=100&text=Hello%20World&bgColor=%23434343&textColor=%23dfdfde"
}
```

### Response
#### Success Response (200)
- **image** (binary) - The generated placeholder image.

#### Response Example
(Binary image data)
```

--------------------------------

### Customized SVG Placeholder Dimensions and Colors (TypeScript)

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Generate an SVG placeholder with specified dimensions, text, background color, text color, font family, font weight, and font size.

```typescript
// Custom dimensions and colors
const customSvg = simpleSvgPlaceholder({
  width: 400,
  height: 200,
  text: 'Custom Placeholder',
  bgColor: '#f0f0f0',
  textColor: '#333333',
  fontFamily: 'Arial, sans-serif',
  fontWeight: 'bold',
  fontSize: 24,
});
```

--------------------------------

### Dark Mode SVG Placeholder (TypeScript)

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Generate an SVG placeholder with distinct background and text colors for light and dark modes. Requires `dataUri: false` to return the raw SVG for potential dynamic styling.

```typescript
// Dark mode support
const darkModeSvg = simpleSvgPlaceholder({
  width: 400,
  height: 200,
  bgColor: '#ffffff',
  textColor: '#000000',
  darkBgColor: '#1a1a1a',
  darkTextColor: '#ffffff',
  dataUri: false,
});
```

--------------------------------

### Image Placeholder Generation API

Source: https://github.com/cherry/placeholders.dev/blob/main/public/index.html

This API endpoint allows you to generate image placeholders with various customization options. You can control the width, height, text content, font styles, colors, and text wrapping.

```APIDOC
## GET /cherry/placeholders.dev

### Description
Generates an image placeholder with specified options.

### Method
GET

### Endpoint
/cherry/placeholders.dev

### Query Parameters
- **width** (integer) - Optional - Width of generated image. Defaults to `300`.
- **height** (integer) - Optional - Height of generated image. Defaults to `150`.
- **text** (string) - Optional - Text to display on generated image. Defaults to the image dimensions.
- **fontFamily** (string) - Optional - Font to use for the text. Defaults to `sans-serif`.
- **fontWeight** (string) - Optional - Font weight to use for the text. Defaults to `bold`.
- **fontSize** (string) - Optional - Font size to use for the text. Defaults to 20% of the shortest image dimension, rounded down.
- **dy** (string) - Optional - Adjustment applied to the `dy` attribute of the text element to appear vertically centered. Defaults to 35% of the font size.
- **bgColor** (string) - Optional - Background color of the image. Defaults to `#ddd`.
- **textColor** (string) - Optional - Color of the text. For transparency, use an `rgba` or `hsla` value. Defaults to `rgba(0,0,0,0.5)`.
- **textWrap** (boolean) - Optional - Wrap text to fit within the image. Will not alter font size, so long strings may still overflow. Defaults to `false`.

### Response
#### Success Response (200)
- **image** (binary) - The generated image placeholder.
```

--------------------------------

### HTML Avatar Placeholder with Custom Styling

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Generate a circular avatar placeholder with custom dimensions, text, background, and text color, applying CSS for rounded corners.

```html
<img
  src="https://images.placeholders.dev/?width=64&height=64&text=JD&bgColor=%233b82f6&textColor=%23fff&fontSize=24"
  alt="User avatar"
  style="border-radius: 50%;"
>
```

--------------------------------

### Raw SVG String Output (TypeScript)

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Generate an SVG placeholder and retrieve the raw, unencoded SVG string by setting `dataUri` to `false`. Useful for direct SVG manipulation or embedding.

```typescript
// Get raw SVG without data URI encoding
const rawSvg = simpleSvgPlaceholder({
  width: 300,
  height: 150,
  dataUri: false,  // Returns unencoded SVG string
});
// Returns: <svg xmlns="http://www.w3.org/2000/svg" width="300" height="150"...
```

--------------------------------

### simpleSvgPlaceholder Function

Source: https://context7.com/cherry/placeholders.dev/llms.txt

The core SVG generation function used internally by the service. It creates customizable SVG placeholder images with support for text, colors, fonts, dark mode, and text wrapping.

```APIDOC
## simpleSvgPlaceholder Function

The core SVG generation function used internally by the service. It creates customizable SVG placeholder images with support for text, colors, fonts, dark mode, and text wrapping.

```typescript
import { simpleSvgPlaceholder, Options } from './simple-svg-placeholder';

// Basic usage with defaults
const svg = simpleSvgPlaceholder({});
// Returns: data:image/svg+xml;charset=UTF-8,...encoded SVG...

// Custom dimensions and colors
const customSvg = simpleSvgPlaceholder({
  width: 400,
  height: 200,
  text: 'Custom Placeholder',
  bgColor: '#f0f0f0',
  textColor: '#333333',
  fontFamily: 'Arial, sans-serif',
  fontWeight: 'bold',
  fontSize: 24,
});

// Get raw SVG without data URI encoding
const rawSvg = simpleSvgPlaceholder({
  width: 300,
  height: 150,
  dataUri: false,  // Returns unencoded SVG string
});
// Returns: <svg xmlns="http://www.w3.org/2000/svg" width="300" height="150"...

// Dark mode support
const darkModeSvg = simpleSvgPlaceholder({
  width: 400,
  height: 200,
  bgColor: '#ffffff',
  textColor: '#000000',
  darkBgColor: '#1a1a1a',
  darkTextColor: '#ffffff',
  dataUri: false,
});

// Text wrapping enabled
const wrappedTextSvg = simpleSvgPlaceholder({
  width: 300,
  height: 200,
  text: 'This long text will wrap within the container',
  textWrap: true,
  dataUri: false,
});

// Full Options interface:
interface Options {
  width?: number;        // Default: 300
  height?: number;       // Default: 150
  text?: string;         // Default: "{width}×{height}"
  dy?: number;           // Default: fontSize * 0.35
  fontFamily?: string;   // Default: 'sans-serif'
  fontWeight?: string | number;  // Default: 'bold'
  fontSize?: number;     // Default: Math.floor(Math.min(width, height) * 0.2)
  lineHeight?: number;   // Default: 1.2
  bgColor?: string;      // Default: '#ddd'
  textColor?: string;    // Default: 'rgba(0,0,0,0.5)'
  darkBgColor?: string;  // Optional dark mode background
  darkTextColor?: string; // Optional dark mode text color
  dataUri?: boolean;     // Default: true
  charset?: string;      // Default: 'UTF-8'
  textWrap?: boolean;    // Default: false
  padding?: string;      // Default: '0.5em' (used with textWrap)
}
```
```

--------------------------------

### SVG Placeholder with Text Wrapping (TypeScript)

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Generate an SVG placeholder where the provided text automatically wraps to fit within the specified dimensions. Set `textWrap` to `true` and optionally adjust `padding`.

```typescript
// Text wrapping enabled
const wrappedTextSvg = simpleSvgPlaceholder({
  width: 300,
  height: 200,
  text: 'This long text will wrap within the container',
  textWrap: true,
  dataUri: false,
});
```

--------------------------------

### Text Wrapping Mode

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Enable text wrapping for long text content using foreignObject SVG elements for better text flow control.

```APIDOC
## GET /api/images/placeholders

### Description
Enable text wrapping for long text content using foreignObject SVG elements. This mode uses a flexbox-based HTML div inside the SVG for better text flow control.

### Method
GET

### Endpoint
`https://images.placeholders.dev/`

### Parameters
#### Query Parameters
- **textWrap** (boolean) - Required - Enable text wrapping (default: false).
- **text** (string) - Optional - The text content to display. If `textWrap` is true, this text will wrap.

### Request Example
```bash
# Enable text wrapping for long content
curl "https://images.placeholders.dev/?width=300&height=200&text=This%20is%20a%20longer%20text%20that%20will%20automatically%20wrap%20to%20fit&textWrap=true"
```

### Response
#### Success Response (200)
- **image/svg+xml** - The generated SVG placeholder image, using `foreignObject` for text wrapping.
```

--------------------------------

### API Options Reference: Text Wrapping

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Enable text wrapping for long text content using foreignObject SVG elements. This mode uses a flexbox-based HTML div inside the SVG for better text flow control.

```bash
# textWrap - Enable text wrapping (default: false)
curl "https://images.placeholders.dev/?text=This%20is%20a%20long%20text%20that%20wraps&textWrap=true"
```

--------------------------------

### Validate and Sanitize Color Values

Source: https://context7.com/cherry/placeholders.dev/llms.txt

The `sanitizeColor` function validates and cleans color values, accepting standard hex, RGB, and RGBA formats. It returns `null` for invalid color strings.

```typescript
// Validate and sanitize color values
sanitizeColor('#ff5733');           // Returns: '#ff5733'
sanitizeColor('rgb(255, 87, 51)');  // Returns: 'rgb(255, 87, 51)'
sanitizeColor('rgba(0,0,0,0.5)');   // Returns: 'rgba(0,0,0,0.5)'
sanitizeColor('invalid-color');     // Returns: null
```

--------------------------------

### Sanitize Strings for CSS Usage

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Use `sanitizeStringForCss` to prepare strings for CSS properties by removing potentially problematic characters like colons and semicolons.

```typescript
// Sanitize strings for CSS usage (removes : and ;)
sanitizeStringForCss('font-family; color:');  // Returns: 'font-family color'
```

--------------------------------

### Sanitize Numeric Inputs

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Use `sanitizeNumber` to convert string representations of numbers into actual numbers. It returns `null` for invalid or empty inputs.

```typescript
import {
  sanitizeNumber,
  sanitizeString,
  sanitizeColor,
  sanitizeStringForCss,
  sanitizeBoolean
} from './sanitizers';

// Sanitize numeric inputs
sanitizeNumber('300');      // Returns: 300
sanitizeNumber('invalid');  // Returns: null
sanitizeNumber('  ');       // Returns: null
```

--------------------------------

### Sanitize String Inputs

Source: https://context7.com/cherry/placeholders.dev/llms.txt

Employ `sanitizeString` to remove HTML tags and special characters from string inputs, effectively preventing XSS vulnerabilities.

```typescript
// Sanitize string inputs (removes HTML tags and special characters)
sanitizeString('Hello <script>alert("xss")</script>');  // Returns: 'Hello '
sanitizeString('Text with "quotes" and <brackets>');    // Returns: 'Text with quotes and brackets'
```

--------------------------------

### Sanitize Boolean Inputs

Source: https://context7.com/cherry/placeholders.dev/llms.txt

The `sanitizeBoolean` function converts various string representations of boolean values ('true', 'false', '1', '0') into actual boolean types.

```typescript
// Sanitize boolean inputs
sanitizeBoolean('true');   // Returns: true
sanitizeBoolean('1');      // Returns: true
sanitizeBoolean('false');  // Returns: false
sanitizeBoolean('0');      // Returns: false
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.