<code-file> embeds a complete, copyable, and downloadable source file directly in an HTML page, treating code as a first-class artifact rather than a styled block.

<code-file>

A QPell Labs project

Part of the QPell ecosystem

• Web Component
• https://qpell.com
• Repository: https://github.com/3me3/code-file
• Licensed under MIT

A minimal Web Component for embedding real, copyable, and downloadable code files directly inside HTML pages.

<code-file> is part of QPell Labs, within the broader QPell ecosystem.

---

What it is

<code-file> treats code as a file, not a decoration.

The code lives in the page, but behaves like something you downloaded from a repository.

---

Features

• Custom Element (<code-file>)
• Shadow DOM encapsulation
• Copy to clipboard
• Download as a real file
• Filename inference from language
• No IDs
• No dependencies
• No build step

---

The preferred way to use <code-file> is to load it directly from a global CDN. This requires no build step and provides a pinned, immutable version of the component.

<script src="https://cdn.jsdelivr.net/gh/3me3/code-file@v1.0.0/code-file.js" defer></script>

If you prefer to host the component yourself, you can instead copy code-file.js into your project and include it locally:

<script src="code-file.js" defer></script>

Once the script is loaded (either way), use the <code-file> element anywhere in your HTML to embed a self-contained code artifact:

<code-file lang="python">
print("Hello world")
</code-file>