fragment-rendererv0.2.0

Showcase

Each example shows real output produced by fragment-renderer itself, from files in the project repository. Input on the left, output on the right.

HTML fragment

examples/cloudflare-worker-demo/src/components/Banner.astroDetail →
const runtime = createAstroRuntime();
const html = await runtime.renderComponent(Banner, {
  message: 'Important announcement!',
  type: 'info',
});
<div class="banner" style="background: #e0f2fe; border-color: #0284c7; color: #0c4a6e;" role="alert" data-astro-cid-sqkjpi7t>
  <span class="icon" style="background: #0284c7;" data-astro-cid-sqkjpi7t>i
  </span>
  <span class="message" data-astro-cid-sqkjpi7t>Important announcement!
  </span>
</div>
  • web
  • renderComponent

Order confirmation email

examples/email-demo/templates/OrderConfirmation.astroDetail →
const preset = emailPreset({ provider: 'ses' });
const runtime = createAstroRuntime({
  baseContext: preset.baseContext,
  services: preset.services,
});
const email = await runtime.getService('email');

const html = await runtime.renderComponent(OrderConfirmation, {
  orderNumber: 'DE-2024-99812',
  customerName: 'Jane Doe',
  items: [{ name: 'Premium Abonnement (1 Jahr)', quantity: 1, price: '99.00 €' }],
  /* subtotal, shipping, total, shippingAddress */
});
email.wrapInEmailLayout(html, { title: 'Bestellbestätigung' });
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bestellbestätigung
    </title>
  </head>
  <body style="margin: 0; padding: 0; background-color: #f4f4f4;">
    <div style="display: none; max-height: 0; overflow: hidden;">Vielen Dank für Ihren Einkauf!
    </div>
    <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f4f4f4;">
      <tr>
        <td align="center">
          <table role="presentation" cellpadding="0" cellspacing="0" width="600" style="max-width: 600px;">
            <tr>
              <td>
                <html>
                  <head>
                    <title>Bestellbestätigung #DE-2024-99812
                    </title>
                  </head>
                  <body style="margin: 0; padding: 0; background-color: #f4f4f4; font-family: Arial, sans-serif;">
                    <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f4f4f4;">
                      <tr>
                        <td align="center" style="padding: 40px 0;">
                          <table role="presentation" cellpadding="0" cellspacing="0" width="600" style="max-width: 600px; background-color: #ffffff; border-radius: 8px;">
                            <tr>
                              <td style="padding: 40px; text-align: center; background-color: #10b981; border-radius: 8px 8px 0 0;">
                                <div style="font-size: 48px; margin-bottom: 10px;">✓
                                </div>
                                <h1 style="margin: 0; color: #ffffff; font-size: 24px;">Bestellung bestätigt
                                </h1>
                              </td>
                            </tr>
                            <tr>
                              <td style="padding: 40px;">
                                <p style="margin: 0 0 10px; color: #333333; font-size: 16px;">Hallo Jane Doe,
                                </p>
                                <p style="margin: 0 0 30px; color: #666666; font-size: 16px; line-height: 1.6;">Vielen Dank für Ihre Bestellung! Wir haben Ihre Bestellung
                                  <strong>#DE-2024-99812
                                  </strong> erhalten und bearbeiten sie.
                                </p>
                                <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border: 1px solid #e5e7eb; border-radius: 8px;">
                                  <tr style="background-color: #f8f9fa;">
                                    <td style="padding: 12px; font-weight: bold; border-bottom: 1px solid #e5e7eb;">Artikel
                                    </td>
                                    <td style="padding: 12px; font-weight: bold; border-bottom: 1px solid #e5e7eb; text-align: center;">Menge
                                    </td>
                                    <td style="padding: 12px; font-weight: bold; border-bottom: 1px solid #e5e7eb; text-align: right;">Preis
                                    </td>
                                  </tr>
                                  <tr>
                                    <td style="padding: 12px; border-bottom: 1px solid #e5e7eb;">Premium Abonnement (1 Jahr)
                                    </td>
                                    <td style="padding: 12px; border-bottom: 1px solid #e5e7eb; text-align: center;">1
                                    </td>
                                    <td style="padding: 12px; border-bottom: 1px solid #e5e7eb; text-align: right;">99.00 €
                                    </td>
                                  </tr>
                                  <tr>
                                    <td style="padding: 12px; border-bottom: 1px solid #e5e7eb;">Einrichtungsgebühr
                                    </td>
                                    <td style="padding: 12px; border-bottom: 1px solid #e5e7eb; text-align: center;">1
                                    </td>
                                    <td style="padding: 12px; border-bottom: 1px solid #e5e7eb; text-align: right;">0.00 €
                                    </td>
                                  </tr>
                                  <tr>
                                    <td colspan="2" style="padding: 12px; text-align: right; border-bottom: 1px solid #e5e7eb;">Zwischensumme:
                                    </td>
                                    <td style="padding: 12px; text-align: right; border-bottom: 1px solid #e5e7eb;">99.00 €
                                    </td>
                                  </tr>
                                  <tr>
                                    <td colspan="2" style="padding: 12px; text-align: right; border-bottom: 1px solid #e5e7eb;">Versand:
                                    </td>
                                    <td style="padding: 12px; text-align: right; border-bottom: 1px solid #e5e7eb;">0.00 €
                                    </td>
                                  </tr>
                                  <tr style="background-color: #f8f9fa;">
                                    <td colspan="2" style="padding: 12px; text-align: right; font-weight: bold;">Gesamt:
                                    </td>
                                    <td style="padding: 12px; text-align: right; font-weight: bold; font-size: 18px; color: #10b981;">99.00 €
                                    </td>
                                  </tr>
                                </table>
                                <div style="margin-top: 30px; padding: 20px; background-color: #f8f9fa; border-radius: 8px;">
                                  <h3 style="margin: 0 0 10px; font-size: 14px; color: #666666; text-transform: uppercase;">Lieferadresse
                                  </h3>
                                  <p style="margin: 0; color: #333333; font-size: 14px; white-space: pre-line;">Jane Doe Musterstraße 1 10115 Berlin
                                  </p>
                                </div>
                              </td>
                            </tr>
                            <tr>
                              <td style="padding: 20px 40px; background-color: #f8f9fa; border-radius: 0 0 8px 8px; text-align: center;">
                                <p style="margin: 0; color: #666666; font-size: 14px;">Bei Fragen kontaktieren Sie uns unter support@example.com
                                </p>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </body>
                </html>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>
  • email
  • emailPreset

OG card

examples/og-preview-demo/templates/OGCard.astroDetail →
const runtime = createAstroRuntime({ baseContext: { channel: 'og' } });
const html = await runtime.renderComponent(OGCard, {
  title: 'Wie man Astro-Komponenten überall rendert',
  author: 'Jane Doe',
  bgColor: '#0f172a',
  accentColor: '#10b981',
});
<html data-astro-cid-vyyzaxq2>
  <head>
  </head>
  <body data-astro-cid-vyyzaxq2>
    <div class="container" data-astro-cid-vyyzaxq2>
      <div class="accent-bar" data-astro-cid-vyyzaxq2>
      </div>
      <div class="content" data-astro-cid-vyyzaxq2>
        <h1 class="title" data-astro-cid-vyyzaxq2>Wie man Astro-Komponenten überall rendert
        </h1>
        <p class="description" data-astro-cid-vyyzaxq2>Ein Einblick in den @casoon/fragment-renderer.
        </p>
      </div>
      <div class="footer" data-astro-cid-vyyzaxq2>
        <div class="author-info" data-astro-cid-vyyzaxq2>
          <div class="author-avatar" data-astro-cid-vyyzaxq2>J
          </div>
          <div class="author-details" data-astro-cid-vyyzaxq2>
            <span class="author-name" data-astro-cid-vyyzaxq2>Jane Doe
            </span>
            <span class="date" data-astro-cid-vyyzaxq2>01. Juni 2026
            </span>
          </div>
        </div>
        <div class="logo" data-astro-cid-vyyzaxq2>MyBlog
        </div>
      </div>
    </div>
  </body>
</html>
  • og
  • channel

CMS blocks

examples/cms-block-demo/render-blocks.jsDetail →
const runtime = createAstroRuntime(
  cmsPreset({
    blocks: [
      { id: 'blocks.hero', loader: () => import('./blocks/Hero.astro') },
      { id: 'blocks.feature-grid', loader: () => import('./blocks/FeatureGrid.astro') },
      { id: 'blocks.cta', loader: () => import('./blocks/CTA.astro') },
    ],
  }),
);
const cms = await runtime.getService('cms');
const html = await cms.renderBlocks([
  { type: 'hero', data: { title: 'Willkommen', ctaText: 'Jetzt starten' } },
  { type: 'feature-grid', data: { features: [/* … */] } },
  { type: 'cta', data: { title: 'Bereit?', primaryText: 'Weiter', primaryHref: '#order' } },
]);
<section class="hero text-center" style data-astro-cid-k3ee7l6p>
  <div class="hero-content" data-astro-cid-k3ee7l6p>
    <h1 data-astro-cid-k3ee7l6p>Willkommen
    </h1>
    <p class="subtitle" data-astro-cid-k3ee7l6p>Gebaut mit Astro.
    </p>
    <a href="#start" class="cta-button" data-astro-cid-k3ee7l6p>Jetzt starten
    </a>
  </div>
</section>
<section class="feature-grid" data-astro-cid-ylpx5uo6>
  <div class="grid columns-3" data-astro-cid-ylpx5uo6>
    <div class="feature-card" data-astro-cid-ylpx5uo6>
      <div class="icon" data-astro-cid-ylpx5uo6>1
      </div>
      <h3 data-astro-cid-ylpx5uo6>Zero-Config
      </h3>
      <p data-astro-cid-ylpx5uo6>Sofort startbereit.
      </p>
    </div>
  </div>
</section>
<section class="cta default" data-astro-cid-5mzrcpto>
  <div class="cta-content" data-astro-cid-5mzrcpto>
    <h2 data-astro-cid-5mzrcpto>Bereit?
    </h2>
    <div class="cta-buttons" data-astro-cid-5mzrcpto>
      <a href="#order" class="btn primary" data-astro-cid-5mzrcpto>Weiter
      </a>
    </div>
  </div>
</section>
  • registry
  • cmsPreset

HTMX response headers

src/presets/aha-stack.tsDetail →
const runtime = createAstroRuntime(ahaStackPreset({ locale: 'de' }));
const htmx = await runtime.getService('htmx');
htmx.getResponseHeaders({ trigger: 'cartUpdated', retarget: '#cart' });
{
  "HX-Retarget": "#cart",
  "HX-Trigger": "cartUpdated"
}
  • htmx
  • ahaStackPreset