fragment-rendererv0.2.0

CASOON Open Source

Astro components, rendered without an Astro page.

A thin runtime around Astro's Container API. Pass a component and props, get HTML or a Response back: for HTMX fragments, emails, OG cards, CMS blocks and edge handlers.

npm install @casoon/fragment-renderer
pnpm add @casoon/fragment-renderer
MITAstro ≥ 4Node.js ≥ 18
renderComponent(Banner, { 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>
presets: HTMX, email, CMS blocks
3
adapters: Node.js, Cloudflare, Vercel, CLI
4
runtime dependencies besides the Astro peer
0
example components rendered during this site's build
4

What it does

  1. Zero config

    <code>createAstroRuntime()</code> works without options. Registry, services and presets are there when you need them.

  2. Registry by ID

    Map IDs to lazily imported components, with category and tags for filtering. A CMS block type becomes a component lookup.

  3. One component, several channels

    A context with <code>locale</code> and <code>channel</code> reaches the component as a prop, so one source can produce web, email or OG markup.

  4. Handlers for the platform

    Adapters build the response for Node.js, Cloudflare Workers and Vercel, and write files from a script.

Generated at build time

All examples →
<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>

The Banner component from the repository's examples, rendered by the runtime while this site was built. Markup is indented here for reading only.

examples/cloudflare-worker-demo/src/components/Banner.astro

Quickstart

Install the package, render a component, return the result. Registry, presets and adapters are covered in the documentation.

  1. Install @casoon/fragment-renderer; Astro is a peer dependency.
  2. Create a runtime and call renderComponent or renderToResponse.
  3. Add a registry, a preset or an adapter when the project needs one.
Read the documentation
render.tsTypeScript
import { createAstroRuntime } from '@casoon/fragment-renderer';
import Banner from './Banner.astro';

const runtime = createAstroRuntime();

const html = await runtime.renderComponent(Banner, {
  message: 'Important announcement!',
  type: 'info',
});

const response = await runtime.renderToResponse(Banner, { message: 'Saved' });