Render Astro Components – Anywhere
Render Astro components outside classic pages – as HTMX fragments, email templates, OG cards or CMS blocks. Zero-config, multi-channel.
GitHubRender Astro components outside classic pages – as HTMX fragments, email templates, OG cards or CMS blocks. Zero-config, multi-channel.
npm install @casoon/fragment-rendererWhat is @casoon/fragment-renderer?
A runtime that makes Astro components accessible outside classic Astro pages. The rendering result is always an HTML string or a Response object — no build system, no dev server needed.
The entry point is createAstroRuntime(). Those who need more can add a registry, services or presets — incrementally, without changing anything else.
When do you need this?
Render Astro components without a running Astro server — in Workers, pipelines and email systems.
HTMX Fragments
Server-side generated HTML snippets for HTMX responses. No full-page reload, no client-side hydration.
Email Templates
Render Astro components as email HTML – with layout support and provider presets for Resend and SendGrid.
OG Card Generation
Render social preview cards as HTML and then convert to an image — without a separate screenshot service.
CMS Block Rendering
Render headless CMS blocks with a typed block registry – content comes from the CMS, components from Astro.
Quick Start
import { createAstroRuntime } from '@casoon/fragment-renderer';
import Banner from './Banner.astro';
const runtime = createAstroRuntime();
// Render as HTML string
const html = await runtime.renderComponent(Banner, { title: 'Hello World' });
// Render as Response (e.g. for Cloudflare Worker)
const response = await runtime.renderToResponse(Banner, { title: 'Hello World' }); Presets
Pre-configured bundles for common use cases – ready to use without further configuration.
AHA Stack Preset
Astro + HTMX + Alpine.js. Includes HTMX helpers, response headers and locale context. Ready for partial page updates out of the box.
Email Preset
Email-optimized rendering with provider presets. `renderEmail()` returns HTML and subject – compatible with Resend, SendGrid and others.
CMS Preset
Headless CMS integration with typed block registry. Blocks are registered by ID and rendered in sequence.
Adapters
The right integration for every runtime environment – Node.js, Edge and CLI.
Node.js
HTTP request/response integration for Express, Hono, Fastify and other Node.js servers.
Cloudflare Workers
Edge rendering with Worker bindings. Direct integration into the Worker fetch handler.
Vercel Edge / Serverless
Compatible with Vercel Edge Functions and Serverless Functions. Same API, different runtime.
CLI
Command-line rendering for static pipelines, generation scripts and CI processes.
AHA Stack Preset in Detail
import { ahaStackPreset } from '@casoon/fragment-renderer/presets/aha-stack';
const runtime = createAstroRuntime(ahaStackPreset({ locale: 'en' }));
const htmx = await runtime.getService('htmx');
// Set HTMX-specific response headers
const headers = htmx.getResponseHeaders({ trigger: 'cartUpdated' }); Design Principles
Start simple, extend incrementally — without overhead for what you don't need.
Zero-Config
Ready to use immediately after installation. No configuration switches, no mode switching — `createAstroRuntime()` is enough.
Progressive Extensibility
Registry, services, presets — use only what you need. No overhead for projects that don't need it.
Astro-Native
No custom build process, no forced abstractions. Astro stays Astro — the runtime only wraps the Container API.
In production: Rechenkiste project
fragment-renderer was developed in the context of the AHA Stack and deployed productively in the Rechenkiste app. The article describes how HTMX partials are rendered with Astro components as fragments.
In the CASOON ecosystem
fragment-renderer is part of a toolchain of open source plugins – all MIT-licensed, all built for Astro.
@casoon/astro-structured-data
Schema.org components for Astro – Article, FAQ, Product, Breadcrumb and more. For SEO on rendered pages.
@casoon/astro-post-audit
Checks canonical, headings, meta tags, JSON-LD and accessibility directly at build time.
@casoon/astro-site-files
Generates robots.txt, sitemap.xml with i18n hreflang, llms.txt and security.txt.
Frequently Asked Questions
What's the difference from regular Astro API endpoints?
Astro API endpoints require the Astro page context and a running dev or production server. fragment-renderer works outside that context – inside a Cloudflare Worker, an email pipeline, or a CLI script, without an Astro build process.
Which Astro versions are supported?
Astro >= 4.0.0 as a peer dependency. The runtime uses the stable Astro Container API, available since Astro 4.
Does it work with Cloudflare Workers?
Yes. The Cloudflare adapter (`@casoon/fragment-renderer/adapters/cloudflare`) integrates directly with the Worker fetch handler. The AHA Stack preset is specifically designed for this use case.
Can I manage multiple component types in parallel?
Yes, via the Component Registry. Components are registered by ID and can be rendered any number of times with different props – without re-importing.
Is this package free?
@casoon/fragment-renderer is published under the MIT license and fully open source.