### Install Takumi.js
Source: https://takumi.kane.tw/llms-full.txt
Install the Takumi.js package using your preferred package manager.
```bash
npm i takumi-js@rc
```
```bash
pnpm add takumi-js@rc
```
```bash
yarn add takumi-js@rc
```
```bash
bun add takumi-js@rc
```
--------------------------------
### Install Blog Post Template with bun
Source: https://takumi.kane.tw/llms-full.txt
Use this command to install the blog post template using bun.
```bash
bun x shadcn@latest add https://takumi.kane.tw/templates/registry/blog-post-template.json
```
--------------------------------
### Install takumi-js v1 via bun
Source: https://takumi.kane.tw/llms-full.txt
Use this command to install the latest version of takumi-js.
```bash
bun add takumi-js@1
```
--------------------------------
### Install Blog Post Template with yarn
Source: https://takumi.kane.tw/llms-full.txt
Use this command to install the blog post template using yarn.
```bash
yarn dlx shadcn@latest add https://takumi.kane.tw/templates/registry/blog-post-template.json
```
--------------------------------
### Install Blog Post Template with npm
Source: https://takumi.kane.tw/llms-full.txt
Use this command to install the blog post template using npm.
```bash
npx shadcn@latest add https://takumi.kane.tw/templates/registry/blog-post-template.json
```
--------------------------------
### Install Blog Post Template with pnpm
Source: https://takumi.kane.tw/llms-full.txt
Use this command to install the blog post template using pnpm.
```bash
pnpm dlx shadcn@latest add https://takumi.kane.tw/templates/registry/blog-post-template.json
```
--------------------------------
### Custom Headers Example
Source: https://takumi.kane.tw/docs/image-response
Example demonstrating how to set custom headers, such as Cache-Control, for the ImageResponse.
```APIDOC
## Custom Headers
Set cache headers or override any other header via the `headers` option.
### Request Example
```javascript
new ImageResponse(, {
format: "webp",
headers: {
"Cache-Control": "public, immutable, max-age=31536000",
},
});
```
```
--------------------------------
### Install takumi-js v1 via pnpm
Source: https://takumi.kane.tw/llms-full.txt
Use this command to install the latest version of takumi-js.
```bash
pnpm add takumi-js@1
```
--------------------------------
### Install takumi-js v1 via npm
Source: https://takumi.kane.tw/llms-full.txt
Use this command to install the latest version of takumi-js.
```bash
npm i takumi-js@1
```
--------------------------------
### Install takumi-js v1 via yarn
Source: https://takumi.kane.tw/llms-full.txt
Use this command to install the latest version of takumi-js.
```bash
yarn add takumi-js@1
```
--------------------------------
### Install takumi-js with bun
Source: https://takumi.kane.tw/llms-full.txt
Install the takumi-js package using bun. This command adds the library to your project dependencies.
```bash
bun add takumi-js@rc
```
--------------------------------
### Install Takumi Runtime Package
Source: https://takumi.kane.tw/llms-full.txt
Install the appropriate Takumi package based on your runtime environment (Node or Edge). Use npm, pnpm, yarn, or bun.
```bash
npm install @takumi-rs/core@beta
```
```bash
pnpm add @takumi-rs/core@beta
```
```bash
yarn add @takumi-rs/core@beta
```
```bash
bun add @takumi-rs/core@beta
```
--------------------------------
### Install React and Font Package
Source: https://takumi.kane.tw/llms-full.txt
Install React for component rendering and a font package like @fontsource/roboto. These are necessary for generating images.
```bash
npm i -D react @fontsource/roboto
```
```bash
pnpm add -D react @fontsource/roboto
```
```bash
yarn add --dev react @fontsource/roboto
```
```bash
bun add --dev react @fontsource/roboto
```
--------------------------------
### Install Takumi v2 Packages (bun)
Source: https://takumi.kane.tw/llms-full.txt
Use this command to install the necessary Takumi v2 packages using bun. Ensure you are using the correct version tags (@rc, @beta).
```bash
bun add takumi-js@rc @takumi-rs/core@beta @takumi-rs/wasm@beta
```
--------------------------------
### Add astro-takumi Integration
Source: https://takumi.kane.tw/llms-full.txt
Use the `astro add` command to install the astro-takumi integration. Also install React and a font package.
```bash
npx astro add astro-takumi
```
```bash
pnpm dlx astro add astro-takumi
```
```bash
yarn dlx astro add astro-takumi
```
```bash
bun x astro add astro-takumi
```
--------------------------------
### Install takumi-js with npm
Source: https://takumi.kane.tw/llms-full.txt
Install the takumi-js package using npm. This command adds the library to your project dependencies.
```bash
npm i takumi-js@rc
```
--------------------------------
### Install takumi-js with pnpm
Source: https://takumi.kane.tw/llms-full.txt
Install the takumi-js package using pnpm. This command adds the library to your project dependencies.
```bash
pnpm add takumi-js@rc
```
--------------------------------
### Install Takumi v2 Packages (yarn)
Source: https://takumi.kane.tw/llms-full.txt
Use this command to install the necessary Takumi v2 packages using yarn. Ensure you are using the correct version tags (@rc, @beta).
```bash
yarn add takumi-js@rc @takumi-rs/core@beta @takumi-rs/wasm@beta
```
--------------------------------
### Install Takumi v2 Packages (npm)
Source: https://takumi.kane.tw/llms-full.txt
Use this command to install the necessary Takumi v2 packages using npm. Ensure you are using the correct version tags (@rc, @beta).
```bash
npm install takumi-js@rc @takumi-rs/core@beta @takumi-rs/wasm@beta
```
--------------------------------
### Initializing and Using Renderer
Source: https://takumi.kane.tw/docs/typography-and-fonts
This snippet shows the basic setup for using the Renderer. It includes initializing the Renderer and then registering a font with its data. This is a common pattern for custom font handling.
```javascript
const renderer = new Renderer();
await renderer.registerFont({ name: "Inter", data: inter });
```
--------------------------------
### Install takumi-js with yarn
Source: https://takumi.kane.tw/llms-full.txt
Install the takumi-js package using yarn. This command adds the library to your project dependencies.
```bash
yarn add takumi-js@rc
```
--------------------------------
### Install Takumi v2 Packages (pnpm)
Source: https://takumi.kane.tw/llms-full.txt
Use this command to install the necessary Takumi v2 packages using pnpm. Ensure you are using the correct version tags (@rc, @beta).
```bash
pnpm add takumi-js@rc @takumi-rs/core@beta @takumi-rs/wasm@beta
```
--------------------------------
### Basic ImageResponse Usage
Source: https://takumi.kane.tw/docs/image-response
Demonstrates the fundamental usage of ImageResponse within a route handler. Ensure 'takumi-js/response' is installed.
```javascript
import { ImageResponse } from "takumi-js/response";
export function GET() {
return new ImageResponse(, { width: 1200, height: 630 });
}
```
--------------------------------
### Variable Font Example
Source: https://takumi.kane.tw/docs/typography-and-fonts
Demonstrates the usage of a variable font, specifying its weight and width. Ensure the variable font is correctly loaded and supported.
```javascript
Variable Font
```
--------------------------------
### CSS text-shadow Example
Source: https://takumi.kane.tw/docs/typography-and-fonts
Shows how to apply `text-shadow` to create shadow effects. It takes offset, blur, and color values, and layers can be stacked with commas.
```css
h1 {
text-shadow: 2px 2px 4px #000000;
}
```
--------------------------------
### Basic ImageResponse Usage
Source: https://takumi.kane.tw/docs/image-response
Example of creating and exporting an ImageResponse from a route handler. This demonstrates the basic structure for serving an image.
```typescript
export default function Page() {
return (
);
}
```
--------------------------------
### Add Event Template using bun
Source: https://takumi.kane.tw/llms-full.txt
Use this command to add the Event Template to your project with bun. Ensure shadcn-ui is installed.
```bash
bun x shadcn@latest add https://takumi.kane.tw/templates/registry/event-template.json
```
--------------------------------
### Add Event Template using npm
Source: https://takumi.kane.tw/llms-full.txt
Use this command to add the Event Template to your project with npm. Ensure shadcn-ui is installed.
```bash
npx shadcn@latest add https://takumi.kane.tw/templates/registry/event-template.json
```
--------------------------------
### Add Event Template using pnpm
Source: https://takumi.kane.tw/llms-full.txt
Use this command to add the Event Template to your project with pnpm. Ensure shadcn-ui is installed.
```bash
pnpm dlx shadcn@latest add https://takumi.kane.tw/templates/registry/event-template.json
```
--------------------------------
### Create Server File Route for OG Image
Source: https://takumi.kane.tw/llms-full.txt
Define a server file route using TanStack Start's `createFileRoute` and `server.handlers` to generate OG images. This handler accepts 'title' and 'description' query parameters.
```tsx
import { createFileRoute } from "@tanstack/react-router";
import ImageResponse from "takumi-js/response";
export const Route = createFileRoute("/og-image")({
server: {
handlers: {
GET({ request }) {
const url = new URL(request.url);
const title = url.searchParams.get("title") ?? "Takumi + TanStack Start";
const description =
url.searchParams.get("description") ?? "Render OG images from a route handler.";
return new ImageResponse(
{title}
{description}
,
{
width: 1200,
height: 630,
},
);
},
},
},
});
```
--------------------------------
### Add Quote Template using bun
Source: https://takumi.kane.tw/llms-full.txt
Use this command to add the Quote Template to your project with bun. Ensure shadcn-ui is installed.
```bash
bun x shadcn@latest add https://takumi.kane.tw/templates/registry/quote-template.json
```
--------------------------------
### Add Quote Template using npm
Source: https://takumi.kane.tw/llms-full.txt
Use this command to add the Quote Template to your project with npm. Ensure shadcn-ui is installed.
```bash
npx shadcn@latest add https://takumi.kane.tw/templates/registry/quote-template.json
```
--------------------------------
### Add Quote Template using pnpm
Source: https://takumi.kane.tw/llms-full.txt
Use this command to add the Quote Template to your project with pnpm. Ensure shadcn-ui is installed.
```bash
pnpm dlx shadcn@latest add https://takumi.kane.tw/templates/registry/quote-template.json
```
--------------------------------
### SVG Icon Example
Source: https://takumi.kane.tw/docs/typography-and-fonts
An example of an SVG icon used for visual representation. The icon's path data defines its shape.
```svg
```
--------------------------------
### Install Nuxt OG Image Module
Source: https://takumi.kane.tw/llms-full.txt
Add the Nuxt OG Image module to your project using npm, pnpm, yarn, or bun.
```bash
npx nuxt module add og-image
```
```bash
pnpm dlx nuxt module add og-image
```
```bash
yarn dlx nuxt module add og-image
```
```bash
bun x nuxt module add og-image
```
--------------------------------
### Render Frames for FFmpeg Video Output
Source: https://takumi.kane.tw/llms-full.txt
This example demonstrates rendering raw frames using `render()` and piping them into ffmpeg for video output. It's suitable for creating video files by processing each frame individually.
```tsx
// @noErrors
import { render } from "takumi-js";
import { spawn } from "bun";
import { Scene, keyframes } from "./scene";
const fps = 30;
const durationSeconds = 4;
const width = 1200;
const height = 630;
const totalFrames = fps * durationSeconds;
const ffmpeg = spawn(
[
"ffmpeg",
"-y",
"-f",
"rawvideo",
"-pixel_format",
"rgba",
"-video_size",
`${width}x${height}`,
"-framerate",
`${fps}`,
"-i",
"pipe:0",
"output.mp4",
],
{ stdin: "pipe", stdout: "ignore", stderr: "ignore" },
);
const scene = ;
for (let frameIndex = 0; frameIndex < totalFrames; frameIndex++) {
const timeMs = (frameIndex / fps) * 1000;
const frame = await render(scene, {
width,
height,
format: "raw",
keyframes,
timeMs,
});
ffmpeg.stdin.write(frame);
}
ffmpeg.stdin.end();
await ffmpeg.exited;
```
--------------------------------
### Add Event Template using yarn
Source: https://takumi.kane.tw/llms-full.txt
Use this command to add the Event Template to your project with yarn. Ensure shadcn-ui is installed.
```bash
yarn dlx shadcn@latest add https://takumi.kane.tw/templates/registry/event-template.json
```
--------------------------------
### Register Font Families
Source: https://takumi.kane.tw/docs/typography-and-fonts
Imports the Renderer and registers font families. This is a common setup for typography-related operations.
```javascript
import { Renderer } from "@react-three/drei";
const renderer = new Renderer();
renderer.registerFontFamily("Inter", ["Inter", "sans-serif"])
renderer.registerFontFamily("Roboto", ["Roboto", "sans-serif"])
renderer.registerFontFamily("Open Sans", ["Open Sans", "sans-serif"])
renderer.registerFontFamily("Lato", ["Lato", "sans-serif"])
renderer.registerFontFamily("Montserrat", ["Montserrat", "sans-serif"])
renderer.registerFontFamily("Source Sans Pro", ["Source Sans Pro", "sans-serif"])
renderer.registerFontFamily("Raleway", ["Raleway", "sans-serif"])
renderer.registerFontFamily("Nunito", ["Nunito", "sans-serif"])
renderer.registerFontFamily("Poppins", ["Poppins", "sans-serif"])
renderer.registerFontFamily("Ubuntu", ["Ubuntu", "sans-serif"])
renderer.registerFontFamily("Merriweather", ["Merriweather", "serif"])
renderer.registerFontFamily("Lora", ["Lora", "serif"])
renderer.registerFontFamily("PT Serif", ["PT Serif", "serif"])
renderer.registerFontFamily("Playfair Display", ["Playfair Display", "serif"])
renderer.registerFontFamily("Merriweather Sans", ["Merriweather Sans", "sans-serif"])
renderer.registerFontFamily("Source Code Pro", ["Source Code Pro", "monospace"])
renderer.registerFontFamily("Inconsolata", ["Inconsolata", "monospace"])
renderer.registerFontFamily("Fira Code", ["Fira Code", "monospace"])
renderer.registerFontFamily("JetBrains Mono", ["JetBrains Mono", "monospace"])
```
--------------------------------
### Code Highlighting Configuration
Source: https://takumi.kane.tw/docs/typography-and-fonts
Configuration for code highlighting, specifying themes and styles for different languages. This setup uses CSS variables for theme customization.
```html
<div$103$104$105$106
```
--------------------------------
### HTML for Body Copy
Source: https://takumi.kane.tw/docs/typography-and-fonts
A basic HTML structure for displaying body copy. This example shows a `div` element intended for paragraph text.
```html
Body copy
```
--------------------------------
### ImageResponse with JSX Element
Source: https://takumi.kane.tw/docs/typography-and-fonts
Renders a JSX element within an ImageResponse. This example shows how to pass component and options to ImageResponse.
```typescript
import { ImageResponse } from "@vercel/og";
export const runtime = "edge";
export default function () {
return new ImageResponse(
(
Hello world
),
{
width: 1200,
height: 630,
}
);
}
```
--------------------------------
### ImageResponse with Custom Font
Source: https://takumi.kane.tw/docs/typography-and-fonts
Example of using ImageResponse with a custom font. This is useful for generating dynamic images in API routes.
```typescript
import { ImageResponse } from '@vercel/image/edge';
export const config = {
runtime: 'edge',
};
export default async function handler() {
const interRegular = fetch(new URL('../fonts/Inter-Regular.woff2', import.meta.url)).then((res) => res.arrayBuffer());
return new ImageResponse(
(
Hello World
),
{
width: 1200,
height: 630,
fonts: [
{
name: 'Inter',
data: await interRegular,
style: 'normal',
weight: 400,
},
],
}
);
}
```
--------------------------------
### Handling Promise Resolution
Source: https://takumi.kane.tw/docs/typography-and-fonts
Example of handling a resolved Promise using the .then() method. The 'res' parameter represents the resolved value.
```typescript
then(res: Response => {
return res.arrayBuffer();
})
```
--------------------------------
### Configure Font Weights
Source: https://takumi.kane.tw/docs/typography-and-fonts
Defines the available font weights for a specific font family. This example shows how to set the 'weight' property for the 'Inter' font.
```typescript
fonts: any[] | undefined;
fonts = [
{
name: "Inter",
weight: "400"
}
]
```
--------------------------------
### CSS text-transform Example
Source: https://takumi.kane.tw/docs/typography-and-fonts
Demonstrates the use of the `text-transform` CSS property to change the case of text. Common values include `uppercase`, `lowercase`, and `capitalize`.
```css
div {
text-transform: uppercase;
}
```
--------------------------------
### Define Font Families
Source: https://takumi.kane.tw/docs/typography-and-fonts
Specifies the available font families for use in the application. This example shows how to define a font family named 'Inter'.
```typescript
fonts: any[] | undefined;
fonts = [
{
name: "Inter",
weight:
}
]
```
--------------------------------
### Generate Image Response with Custom Fonts
Source: https://takumi.kane.tw/docs/typography-and-fonts
This example demonstrates how to create an ImageResponse using custom fonts and Tailwind CSS. It's compatible with next/og and supports React elements.
```typescript
import { ImageResponse } from "takumi-js/response";
export function GET() {
return new ImageResponse(
Hello world!
,
{
width: 1200,
height: 630,
fonts: [
{
name: "Inter",
data: await fetch(
new URL(
"../assets/Inter-SemiBold.ttf",
import.meta.url
)
).then((res) => res.arrayBuffer()),
style: "normal",
weight: 700,
},
],
}
);
}
```
--------------------------------
### Style Text with Font Properties
Source: https://takumi.kane.tw/docs/typography-and-fonts
Apply font properties like fontFamily, fontVariationSettings, and fontFeatureSettings to style text elements. This example uses 'Manrope' with specific variations.
```javascript
style = {
fontFamily: "Manrope",
fontVariationSettings: "'wght' 700, 'wdth' 150",
fontFeatureSettings: "'ss01'",
}
```
--------------------------------
### AI Agent Prompt for Takumi v1 to v2 Upgrade
Source: https://takumi.kane.tw/llms-full.txt
This prompt guides an AI agent to upgrade a project from Takumi v1 to v2. It specifies changes for JavaScript and Rust packages, including API adjustments, option modifications, and feature flag updates.
```text
Upgrade this project from Takumi v1 to v2. Apply `old -> new` for the packages it imports.
JS (takumi-js, @takumi-rs/*):
- await the top-level render/renderAnimation/renderSvg and the napi Renderer methods (they await resource loading)
- new Renderer({fonts}) -> new Renderer(); pass fonts per call: render(node, {fonts:[inter]})
- loadFont/loadFonts/loadFontSync -> registerFont (only to reuse a font across renders)
- render option fetchedResources -> images (keyed by src; no global image store)
- render option resourcesOptions -> images.fetch/images.timeout; combine pre-fetched entries and a shared byte cache with the group form images: { sources: [...], fetch: myFetch, fetchCache: myMap }
- extractResourceUrls + fetchResources helpers -> prepareImages({ node, fetchCache? }) from "takumi-js/helpers"
- format is a string ("png"|"jpeg"|"webp"|...) with optional quality (jpeg/lossy webp) and lossless (webp)
- createImageResponse(opts)(jsx) -> new ImageResponse(jsx, opts)
Rust (takumi crate):
- use takumi::prelude::*; use takumi::render; (internals now behind the `unstable` feature)
- GlobalContext -> Fonts, passed via RenderOptions::builder().fonts(&fonts)
- Cargo feature "raster" -> "raster-backend" (+ rayon); enable "svg-backend" for render_svg
- OutputFormat::Jpeg/WebP carry Quality; lossless -> WebPLossless; write_image(img, &mut out, fmt)
- measure_layout -> measure, render_sequence_animation -> render_animation; render -> Bitmap
- render_for_layout drops the current_color argument
- style value types (unstable): LengthDefaultsToZero -> Length, ColorDefaultsToTransparent -> ColorInput
- BackgroundPosition -> PositionValue, BackgroundPositions -> PositionValues; ObjectPosition/TransformOrigin removed -> PositionValue (PositionValue::center() for the 50% 50% default)
- core enums (NodeKind, ImageSource, ImageSourceInput, ImageCacheMode, Length, ColorInput) and css PropertyId/StyleDeclaration are now #[non_exhaustive]: add a wildcard match arm; build via constructors, not struct literals
CSS defaults changed, verify visually: position relative -> static; border/outline width
0 -> medium (3px); negative scale reflects; line-clamp is a shorthand; currentColor in SVG
images is no longer tinted; transform-origin/object-position default top-left -> center; bolder/lighter
and larger/smaller font keywords now resolve; more elements (lists, sub/sup, ins/del, forms,
details/summary) carry default styles.
```
--------------------------------
### Generate Image Response with Custom Styles
Source: https://takumi.kane.tw/docs/typography-and-fonts
Example of creating an image response using ImageResponse from 'takumi-js/response'. Supports JSX, Tailwind CSS via 'tw' prop, and custom styles.
```typescript
import { ImageResponse } from "takumi-js/response";
export function GET() {
return new ImageResponse(
Hello world!
,
{
width: 1200,
height: 630,
}
);
}
```
--------------------------------
### Render Text with Custom Font Size and Weight
Source: https://takumi.kane.tw/docs/typography-and-fonts
Example of rendering text with specific font size and bold weight using Tailwind CSS classes. Ensure the necessary Tailwind CSS configuration is in place.
```html
Hello World
```
--------------------------------
### CSS Text Shadow Effect
Source: https://takumi.kane.tw/docs/typography-and-fonts
Add shadow effects to text for enhanced visual appeal. This example creates a glow effect using multiple shadows.
```css
div {
text-shadow: "2px 2px 4px rgba(0,0,0,0.5), 0 0 8px blue";
}>Glow
```
--------------------------------
### Add Product Card Template using bun
Source: https://takumi.kane.tw/llms-full.txt
Use this command to add the Product Card Template to your project with bun.
```bash
bun x shadcn@latest add https://takumi.kane.tw/templates/registry/product-card-template.json
```
--------------------------------
### Add Docs Template using bun
Source: https://takumi.kane.tw/llms-full.txt
Use this command to add the Docs Template to your project with bun.
```bash
bun x shadcn@latest add https://takumi.kane.tw/templates/registry/docs-template.json
```
--------------------------------
### Importing Takumi Data Structures and Functions
Source: https://takumi.kane.tw/llms-full.txt
Use `takumi::prelude::*` for data structures and `takumi::render` for entry-point functions. Deep module paths are no longer exposed directly.
```rust
use takumi::prelude::*;
use takumi::render;
```
--------------------------------
### Importing and Using Fonts
Source: https://takumi.kane.tw/docs/typography-and-fonts
Shows how to import a font from a CDN and apply it to an element using CSS.
```css
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
body {
font-family: "Inter", sans-serif;
}
```
--------------------------------
### Error Handling with `ready` Promise
Source: https://takumi.kane.tw/docs/image-response
Illustrates how to handle potential rendering errors using the `ready` promise exposed by ImageResponse.
```APIDOC
## Error Handling
`ImageResponse` exposes a `ready` promise that resolves on success and rejects on failure. Await it to serve a fallback.
### Request Example
```javascript
const response = new ImageResponse();
try {
await response.ready;
return response;
} catch {
return new Response("Failed to generate image", { status: 500 });
}
```
### `onError` Hook
The `onError` option is a notification hook for side effects like logging. Its return value is ignored, and the response stream still errors. Use the `ready` promise for fallback logic.
### Request Example
```javascript
new ImageResponse(, {
onError: (error) => console.error(error),
});
```
```
--------------------------------
### Fetch font from URL and use in CSS
Source: https://takumi.kane.tw/docs/typography-and-fonts
Demonstrates fetching a font file from a URL and applying it using CSS. Ensure the URL is correct and the font format is supported.
```javascript
fetch("https://example.com/Inter.woff2").then(response => {
// Handle response
});
```
--------------------------------
### Add Quote Template using yarn
Source: https://takumi.kane.tw/llms-full.txt
Use this command to add the Quote Template to your project with yarn. Ensure shadcn-ui is installed.
```bash
yarn dlx shadcn@latest add https://takumi.kane.tw/templates/registry/quote-template.json
```
--------------------------------
### Add Repository Template with npm
Source: https://takumi.kane.tw/llms-full.txt
Use this command to add the repository template to your project with npm.
```bash
npx shadcn@latest add https://takumi.kane.tw/templates/registry/repository-template.json
```
--------------------------------
### Add Docs Template using npm
Source: https://takumi.kane.tw/llms-full.txt
Use this command to add the Docs Template to your project with npm.
```bash
npx shadcn@latest add https://takumi.kane.tw/templates/registry/docs-template.json
```
--------------------------------
### Initialize Renderer
Source: https://takumi.kane.tw/docs/image-response
Instantiate the Renderer class. This is a prerequisite for creating ImageResponse objects.
```javascript
const renderer = new Renderer();
```
--------------------------------
### Add Repository Template with pnpm
Source: https://takumi.kane.tw/llms-full.txt
Use this command to add the repository template to your project with pnpm.
```bash
pnpm dlx shadcn@latest add https://takumi.kane.tw/templates/registry/repository-template.json
```
--------------------------------
### Add Product Card Template using npm
Source: https://takumi.kane.tw/llms-full.txt
Use this command to add the Product Card Template to your project with npm.
```bash
npx shadcn@latest add https://takumi.kane.tw/templates/registry/product-card-template.json
```
--------------------------------
### Cancel Render Operation
Source: https://takumi.kane.tw/llms-full.txt
Demonstrates how to pass an AbortSignal to the render function to allow for cancellation of the rendering process, for example, if it's fetching fonts or images.
```tsx
await render(, { width: 1200, height: 630, signal: request.signal });
```
--------------------------------
### Text Wrapping Options
Source: https://takumi.kane.tw/docs/typography-and-fonts
Demonstrates 'balance' and 'pretty' text wrapping modes. 'balance' evens out line lengths.
```plaintext
balance
```
```plaintext
pretty
```
--------------------------------
### Add Product Card Template using pnpm
Source: https://takumi.kane.tw/llms-full.txt
Use this command to add the Product Card Template to your project with pnpm.
```bash
pnpm dlx shadcn@latest add https://takumi.kane.tw/templates/registry/product-card-template.json
```