### Start Satori Development Mode

Source: https://github.com/vercel/satori/blob/main/CONTRIBUTING.md

Run this command in the root directory to start the development mode for Satori. Recommended to use with the playground.

```bash
pnpm dev
```

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

### Install Dependencies with pnpm

Source: https://github.com/vercel/satori/blob/main/CONTRIBUTING.md

Use this command to install project dependencies when setting up local development.

```bash
pnpm install
```

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

### Run Playground and Satori Locally

Source: https://github.com/vercel/satori/blob/main/CONTRIBUTING.md

Start the Satori playground and the Satori development server simultaneously for local testing.

```bash
pnpm dev:playground
```

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

### Live-Watch Satori Tests with Vitest

Source: https://github.com/vercel/satori/blob/main/CONTRIBUTING.md

Execute this command to start Vitest in live-watch mode, running tests and updating snapshots as changes are made.

```bash
pnpm dev:test
```

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

### Satori SVG Output Example

Source: https://github.com/vercel/satori/blob/main/README.md

This is an example of the SVG string output generated by Satori after processing JSX and options.

```js
'<svg ...><path d="..." fill="black"></path></svg>'
```

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

### Initialize Satori Standalone Build with WASM

Source: https://github.com/vercel/satori/blob/main/README.md

For the standalone build, manually load the `yoga.wasm` binary using `fetch` or `fs.readFile` and initialize Satori with it before use.

```javascript
import satori, { init } from 'satori/standalone'

const res = await fetch('https://unpkg.com/satori/yoga.wasm')
const yogaWasm = await res.arrayBuffer()

await init(yogaWasm)

// Now you can use satori as usual
const svg = await satori(...)
```

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

### Advanced Satori Configuration with SatoriOptions

Source: https://context7.com/vercel/satori/llms.txt

Illustrates advanced configuration using the SatoriOptions object, including custom fonts, Tailwind CSS integration, dynamic asset loading, and debugging options. Ensure font data is fetched or loaded.

```typescript
import satori from 'satori'
import type { SatoriOptions, Font } from 'satori'

const fonts: Font[] = [
  {
    name: 'Inter',
    data: await fetch('https://example.com/Inter-Regular.woff').then(r => r.arrayBuffer()),
    weight: 400,
    style: 'normal',
  },
  {
    name: 'Inter',
    data: await fetch('https://example.com/Inter-Bold.woff').then(r => r.arrayBuffer()),
    weight: 700,
    style: 'normal',
  },
]

const options: SatoriOptions = {
  width: 800,                    // Required: output width in pixels
  height: 400,                   // Required: output height in pixels
  fonts: fonts,                  // Required: array of font configurations
  embedFont: true,               // Optional: embed fonts as paths (default: true)
  debug: false,                  // Optional: draw bounding boxes for debugging
  pointScaleFactor: 2,           // Optional: pixel grid rounding for high-DPI
  tailwindConfig: {              // Optional: custom Tailwind configuration
    theme: {
      extend: {
        colors: { brand: '#0070f3' }
      }
    }
  },
  graphemeImages: {              // Optional: custom images for specific characters
    '🚀': 'https://example.com/rocket.svg',
  },
  loadAdditionalAsset: async (languageCode, segment) => {
    // Optional: dynamically load fonts/emojis for missing characters
    if (languageCode === 'emoji') {
      return `https://cdn.example.com/emoji/${segment}.svg`
    }
    // Return font data for missing language fonts
    return fetch(`https://example.com/fonts/${languageCode}.woff`)
      .then(r => r.arrayBuffer())
      .then(data => ({ name: 'Fallback', data, weight: 400, style: 'normal' }))
  },
  onNodeDetected: (node) => {
    // Optional: callback for each detected layout node
    console.log('Node:', node.type, node.left, node.top, node.width, node.height)
  }
}

const svg = await satori(
  <div style={{ display: 'flex', fontSize: 32 }}>
    Advanced Configuration Example
  </div>,
  options
)
```

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

### Basic Satori Usage with JSX

Source: https://github.com/vercel/satori/blob/main/README.md

Demonstrates the fundamental way to use Satori with JSX to render a simple HTML element into an SVG. Ensure font data is provided if needed.

```jsx
import satori from 'satori'

const svg = await satori(
  <div style={{ color: 'black' }}>hello, world</div>,
  {
    width: 600,
    height: 400,
    fonts: [
      {
        name: 'Roboto',
        // Use `fs` (Node.js only) or `fetch` to read the font as Buffer/ArrayBuffer and provide `data` here.
        data: robotoArrayBuffer,
        weight: 400,
        style: 'normal',
      },
    ],
  },
)
```

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

### Run Satori Tests with Vitest

Source: https://github.com/vercel/satori/blob/main/CONTRIBUTING.md

Use this command to run all Satori tests once using Vitest.

```bash
pnpm test
```

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

### Standalone Build with External WASM for Restricted Environments

Source: https://context7.com/vercel/satori/llms.txt

Utilize the standalone Satori build and manually load the Yoga WASM binary for environments with WASM loading restrictions, such as Cloudflare Workers. Initialize Satori with the fetched WASM binary before use.

```typescript
import satori, { init } from 'satori/standalone'

// Load Yoga WASM manually
const yogaWasm = await fetch('https://unpkg.com/satori/yoga.wasm')
  .then(res => res.arrayBuffer())

// Initialize Satori with the WASM binary
await init(yogaWasm)

// Now use satori as normal
const svg = await satori(
  <div style={{
    width: '100%',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#f0f0f0',
    fontSize: 32,
  }}>
    Running in Cloudflare Workers!
  </div>,
  {
    width: 800,
    height: 400,
    fonts: [{
      name: 'Inter',
      data: await fetch('https://example.com/Inter.woff').then(r => r.arrayBuffer()),
      weight: 400,
      style: 'normal',
    }],
  }
)
```

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

### Embedding Images with Satori

Source: https://github.com/vercel/satori/blob/main/README.md

Illustrates how to embed images using the `<img>` tag in Satori. Specifying width and height is recommended. Supports base64 encoded image data for direct rendering.

```jsx
await satori(
  <img src="https://picsum.photos/200/300" width={200} height={300} />,
  options
)
```

```jsx
await satori(
  <img src="data:image/png;base64,..." width={200} height={300} />,
  // Or src={arrayBuffer}, src={buffer}
  options
)
```

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

### Basic JSX to SVG Conversion with Satori

Source: https://context7.com/vercel/satori/llms.txt

Demonstrates the fundamental usage of the satori() function to convert a simple JSX structure with inline styles into an SVG string. Requires font data to be loaded.

```typescript
import satori from 'satori'
import { readFile } from 'fs/promises'

// Load font data (required for text rendering)
const robotoData = await readFile('./Roboto-Regular.ttf')

// Basic usage - render JSX to SVG
const svg = await satori(
  <div style={{
    color: 'black',
    backgroundColor: 'white',
    width: '100%',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: 48
  }}>
    Hello, World!
  </div>,
  {
    width: 1200,
    height: 630,
    fonts: [
      {
        name: 'Roboto',
        data: robotoData,
        weight: 400,
        style: 'normal',
      },
    ],
  }
)

// Result: '<svg width="1200" height="630" ...><path d="..." fill="black"></path></svg>'
console.log(svg)
```

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

### Configure Fonts for Text Rendering

Source: https://context7.com/vercel/satori/llms.txt

Load and configure multiple font files with specific weights, styles, and language overrides for accurate text rendering across different locales. Ensure fallback font order is considered.

```typescript
import satori from 'satori'
import { readFile } from 'fs/promises'

// Load multiple font weights and styles
const interRegular = await readFile('./Inter-Regular.ttf')
const interBold = await readFile('./Inter-Bold.ttf')
const interItalic = await readFile('./Inter-Italic.ttf')
const notoSansJP = await readFile('./NotoSansJP-Regular.otf')
const notoSansSC = await readFile('./NotoSansSC-Regular.otf')

const svg = await satori(
  <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
    <span style={{ fontWeight: 400 }}>Regular text</span>
    <span style={{ fontWeight: 700 }}>Bold text</span>
    <span style={{ fontStyle: 'italic' }}>Italic text</span>
    <span lang="ja-JP">日本語テキスト</span>
    <span lang="zh-CN">中文文本</span>
  </div>,
  {
    width: 600,
    height: 400,
    fonts: [
      // Base fonts (fallback order matters)
      { name: 'Inter', data: interRegular, weight: 400, style: 'normal' },
      { name: 'Inter', data: interBold, weight: 700, style: 'normal' },
      { name: 'Inter', data: interItalic, weight: 400, style: 'italic' },
      // Language-specific fonts
      { name: 'Noto Sans JP', data: notoSansJP, weight: 400, style: 'normal', lang: 'ja-JP' },
      { name: 'Noto Sans SC', data: notoSansSC, weight: 400, style: 'normal', lang: 'zh-CN' },
    ],
  }
)
```

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

### Satori Usage Without JSX

Source: https://github.com/vercel/satori/blob/main/README.md

Shows how to use Satori by passing React-element-like objects directly, suitable when a JSX transpiler is not enabled. Requires 'type', 'props.children', and 'props.style'.

```js
await satori(
  {
    type: 'div',
    props: {
      children: 'hello, world',
      style: { color: 'black' },
    },
  },
  options
)
```

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

### Experimental JSX Runtime with Satori

Source: https://github.com/vercel/satori/blob/main/README.md

Utilizes Satori's experimental JSX runtime for type-safe HTML element and CSS property support without requiring React. Enable with '@jsxImportSource' pragmas.

```tsx
/** @jsxRuntime automatic */
/** @jsxImportSource satori/jsx */

import satori from 'satori';
import { FC, JSXNode } from 'satori/jsx';

const MyComponent: FC<{ children: JSXNode }> = ({ children }) => (
  <div style={{ color: 'black' }}>{children}</div>
)

const svg = await satori(
  <MyComponent>hello, world</MyComponent>,
  options,
)
```

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

### SatoriOptions - Configuration Object

Source: https://context7.com/vercel/satori/llms.txt

The SatoriOptions object allows for detailed configuration of the SVG generation process, including dimensions, font loading, debugging, and advanced features.

```APIDOC
### SatoriOptions - Configuration Object

### Description
The options object controls rendering behavior including dimensions, fonts, debugging, and advanced features like Tailwind integration.

### Type Definition
```typescript
interface SatoriOptions {
  width: number; // Required: output width in pixels
  height: number; // Required: output height in pixels
  fonts: Font[]; // Required: array of font configurations
  embedFont?: boolean; // Optional: embed fonts as paths (default: true)
  debug?: boolean; // Optional: draw bounding boxes for debugging
  pointScaleFactor?: number; // Optional: pixel grid rounding for high-DPI
  tailwindConfig?: object; // Optional: custom Tailwind configuration
  graphemeImages?: { [key: string]: string }; // Optional: custom images for specific characters
  loadAdditionalAsset?: (languageCode: string, segment: string) => Promise<Font | string | ArrayBuffer>; // Optional: dynamically load fonts/emojis
  onNodeDetected?: (node: any) => void; // Optional: callback for each detected layout node
}

interface Font {
  name: string;
  data: ArrayBuffer;
  weight: 400 | 700 | 900;
  style: 'normal' | 'italic';
}
```

### Request Example
```typescript
import satori from 'satori'
import type { SatoriOptions, Font } from 'satori'

const fonts: Font[] = [
  {
    name: 'Inter',
    data: await fetch('https://example.com/Inter-Regular.woff').then(r => r.arrayBuffer()),
    weight: 400,
    style: 'normal',
  },
  {
    name: 'Inter',
    data: await fetch('https://example.com/Inter-Bold.woff').then(r => r.arrayBuffer()),
    weight: 700,
    style: 'normal',
  },
]

const options: SatoriOptions = {
  width: 800,
  height: 400,
  fonts: fonts,
  embedFont: true,
  debug: false,
  pointScaleFactor: 2,
  tailwindConfig: {
    theme: {
      extend: {
        colors: { brand: '#0070f3' }
      }
    }
  },
  graphemeImages: {
    '🚀': 'https://example.com/rocket.svg',
  },
  loadAdditionalAsset: async (languageCode, segment) => {
    if (languageCode === 'emoji') {
      return `https://cdn.example.com/emoji/${segment}.svg`
    }
    return fetch(`https://example.com/fonts/${languageCode}.woff`)
      .then(r => r.arrayBuffer())
      .then(data => ({ name: 'Fallback', data, weight: 400, style: 'normal' }))
  },
  onNodeDetected: (node) => {
    console.log('Node:', node.type, node.left, node.top, node.width, node.height)
  }
}

const svg = await satori(
  <div style={{ display: 'flex', fontSize: 32 }}>
    Advanced Configuration Example
  </div>,
  options
)
```
```

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

### Enable Debug Mode in Satori

Source: https://github.com/vercel/satori/blob/main/README.md

Pass `debug: true` as an option to draw bounding boxes around elements for debugging purposes.

```jsx
const svg = await satori(
  <div style={{ color: 'black' }}>hello, world</div>,
  {
    ...,
    debug: true,
  },
)
```

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

### Render SVG with Comprehensive CSS Support

Source: https://context7.com/vercel/satori/llms.txt

Use Satori to generate SVGs with support for flexbox, borders, shadows, transforms, text styling, and CSS variables. Ensure fonts are loaded for text rendering.

```typescript
import satori from 'satori'

const svg = await satori(
  <div style={{
    width: '100%',
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
    padding: 32,
    backgroundColor: '#f8fafc',
  }}>
    {/* Flexbox layout */}
    <div style={{
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      gap: 16,
    }}>
      <div style={{ flexGrow: 1, height: 40, backgroundColor: '#3b82f6' }} />
      <div style={{ flexGrow: 2, height: 40, backgroundColor: '#10b981' }} />
    </div>

    {/* Borders and shadows */}
    <div style={{
      padding: 20,
      backgroundColor: 'white',
      borderRadius: 12,
      border: '2px solid #e2e8f0',
      boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
    }}>
      Card with border and shadow
    </div>

    {/* Transforms */}
    <div style={{
      width: 100,
      height: 100,
      backgroundColor: '#f59e0b',
      transform: 'rotate(15deg) scale(0.9)',
      transformOrigin: 'center',
    }} />

    {/* Text styling */}
    <div style={{
      fontSize: 24,
      fontWeight: 700,
      letterSpacing: '-0.02em',
      lineHeight: 1.2,
      textDecoration: 'underline',
      textTransform: 'uppercase',
      color: '#1f2937',
      textShadow: '2px 2px 4px rgba(0,0,0,0.1)',
    }}>
      Styled Text
    </div>

    {/* CSS Variables */}
    <div style={{
      '--primary': '#8b5cf6',
      '--spacing': '16px',
      display: 'flex',
      gap: 'var(--spacing)',
    } as React.CSSProperties}>
      <div style={{ width: 50, height: 50, backgroundColor: 'var(--primary)' }} />
      <div style={{ width: 50, height: 50, backgroundColor: 'var(--primary)', opacity: 0.5 }} />
    </div>

    {/* Text overflow and line clamping */}
    <div style={{
      width: 200,
      fontSize: 14,
      lineClamp: 2,
      overflow: 'hidden',
      textOverflow: 'ellipsis',
    }}>
      This is a long text that will be clamped to two lines with an ellipsis at the end...
    </div>
  </div>,
  { width: 500, height: 600, fonts }
)
```

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

### Use Built-in JSX Runtime for Type-Safe Components

Source: https://context7.com/vercel/satori/llms.txt

Enable Satori's experimental JSX runtime with the `@jsxImportSource` pragma to use type-safe functional components without React. This allows for defining reusable UI elements with Satori-supported props.

```tsx
/** @jsxRuntime automatic */
/** @jsxImportSource satori/jsx */

import satori from 'satori'
import { createElement, Fragment } from 'satori/jsx'
import type { FC, JSXNode } from 'satori/jsx'

// Define typed functional components
interface CardProps {
  title: string
  description: string
  children?: JSXNode
}

const Card: FC<CardProps> = ({ title, description, children }) => (
  <div style={{
    display: 'flex',
    flexDirection: 'column',
    padding: 20,
    backgroundColor: 'white',
    borderRadius: 8,
    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
  }}>
    <h1 style={{ fontSize: 24, margin: 0 }}>{title}</h1>
    <p style={{ fontSize: 16, color: '#666' }}>{description}</p>
    {children}
  </div>
)

// Use with Satori
const svg = await satori(
  <Card title="Welcome" description="This is a card component">
    <span style={{ color: 'blue' }}>Additional content</span>
  </Card>,
  { width: 400, height: 200, fonts }
)

// Or use createElement directly without JSX
const element = createElement('div', { style: { color: 'red' } }, 'Hello')
const svg2 = await satori(element, { width: 100, height: 100, fonts })
```

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

### Load Fonts and Emojis Dynamically

Source: https://context7.com/vercel/satori/llms.txt

Handles emoji rendering with Twemoji and loads language-specific fonts dynamically. Ensure necessary fonts are available or provide fallback URLs.

```typescript
import satori from 'satori'

const svg = await satori(
  <div style={{ display: 'flex', fontSize: 24 }}>
    Hello 你好 こんにちは 🎉🚀
  </div>,
  {
    width: 600,
    height: 100,
    fonts: [{
      name: 'Inter',
      data: baseFont,
      weight: 400,
      style: 'normal',
    }],
    loadAdditionalAsset: async (languageCode, segment) => {
      // Handle emoji rendering with Twemoji
      if (languageCode === 'emoji') {
        const code = segment.codePointAt(0)?.toString(16)
        return `https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${code}.svg`
      }

      // Load language-specific fonts dynamically
      const fontMap: Record<string, string> = {
        'zh-CN': 'https://fonts.example.com/NotoSansSC.woff',
        'zh-TW': 'https://fonts.example.com/NotoSansTC.woff',
        'ja-JP': 'https://fonts.example.com/NotoSansJP.woff',
        'ko-KR': 'https://fonts.example.com/NotoSansKR.woff',
        'th-TH': 'https://fonts.example.com/NotoSansThai.woff',
        'ar-AR': 'https://fonts.example.com/NotoSansArabic.woff',
      }

      const fontUrl = fontMap[languageCode]
      if (fontUrl) {
        const data = await fetch(fontUrl).then(r => r.arrayBuffer())
        return { name: 'Noto Sans', data, weight: 400, style: 'normal' as const }
      }

      return null // Fall back to default font
    },
  }
)

```

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

### Generate SVG Using Plain Objects Without JSX

Source: https://context7.com/vercel/satori/llms.txt

Use Satori to generate SVGs by passing plain JavaScript objects that mimic React element structure, useful when JSX transpilation is not configured. Ensure the `fonts` option is provided.

```typescript
import satori from 'satori'

// Without JSX - use object notation
const svg = await satori(
  {
    type: 'div',
    props: {
      style: {
        display: 'flex',
        flexDirection: 'column',
        width: '100%',
        height: '100%',
        backgroundColor: '#1a1a2e',
        padding: 40,
      },
      children: [
        {
          type: 'h1',
          props: {
            style: { color: 'white', fontSize: 48 },
            children: 'No JSX Required',
          },
        },
        {
          type: 'p',
          props: {
            style: { color: '#a0a0a0', fontSize: 24 },
            children: 'Build dynamic images with plain objects',
          },
        },
        {
          type: 'div',
          props: {
            style: { display: 'flex', gap: 16, marginTop: 'auto' },
            children: [
              { type: 'span', props: { style: { color: '#4ade80' }, children: '✓ Node.js' } },
              { type: 'span', props: { style: { color: '#4ade80' }, children: '✓ Browsers' } },
              { type: 'span', props: { style: { color: '#4ade80' }, children: '✓ Workers' } },
            ],
          },
        },
      ],
    },
  },
  {
    width: 600,
    height: 300,
    fonts,
  }
)
```

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

### Integrate with Tailwind CSS

Source: https://context7.com/vercel/satori/llms.txt

Utilizes Tailwind CSS classes via the `tw` prop for rapid styling. Supports custom Tailwind configurations for extended theming.

```typescript
import satori from 'satori'
import type { TwConfig } from 'twrnc'

// Custom Tailwind configuration
const tailwindConfig: TwConfig = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
      },
      fontFamily: {
        sans: ['Inter'],
      },
    },
  },
}

const svg = await satori(
  <div
    tw="flex flex-col items-center justify-center w-full h-full bg-brand-50 p-8"
  >
    <h1 tw="text-6xl font-bold text-brand-900 mb-4">
      Tailwind in Satori
    </h1>
    <p tw="text-2xl text-gray-600 text-center max-w-lg">
      Use familiar Tailwind classes for rapid development
    </p>
    <div tw="flex gap-4 mt-8">
      <div tw="bg-brand-500 text-white px-6 py-3 rounded-full font-semibold">
        Primary Button
      </div>
      <div tw="border-2 border-brand-500 text-brand-500 px-6 py-3 rounded-full font-semibold">
        Secondary Button
      </div>
    </div>
  </div>,
  {
    width: 800,
    height: 400,
    fonts,
    tailwindConfig,
  }
)

```

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

### Dynamically Load Emojis and Fonts

Source: https://github.com/vercel/satori/blob/main/README.md

Implement `loadAdditionalAsset` to dynamically load missing emoji images or fonts during text rendering. The function receives the code and segment to render.

```typescript
await satori(
  <div>👋 你好</div>,
  {
    // `code` will be the detected language code, `emoji` if it's an Emoji, or `unknown` if not able to tell.
    // `segment` will be the content to render.
    loadAdditionalAsset: async (code: string, segment: string) => {
      if (code === 'emoji') {
        // if segment is an emoji
        return `data:image/svg+xml;base64,...`
      }

      // if segment is normal text
      return loadFontFromSystem(code)
    }
  }
)
```

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

### satori() - Convert JSX to SVG

Source: https://context7.com/vercel/satori/llms.txt

The core function of the Satori library. It takes a React-like element (JSX) and an options object to render an SVG string. This is the primary method for generating SVGs.

```APIDOC
## satori() - Convert JSX to SVG

### Description
The main function that converts JSX elements into SVG strings. It accepts a React-like element and options object specifying dimensions, fonts, and rendering preferences.

### Method
`satori()`

### Parameters
#### Request Body
- **element** (ReactElement) - Required - The JSX element to convert to SVG.
- **options** (SatoriOptions) - Required - Configuration object for rendering.

### Request Example
```typescript
import satori from 'satori'
import { readFile } from 'fs/promises'

const robotoData = await readFile('./Roboto-Regular.ttf')

const svg = await satori(
  <div style={{
    color: 'black',
    backgroundColor: 'white',
    width: '100%',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: 48
  }}>
    Hello, World!
  </div>,
  {
    width: 1200,
    height: 630,
    fonts: [
      {
        name: 'Roboto',
        data: robotoData,
        weight: 400,
        style: 'normal',
      },
    ],
  }
)

console.log(svg)
```

### Response
#### Success Response (200)
- **svgString** (string) - The generated SVG string.

#### Response Example
```
'<svg width="1200" height="630" ...><path d="..." fill="black"></path></svg>'
```
```

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

### Render Custom Emojis with graphemeImages

Source: https://github.com/vercel/satori/blob/main/README.md

Use the `graphemeImages` option to map specific graphemes to image sources for custom emoji rendering. Images are resized to the font size.

```jsx
await satori(
  <div>Next.js is 🤯!</div>,
  {
    ...
    graphemeImages: {
      '🤯': 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f92f.svg',
    },
  }
)
```

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

### Control Pixel Grid Rounding with pointScaleFactor

Source: https://github.com/vercel/satori/blob/main/README.md

Use `pointScaleFactor` to adjust how layout values are rounded to the pixel grid, enhancing rendering precision on high-DPI displays. This option is passed directly to Yoga.

```jsx
const svg = await satori(
  <div style={{ color: 'black' }}>hello, world</div>,
  {
    ...,
    pointScaleFactor: 2,
  },
)
```

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

### Embed Images and Background Images

Source: https://context7.com/vercel/satori/llms.txt

Embeds images using `<img>` tags or CSS `background-image`. Supports URLs, data URIs, and ArrayBuffers. Gradient backgrounds are also supported.

```typescript
import satori from 'satori'

const svg = await satori(
  <div style={{
    width: '100%',
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
    gap: 20,
    padding: 20,
  }}>
    {/* Image from URL */}
    <img
      src="https://picsum.photos/200/100"
      width={200}
      height={100}
      style={{ borderRadius: 8 }}
    />

    {/* Image from base64 data URI */}
    <img
      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
      width={50}
      height={50}
    />

    {/* Background image with gradient overlay */}
    <div style={{
      width: 300,
      height: 150,
      backgroundImage: 'linear-gradient(to right, rgba(0,0,0,0.5), transparent), url(https://picsum.photos/300/150)',
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      display: 'flex',
      alignItems: 'center',
      padding: 20,
      color: 'white',
      fontSize: 24,
    }}>
      Overlay Text
    </div>

    {/* Gradient backgrounds */}
    <div style={{
      width: 200,
      height: 50,
      backgroundImage: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      borderRadius: 25,
    }} />

    {/* Radial gradient */}
    <div style={{
      width: 100,
      height: 100,
      backgroundImage: 'radial-gradient(circle, #ff0000 0%, #0000ff 100%)',
      borderRadius: '50%',
    }} />
  </div>,
  { width: 400, height: 500, fonts }
)

```

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

### Specify Locale for Text Rendering

Source: https://github.com/vercel/satori/blob/main/README.md

Use the `lang` attribute to specify the locale for rendering text, which can affect how characters are displayed.

```jsx
await satori(
  <div lang="ja-JP">骨</div>
)
```

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

### Specify Fonts for Text Rendering

Source: https://github.com/vercel/satori/blob/main/README.md

Pass font data as ArrayBuffer (web) or Buffer (Node.js) when specifying fonts for text rendering. Multiple fonts can be used with `fontFamily`.

```jsx
await satori(
  <div style={{ fontFamily: 'Inter' }}>Hello</div>,
  {
    width: 600,
    height: 400,
    fonts: [
      {
        name: 'Inter',
        data: inter,
        weight: 400,
        style: 'normal',
      },
      {
        name: 'Inter',
        data: interBold,
        weight: 700,
        style: 'normal',
      },
    ],
  }
)
```

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

### Locale-Aware Text Rendering in SVG

Source: https://context7.com/vercel/satori/llms.txt

Specify the `lang` attribute on elements to ensure correct character rendering for different locales, such as CJK scripts. Ensure corresponding fonts are provided in the options.

```typescript
import satori from 'satori'

// The character 骨 renders differently in Chinese vs Japanese
const svg = await satori(
  <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: 20,
    padding: 40,
    fontSize: 48,
  }}>
    {/* Default rendering */}
    <div>骨 (default)</div>

    {/* Japanese rendering */}
    <div lang="ja-JP">骨 (Japanese)</div>

    {/* Simplified Chinese rendering */}
    <div lang="zh-CN">骨 (Chinese)</div>

    {/* Mixed content with explicit locale sections */}
    <div style={{ fontSize: 24 }}>
      <span>Welcome </span>
      <span lang="ja-JP">ようこそ </span>
      <span lang="zh-CN">欢迎 </span>
      <span lang="ko-KR">환영합니다</span>
    </div>
  </div>,
  {
    width: 400,
    height: 400,
    fonts: [
      { name: 'Inter', data: interFont, weight: 400, style: 'normal' },
      { name: 'Noto Sans JP', data: notoJP, weight: 400, style: 'normal', lang: 'ja-JP' },
      { name: 'Noto Sans SC', data: notoSC, weight: 400, style: 'normal', lang: 'zh-CN' },
      { name: 'Noto Sans KR', data: notoKR, weight: 400, style: 'normal', lang: 'ko-KR' },
    ],
  }
)
```

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

### Disable Font Embedding in Satori

Source: https://github.com/vercel/satori/blob/main/README.md

Set `embedFont` to `false` to prevent Satori from inlining font path data, causing it to use `<text>` elements instead of `<path>`.

```jsx
const svg = await satori(
  <div style={{ color: 'black' }}>hello, world</div>,
  {
    ...,
    embedFont: false,
  },
)
```

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