artifact-architecturelisted

# Artifact architecture Read this before writing a line of an artifact. Most of what goes wrong is decided in the first minute, by assuming an environment that does not exist. --- ## The constraint that changes everything: no external hosts A published artifact runs under a **strict Content Security Policy that blocks requests to every external host**. Not "discouraged" — blocked. That includes: - CDN scripts (D3, Recharts, Chart.js, Plotly, Highcharts, ECharts) - External stylesheets and web fonts (Google Fonts, any `@import` of a remote URL) - Remote images - `fetch` / `XHR` / WebSockets to any other origin **Everything must be inlined**: CSS in `<style>`, JS in `<script>`, images as `data:` URIs, fonts as base64 or not at all. There is no build step and no bundler — you write the page. Three consequences that people discover the hard way: 1. **You will hand-build your charts.** See `svg-charting`, and the `chartkit.js` utility that ships with it. This is less painful than it sounds — scales, ticks, and paths are a few dozen lines, and you avoid inlining 300KB of library to use 5% of it. 2. **Mermaid is the exception.** Artifacts render mermaid natively — ` ```mermaid ` fences in Markdown, `<pre class="mermaid">` in HTML. No library involved. See `mermaid-in-artifacts`. 3. **System font stacks only**, unless you embed a font as base64 and can afford the bytes. --- ## Write the page, not the document The file you hand to the publisher is wrapped in `<!doc