Yaml

This is the YAML wire format for json-render, built for streaming AI-generated UIs with progressive parsing and surgical edits. Instead of JSONL, you get code fences like yaml-spec and yaml-edit that stream line-by-line and emit JSON Patch operations as they parse. The AI SDK transform drops in as a pipeJsonRender replacement, and it handles four fence types including merge patches (RFC 7396) and unified diffs. If you're building UI streaming with Vercel AI SDK and want something more readable than line-delimited JSON, this gives you that plus built-in prompt generation and multi-turn edit support. The streaming parser works incrementally, so you get partial results before the LLM finishes.

skills.sh installs: 1.1K
GitHub stars: 19.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/json-render --skill yaml --agent claude-code

Installs into .claude/skills of the current project.

Files

@json-render/yaml

YAML wire format for @json-render/core. Progressive rendering and surgical edits via streaming YAML.

Key Concepts

YAML wire format: Alternative to JSONL that uses code fences (yaml-spec, yaml-edit, yaml-patch, diff)
Streaming parser: Incrementally parses YAML, emits JSON Patch operations via diffing
Edit modes: Patch (RFC 6902), merge (RFC 7396), and unified diff
AI SDK transform: TransformStream that converts YAML fences into json-render patches

Generating YAML Prompts

import { yamlPrompt } from "@json-render/yaml";
import { catalog } from "./catalog";

// Standalone mode (LLM outputs only YAML)
const systemPrompt = yamlPrompt(catalog, {
  mode: "standalone",
  editModes: ["merge"],
  customRules: ["Always use dark theme"],
});

// Inline mode (LLM responds conversationally, wraps YAML in fences)
const chatPrompt = yamlPrompt(catalog, { mode: "inline" });

Options:

SKILL.md on GitHub