Markdown

Fenced code renders in a Sivir code block with syntax highlighting. External links open in a new tab. Links with schemes other than http, https, and mailto render as plain text.

Edge cache rollout review

The canary reduced origin traffic by 38% while keeping cache_hit_age within the expected range. Open the rollout runbook for the full procedure.

Recommendation: continue to 50% traffic, but keep image transforms outside the cache until the key audit is complete.

Regional health

Region	Hit rate	p95
iad1	91%	142 ms
fra1	88%	156 ms
sin1	86%	171 ms

Rollout tasks

Confirm cache headers at the edge
Compare origin error rates
Audit image transformation keys

const rollout = await edgeCache.promote({
  traffic: 0.5,
  regions: ['iad1', 'fra1', 'sin1']
});

<script lang="ts">
    import { Markdown } from '@sivir-ui/svelte/components/markdown';

    const report = [
        '## Edge cache rollout review',
        '',
        'The canary reduced origin traffic by **38%** while keeping `cache_hit_age` within the expected range. [Open the rollout runbook](https://example.com/runbooks/edge-cache) for the full procedure.',
        '',
        '> Recommendation: continue to 50% traffic, but keep image transforms outside the cache until the key audit is complete.',
        '',
        '### Regional health',
        '',
        '| Region | Hit rate | p95 |',
        '| :--- | ---: | ---: |',
        '| iad1 | 91% | 142 ms |',
        '| fra1 | 88% | 156 ms |',
        '| sin1 | 86% | 171 ms |',
        '',
        '### Rollout tasks',
        '',
        '- [x] Confirm cache headers at the edge',
        '- [x] Compare origin error rates',
        '- [ ] Audit image transformation keys',
        '',
        '```ts',
        'const rollout = await edgeCache.promote({',
        '  traffic: 0.5,',
        "  regions: ['iad1', 'fra1', 'sin1']",
        '});',
        '```'
    ].join('\n');
</script>

<Markdown
    content={report}
    role="region"
    aria-label="Rendered rollout review"
    tabindex={0}
    class="max-h-[32rem] w-full max-w-2xl overflow-y-auto rounded-[var(--radius-xl)] border border-border bg-panel px-5 py-4 focus-visible:outline-none focus-visible:shadow-[var(--focus-ring)] sm:px-6 sm:py-5"
/>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add markdown

Usage

Pass the Markdown string as content. Tables, task lists, and strikethrough are supported. Raw HTML is displayed as text, and images load only from relative URLs; other images show their alt text. Set streaming while chunks are arriving to show a caret and mark the output busy.

import { Markdown } from '@sivir-ui/svelte/components/markdown';

const content = [
  '## Result',
  '',
  '| File | Status |',
  '| --- | --- |',
  '| app.ts | Updated |',
  '',
  '- [x] Run checks'
].join('\n');

<Markdown {content} />

Examples

Streaming response

Incident update

The elevated error rate is isolated to image transformations in fra1.

Receiving chunk 1 of 4

<script lang="ts">
    import ArrowRight from '@lucide/svelte/icons/arrow-right';
    import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
    import { Button } from '@sivir-ui/svelte/components/button';
    import { Markdown } from '@sivir-ui/svelte/components/markdown';

    const chunks = [
        '### Incident update\n\nThe elevated error rate is isolated to image transformations in `fra1`.',
        '\n\n- Cache reads remain healthy\n- Origin requests are within baseline',
        '\n- Transformation workers are exhausting memory',
        '\n\n**Next step:** reduce worker concurrency from 12 to 8 and observe the next five minutes.'
    ];

    let step = $state(0);
    const content = $derived(chunks.slice(0, step + 1).join(''));
    const streaming = $derived(step < chunks.length - 1);

    function advance() {
        step = streaming ? step + 1 : 0;
    }
</script>

<div class="w-full max-w-2xl space-y-4">
    <div
        class="min-h-52 rounded-[var(--radius-xl)] border border-border bg-panel px-5 py-4 sm:px-6"
    >
        <Markdown {content} {streaming} />
    </div>
    <div class="flex items-center justify-between gap-4">
        <p class="text-sm text-foreground-muted" role="status">
            {streaming ? `Receiving chunk ${step + 1} of ${chunks.length}` : 'Response complete'}
        </p>
        <Button variant="ghost" size="md" onclick={advance}>
            {#if streaming}
                Stream next chunk
                <ArrowRight size={14} aria-hidden="true" />
            {:else}
                <RotateCcw size={14} aria-hidden="true" />
                Restart stream
            {/if}
        </Button>
    </div>
</div>

Anatomy

Markdown - Renders GitHub-flavored Markdown.