TeX Render 📐

Renders LaTeX math to PNG, JPEG, WebP, or AVIF (and SVG). Use when you need a viewable image from LaTeX instead of raw code.

Location

The render script lives in the same skill folder as this SKILL.md:

code

<skill_folder>/
├── SKILL.md
├── package.json
└── scripts/
    └── render.js

Use the directory containing this SKILL.md as the skill path. The script is at scripts/render.js relative to that folder. Invoke: node <skill_folder>/scripts/render.js. The agent loading this skill has the skill path—use it to run the script.

Install

One-time setup. After clawhub install tex-render, run npm install in the skill folder:

bash

cd <skill_folder>
npm install

When to Use

•User or task asks to "render this equation as image" or "show formula as picture"
•Your reply would contain LaTeX — render formulas as images first, then respond with plain text

Workflow: Response Contains LaTeX

Output your reply interleaved: whenever you would output LaTeX, do this instead:

•Send the preceding plain text — call message with the text written so far (no LaTeX).
•Render the LaTeX expression with this skill (default PNG; no --output dataurl). Parse the JSON for the PNG path.
•Send the image — call message with action: "send", path set to the rendered PNG, and message as short caption.
•Continue outputting the rest of the message. Repeat the cycle (text → render → send image) for each LaTeX block.

Do not output raw LaTeX. Do not ask the user for permission to render — render and send images immediately when LaTeX would appear in your reply. Do not accumulate everything and send at the end — send text and images in order as you go.

Critical: Output in order: plain text → send → LaTeX → render → send image → plain text → send → LaTeX → render → send image → … The user must receive text and images in the natural reading order.

Example: Explaining Lagrangian:
→ Send "The Lagrangian is defined as " → Render L = T - V → Send image with caption "L = T - V" → Send ". The Euler-Lagrange equation is " → Render d/dt(∂L/∂q̇) - ∂L/∂q = 0 → Send image → Send " — this yields the equations of motion."

Usage

Run: node <skill_folder>/scripts/render.js (or node scripts/render.js when already in the skill folder).

Escaping: When invoking via shell:

•Single quotes for LaTeX without apostrophe: node scripts/render.js '\frac{d}{dt}'
•Stdin when LaTeX contains apostrophe (e.g. y' for derivative): printf '%s' "y' = f(t, y), \quad y(t_0)=y_0" | node scripts/render.js — use double quotes so ' is literal; backslashes like \quad stay intact.

bash

node <skill_folder>/scripts/render.js --help

Default output is PNG to ~/.openclaw/media/tex-render/. The script prints one JSON line with file paths: {"svg":"...","png":"..."} or {"svg":"...","jpeg":"..."}, etc. Use --output dataurl only when the conversation system explicitly supports Data URL images (otherwise it may show raw base64 text).

Examples (validated by npm test)

Use <skill_folder> = the directory containing this SKILL.md.

Basic (PNG default):

bash

node <skill_folder>/scripts/render.js 'E = mc^2'
node <skill_folder>/scripts/render.js '$$\frac{F}{m}=a$$'

LaTeX with apostrophe (e.g. y'): use stdin to avoid shell quoting issues:

bash

printf '%s' "y' = f(t, y), \quad y(t_0)=y_0" | node <skill_folder>/scripts/render.js

JPEG / WebP / AVIF:

bash

node <skill_folder>/scripts/render.js --format jpeg --quality 80 '\frac{F}{m}=a' ./out/formula
node <skill_folder>/scripts/render.js --format webp 'x^2 + y^2 = z^2'
node <skill_folder>/scripts/render.js --format avif 'E = mc^2'

Data URL (no file):

bash

node <skill_folder>/scripts/render.js --output dataurl 'E = mc^2'

Scale by width:

bash

node <skill_folder>/scripts/render.js --width 800 '\int_0^\infty e^{-x^2} dx'

Inline math (smaller rendering):

bash

node <skill_folder>/scripts/render.js --inline 'a^2 + b^2 = c^2'

Height and zoom: Use --height N or --zoom N as documented in --help.

Automatic Triggering (TOOLS.md)

To make the agent use tex-render without the user explicitly asking, add to your workspace TOOLS.md:

markdown

## LaTeX in Responses (tex-render)

**Whenever your reply would contain LaTeX** (equations, formulas, scientific notation), **use the tex-render skill** automatically. Examples: physics, math, chemistry questions with formulas.

**Workflow:** send plain text → render LaTeX → send image via message tool → continue text. Use single quotes when invoking (e.g. `'\frac{a}{b}'`).

### LaTeX / Equations (tex-render)

- When answering scientific or math questions, if your reply would contain LaTeX, use tex-render and send images — do this automatically.

Test: Ask "Explain the Lagrangian formula" without mentioning tex-render. The agent should render and send images.