feat(astro): add @json-render/astro SSR HTML renderer by Aperrix · Pull Request #218 · vercel-labs/json-render

Aperrix · 2026-03-13T09:05:32Z

Summary

Add @json-render/astro, an Astro renderer with defineRegistry + <Renderer /> for native .astro components. Same API pattern as React, Vue, Svelte, and Solid renderers.
defineRegistry(catalog, { components }) creates a typed component registry; <Renderer /> walks the spec tree rendering each element using real .astro files with <slot /> for children
<ElementRenderer /> uses Astro.self for recursive tree walking (visibility, props resolution, repeat)
Static HTML output (zero JS). Works in SSG (build time) and SSR (request time, with any adapter)
Astro Islands pattern: static content via @json-render/astro + interactive islands via @json-render/react (or Vue, Svelte, Solid) with client:* directives
Full support for $state, $cond, $item, $index, $template, visible, and repeat expressions
Astro example project (examples/astro/) with static demo and hybrid React island counter
Full documentation: README, API docs page, skill, docs-chat integration, navigation links

Test plan

49 unit tests across 3 files: schema (40), defineRegistry (5), public API exports (4)
Schema tests: structure, defineCatalog, catalog.prompt(), catalog.validate(), catalog.jsonSchema(), catalog.zodSchema()
Astro-specific tests: static HTML rules, no actions, slots support, prompt modes
Astro example builds successfully (pnpm build in examples/astro/)
Type-check passes
Counter island uses correct defineRegistry + createHandlers pattern with proper provider order (StateProvider > VisibilityProvider > ActionProvider)

vercel · 2026-03-13T09:05:38Z

@Aperrix is attempting to deploy a commit to the Vercel Labs Team on Vercel.

A member of the Team first needs to authorize it.

socket-security · 2026-03-13T09:06:38Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Package	Supply Chain Security	Quality	Maintenance
@astrojs/check@0.9.8
@astrojs/react@5.0.0
@ai-sdk/gateway@3.0.66 ⏵ 3.0.80	⁺³¹	⁺¹	⁺¹
svelte@5.54.1 ⏵ 5.55.0
astro@6.0.4
ai@6.0.116 ⏵ 6.0.138	⁺⁸		⁺¹

View full report

Aperrix · 2026-03-24T19:47:51Z

@ctate can you please review this

ctate

Thanks for the excellent work on this, @Aperrix! The implementation is solid — clean API, good test coverage, and the Islands demo is a great addition.

A couple of things to address before merging:

Rebase needed — main has advanced to v0.15 (with @json-render/ink and @json-render/shadcn-svelte), so .changeset/config.json and the stale v0-14-release.md changeset will conflict. After rebasing, the changeset should also be renamed since v0.15 is already released.
Missing @astrojs/check dependency — the example's check-types script runs astro check, which prompts to install @astrojs/check interactively. Please add it to devDependencies in examples/astro/package.json so CI doesn't hang.

Happy to re-review once those are sorted!

New package that transforms json-render specs into HTML strings on the server. Zero framework dependencies — works in Astro, Cloudflare Workers, Node.js, Deno, Bun. Includes schema, catalog types, renderToHtml(), escapeHtml(), and full test suite.

- Package README with Astro and Cloudflare Workers examples - Skill file for AI agents - API reference page for docs site - Root README updated with package table entry and renderer section - Changeset config, docs navigation, page titles, and docs-chat updated

Minimal Astro app demonstrating renderToHtml() with set:html, including visibility conditions, repeat, $cond expressions, and a registry of pure HTML component render functions.

…time state Add 8 new tests covering SSR safety: - No DOM globals dependency - Synchronous output (no promises) - No script tags or event handlers in output - XSS escaping in HTML attributes (href, src, alt) - Unicode content handling - Request-time state resolution (per-request rendering) - No caching leak between renders - Repeat with $index for position-aware rendering Example now demonstrates server-side state injection with timestamp.

Add islands demo page showing @json-render/astro (static SSR) coexisting with @json-render/react (interactive island hydrated via client:visible). Document the islands pattern for all 4 supported frameworks (React, Vue, Svelte, Solid) in package README, skill file, and API docs page.

…igation Counter.tsx now uses defineRegistry's createHandlers with refs pattern (matching dashboard example) instead of disconnected no-op actions. Fixes provider order to StateProvider > VisibilityProvider > ActionProvider.

… Renderer Replace string-based renderToHtml() with native .astro components: - Renderer.astro and ElementRenderer.astro for recursive spec tree walking - defineRegistry(catalog, { components }) matching React/Vue/Svelte/Solid API - Astro-specific schema with static HTML rules (no actions/events) - Example .astro components (Section, Card, Heading, Text, Badge, List, etc.) - Full test suite (schema, catalog, registry, public API exports) - Aligned docs (README, SKILL.md, web API page) with other renderer packages - Updated changeset for v0.14 release

…heading level

- Remove stale v0-14-release.md changeset (already released) - Rename v0-15-astro-release.md → astro-renderer.md (v0.15 already released) - Add @astrojs/check to example devDependencies to prevent CI hang Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Includes @astrojs/check for the Astro example and all v0.15 dependencies. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

… sections - Rewrite description for better triggering (SSG, SSR, edge, Cloudflare) - Add Installation section with peer dependencies - Add dedicated Repeat section with full example - Add Common Mistakes section (visible placement, missing children, etc.) - Add Fallback component pattern - Document component aliasing in Quick Start - Unify exports into single table - Add Heading component example with level validation Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Aperrix

Thanks for the thorough review @ctate! All feedback has been addressed:

1. Rebased on main (v0.15)

Resolved all conflicts in .changeset/config.json, README.md, docs-navigation.ts, and route.ts — merged @json-render/ink + @json-render/shadcn-svelte alongside @json-render/astro
Regenerated pnpm-lock.yaml

2. Changeset cleanup

Deleted stale v0-14-release.md (already released)
Renamed v0-15-astro-release.md → astro-renderer.md (since v0.15 is out)

3. Added @astrojs/check

Added @astrojs/check@^0.9.8 to examples/astro/package.json devDependencies so astro check doesn't hang CI

4. Bonus: Improved the Astro skill using Anthropic's skill-creator

I ran the @json-render/astro skill through Anthropic's skill-creator evaluation pipeline (3 test cases × 2 configs, graded with assertions). Results:

Metric	New Skill	Old Skill	Delta
Pass rate	100%	100%	—
Avg time	109.7s	155.6s	−30%
Avg tokens	29.3k	32.1k	−9%

The new skill adds: Installation section, dedicated Repeat docs, Common Mistakes (5 gotchas), Fallback component pattern, component aliasing, unified exports table, and a more aggressive trigger description.

I'd recommend running the other renderer skills (react, vue, svelte, solid, ink) through the same skill-creator pipeline — it's a great way to identify gaps and measure improvements quantitatively.

Ready for re-review!

Aperrix force-pushed the feat/astro-ssr-renderer branch from 1924cec to 71dbc33 Compare March 13, 2026 20:12

ctate requested changes Mar 24, 2026

View reviewed changes

Aperrix and others added 13 commits March 25, 2026 10:33

feat(astro): add Astro SSR example project

2631982

Minimal Astro app demonstrating renderToHtml() with set:html, including visibility conditions, repeat, $cond expressions, and a registry of pure HTML component render functions.

chore(astro): add changeset for v0.14 release

bf25daf

fix(astro): add peerDependenciesMeta for optional astro and validate …

d0144f0

…heading level

chore(deps): regenerate lockfile after rebase on main

73c4a88

chore(deps): regenerate lockfile after rebase on main

561f150

Includes @astrojs/check for the Astro example and all v0.15 dependencies. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Aperrix force-pushed the feat/astro-ssr-renderer branch from 71dbc33 to 69fe1e2 Compare March 25, 2026 10:48

Aperrix commented Mar 25, 2026

View reviewed changes

Aperrix requested a review from ctate March 25, 2026 10:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(astro): add @json-render/astro SSR HTML renderer#218

feat(astro): add @json-render/astro SSR HTML renderer#218
Aperrix wants to merge 13 commits intovercel-labs:mainfrom
Aperrix:feat/astro-ssr-renderer

Aperrix commented Mar 13, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 13, 2026

Uh oh!

socket-security bot commented Mar 13, 2026 •

edited

Loading

Uh oh!

Aperrix commented Mar 24, 2026

Uh oh!

ctate left a comment

Uh oh!

Aperrix left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Aperrix commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

vercel bot commented Mar 13, 2026

Uh oh!

socket-security bot commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Aperrix commented Mar 24, 2026

Uh oh!

ctate left a comment

Choose a reason for hiding this comment

Uh oh!

Aperrix left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Aperrix commented Mar 13, 2026 •

edited

Loading

socket-security bot commented Mar 13, 2026 •

edited

Loading