[fn-cafeina]

The preview document holds the user's CSS in <style id="preview-style"> and their JavaScript in <script type="module">. The browser hides both tags through its internal stylesheet. A user rule like * { display: flex } outranks that stylesheet, since author styles beat user-agent styles at any specificity. The raw code text then renders in the preview, next to the result.

Repro: open https://codi.link and set the CSS to * { display: flex }.

before	after

Both come from the same sandbox with the CSS tab selected: HTML <div class="board">board</div>, CSS * { display: flex } plus .board { border: 2px solid #000; width: 400px; height: 400px }.

Fix

The reset goes into the generated document. It sits after the user's <style>, so it wins specificity ties as well:

<style>
  head, base, datalist, link, meta, noembed, noframes, param, rp, script, style, template, title { display: none !important; }
</style>

!important matters, because * { display: flex !important } is possible too. Otherwise nothing changes: the reset restores the browser's default, and user selectors keep applying to the user's own elements.

The ZIP export uses the same document. src/download.js builds its index.html from createHtml, so the fix covers that path.

Verification

Chromium, document generated by createHtml for * { display: flex }:

	script text visible	#preview-style computed display	user JS runs
before	yes	flex	yes
after	no	none	yes

bun run lint passes.