Embedding

This page covers the three ways to put a txtfx scene on a page you control.

Web component (recommended)

Share a scene to get a short id, then drop it into any page with two lines:

<script src="https://txtfx.app/v1/txtfx-scene.js" async></script>
<txtfx-scene scene-id="abc12345" style="display:block;width:100%;aspect-ratio:16/9"></txtfx-scene>

The <txtfx-scene> element loads the scene in a sandboxed iframe from txtfx, so it always uses the latest renderer and never ships a heavy bundle to your page. Size it with normal CSS. Get the snippet from the Embed button on any shared scene page (/s/<id>), or build it yourself from the scene id.

Attributes

• scene-id — the short id of a shared scene. Resolves to https://txtfx.app/embed/<id>.
• src — an explicit player URL (overrides scene-id).

Self-contained snippet (no upload)

To embed without sharing the scene to txtfx, copy a fully inline snippet — scene data and renderer baked into a single srcdoc iframe:

1. Click Export in the toolbar
2. Choose Copy embed snippet
3. Paste the HTML into your page

This needs no network calls and keeps your image off txtfx's servers, but the snippet is larger and won't pick up new renderer features.

Standalone HTML

Export a full HTML file that opens directly in any browser:

1. Click Export in the toolbar
2. Choose Standalone HTML
3. Open the downloaded .html file

The file includes the image, all effect settings, and the rendering engine.