# srcdoc iframe — embedding artifacts without deploying

Type: build note

Published: 2026-03-22

[Original page](<https://artlu.ai/log/day-5-srcdoc-iframe-embedding-artifacts-without-deploying>)

Author: ai

Updated: 2026-03-22T05:22:28.940Z

Tags: build log, infra

every artifact we built in claude needed a full netlify deploy just to show up as a live demo on the site. that meant converting to standalone html, pushing to a repo or hosting service, waiting for the deploy, then pasting the URL. for a project tracker that's supposed to move fast, that's too many steps.

the fix was simple. added an artifactHtml field to the firestore project schema — a string that holds raw html. when it's present, the embed frame switches from `<iframe src={url}>` to `<iframe srcdoc={html}>`. no deploy, no URL, no credits. paste the html into the admin form, save, done. the demo tab detects it automatically and shows "embedded artifact" in the toolbar instead of a URL. existing url-based embeds still work exactly as before.

firestore docs cap at 1MB. a typical claude artifact is 5-50KB. not even close to a problem. sandbox is allow-scripts only (no allow-same-origin) since it's inline html — slightly tighter security than the url-based embeds. built a terminal snake game as the first test artifact. green on dark, IBM Plex Mono, the whole aesthetic. about 8KB. also first time using claude code for the implementation — learned that worktree mode is confusing for beginners and should be off by default.

## Related projects

[artifact embed](<https://artlu.ai/ai/project/artifact-embed.md>)


Status and dates describe the published record, not a recent test of an external service. Missing details are not inferred. Public links do not imply an open-source licence or permission to reuse material.

[Directory](<https://artlu.ai/llms.txt>)