kittyhtml - npm Package Compare versions

Comparing version

0.3.0

0.3.1

+4

-4

package.json

		{
		"name": "kittyhtml",
		"version": "0.3.0",
		"version": "0.3.1",
		"description": "Render HTML to an image and display it inline in Kitty/iTerm2-capable terminals. No browser — Rust + Blitz layout, headless CPU rasterization.",
		@@ -28,5 +28,5 @@ "type": "module",
		"optionalDependencies": {
		"kittyhtml-darwin-arm64": "0.3.0",
		"kittyhtml-darwin-x64": "0.3.0",
		"kittyhtml-linux-x64-gnu": "0.3.0"
		"kittyhtml-darwin-arm64": "0.3.1",
		"kittyhtml-darwin-x64": "0.3.1",
		"kittyhtml-linux-x64-gnu": "0.3.1"
		},
		@@ -33,0 +33,0 @@ "scripts": {

+24

-23

skill/kittyhtml/SKILL.md

		@@ -8,3 +8,3 @@ ---

		The user has asked for output as kittyhtml or khtml — they want the result rendered as a styled HTML page and displayed inline in their terminal as an image, via the `kittyhtml` CLI.
		The user has asked for output as kittyhtml or khtml — they want the result rendered as a styled HTML page and displayed inline in their terminal as an image.

		@@ -15,7 +15,7 @@ ## What to do

		2. Generate HTML that represents the content the user asked about — a styled page, card, table, summary. Keep it focused; the rendered image should fit on one screen.
		2. Generate HTML that represents the content. Be liberal with CSS — Blitz handles flexbox, grid, `<style>` blocks, class selectors, web fonts, and `<img>` tags. Treat it like a real browser with the caveats listed below.

		3. Pipe it through the CLI:
		3. Pipe through the CLI:
		```sh
		cat <<'HTML' \| kittyhtml --width 700 --scale 2
		cat <<'HTML' \| kittyhtml --scale 2
		<!DOCTYPE html>
		@@ -26,6 +26,3 @@ <html><body>...</body></html>

		Use `--scale 2` for crisp text on retina/HiDPI. Pick width based on shape:
		- `--width 700`–`800` for full pages and reports
		- `--width 500` for cards and summaries
		- `--width 400` for compact, just-a-snippet output
		Don't pass `--width` unless the user asks for a specific size — the default adapts to their terminal width. Always pass `--scale 2` for sharper text on HiDPI displays.

		@@ -36,19 +33,18 @@ 4. After piping, write a one-line confirmation (e.g. "Rendered above."). The image is the deliverable; don't restate its contents in text.

		kittyhtml v0.3+ uses Blitz (Stylo + Taffy + Parley + Vello). Most modern CSS works:
		kittyhtml v0.3+ uses Blitz (Stylo + Taffy + Parley + Vello CPU). Treat it like a modern browser:

		- Flexbox (`display: flex`, `flex: 1`, `gap`, etc.)
		- CSS Grid (`display: grid`, `grid-template-columns`, etc.)
		- `border-radius`, `box-shadow`, `opacity`
		- `max-width`, `min-width`, `width`, `height`
		- `background:` shorthand (no need for `background-color` longhand)
		- Native `<ul>` / `<ol>` bullets
		- `<img>` tags (with absolute URLs; HTTPS works)
		- `position: relative` / `absolute`
		- Web fonts via `@font-face`
		- Full `<style>` blocks and class selectors work. Use them.
		- Flexbox, CSS Grid, `border-radius`, `box-shadow`, `opacity`, web fonts via `@font-face`, `<img>` tags with HTTPS URLs.
		- `max-width`, `min-width`, `width`, `height` all work in any units.
		- `<ul>` / `<ol>` render native bullets/numbers.
		- `position: relative` and (limited) `absolute`.

		Inline styles only — no `<style>` blocks, no `class` selectors are honored.
		## Caveats (Blitz pre-alpha)

		- `<thead>` rows render the background but lose text content. Workaround: put header rows in `<tbody>` and style the row with `font-weight: 700` instead of wrapping in `<thead>`, or apply inline `style="font-weight:700"` directly on each `<th>`.
		- Fixed widths bigger than `--width` overflow the canvas. Stick to percentages (`width: 100%`) or `max-width` on tables and large containers. The canvas dimension is `--width * --scale` pixels.

		## Fonts

		Two are baked in and reliable:
		Two are baked into the binary and reliable:
		- `'Noto Sans'` (regular, bold, italic, bold-italic)
		@@ -70,5 +66,10 @@ - `'Noto Sans Mono'` for code
		<html>
		<body style="font-family: 'Noto Sans', sans-serif; margin: 0; padding: 0; background: #f4f4f5; color: #18181b;">
		<div style="max-width: 720px; margin: 0 auto; padding: 32px 24px;">
		<div style="background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 28px 32px;">
		<head><style>
		body { font-family: 'Noto Sans', sans-serif; margin: 0; padding: 0; background: #f4f4f5; color: #18181b; }
		.wrap { max-width: 720px; margin: 0 auto; padding: 32px 24px; }
		.card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 28px 32px; }
		</style></head>
		<body>
		<div class="wrap">
		<div class="card">
		<!-- content here -->
		@@ -75,0 +76,0 @@ </div>

+16

-2

src/cli.js

		@@ -16,3 +16,4 @@ #!/usr/bin/env node
		OPTIONS
		--width N Viewport width in CSS px (default 800).
		--width N Viewport width in CSS px (default: terminal width when
		rendered to a TTY, else 1200).
		--height N Fixed canvas height; omit to auto-fit content.
		@@ -32,5 +33,18 @@ --scale N Pixel ratio for crisper output (default 1; try 2).

		// When stdout is a terminal, estimate its visible width in pixels so the
		// rendered image fits the terminal at 1:1 instead of looking small. The
		// estimate is `columns * 9` — a rough cell-width assumption that's close
		// enough on macOS terminals at default zoom. Clamped so we don't render
		// a wallpaper for someone with a 400-column tmux pane.
		function defaultWidth() {
		if (process.stdout.isTTY && typeof process.stdout.columns === 'number') {
		const cols = process.stdout.columns;
		return Math.max(400, Math.min(2400, cols * 9));
		}
		return 1200;
		}

		function parseArgs(argv) {
		const opts = {
		width: 800,
		width: defaultWidth(),
		height: null,
		@@ -37,0 +51,0 @@ scale: 1,

examples/demo.png

Sorry, the diff of this file is not supported yet

kittyhtml - npm Package Compare versions

Improved metrics

Worsened metrics