# Claude Artifact to Shareable Link — Make It, Publish It, Keep the Files

## Document Directory

This paste contains 5 documents:

- [index.html](https://marke.st/p/01M33SA090FEGCNHCE4VRPM2X7/index.html) (HTML document)
- [prompts/generate-and-publish.md](https://marke.st/p/01M33SA090FEGCNHCE4VRPM2X7/prompts/generate-and-publish.md)
- [demo.html](https://marke.st/p/01M33SA090FEGCNHCE4VRPM2X7/demo.html) (HTML document)
- [portability.md](https://marke.st/p/01M33SA090FEGCNHCE4VRPM2X7/portability.md)
- [sandbox-showcase.md](https://marke.st/p/01M33SA090FEGCNHCE4VRPM2X7/sandbox-showcase.md) ← (current)

---

## sandbox-showcase.md

# Not just a page. Something people can use.

**INTERACTIVE HTML / ANIMATED DIAGRAMS / PLAYABLE SIMULATIONS / PUBLISH FROM A PROMPT**

A diagram you can explore. A game with decisions and consequences. A report that responds to its reader. These are two examples of what you can package into a self-contained HTML document and share on Marke.st.

## Try the artifacts first

| Artifact | Try this | What the HTML contains |
|---|---|---|
| [**Packet Atlas — architecture explorer**](https://marke.st/p/01M33WTGPFPVBHT0XF2785YGBJ) | Select **Create an export**, stop the export workers, then **Trace request**. Switch environments and inspect a connection's port. | SVG topology, animated packets, environment state, component inspectors, and a simulated request journal. |
| [**Queue Rescue — incident response game**](https://marke.st/p/01M33WZSBEASY60PD9MJ0JF51E) | Start an incident, inspect its evidence, choose an intervention, and verify recovery. Pause or advance five seconds at a time. | Canvas animation, scenario rules, timers, resource budgets, scoring, and a generated playthrough debrief. |

The fictional networks and incidents are local simulations. Neither example contacts real infrastructure or requires a backend service. No Three.js installation or external library is needed for either one. Their accompanying READMEs explain the model and limitations.

## What the HTML sandbox does

Marke.st's [product documentation](https://marke.st/#features) describes a distinct HTML viewer: a complete HTML document runs in a sandboxed, opaque-origin context rather than becoming part of the surrounding Marke.st page. Scripts can provide the artifact's behavior while origin isolation separates it from the parent site's page and cookies. HTML embedded inside ordinary Markdown is instead escaped and does not become a running page.

That is why **a displayed code snippet** and **a playable artifact** are different deliverables. Save the complete page as `index.html`; do not wrap it in a Markdown code fence.

Sandbox permissions and browser policies still matter. Browser storage, popups, downloads, external resources, and device features do not become universally available just because JavaScript can run. [MDN's iframe reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe#sandbox) explains these controls. Do not weaken isolation to make a demo work; adapt the artifact to the supported environment.

**Isolation is not a correctness guarantee, a secret vault, or a blanket claim of zero risk.** Keep credentials out of published code. Check the actual hosted page and its dependencies before sharing.

## The simple publishing pattern

```text
Describe the experience
        ↓
Generate one self-contained HTML document
        ↓
Save it with a README and reference data through Marke.st MCP
        ↓
Open the returned link and test the interactions
        ↓
Choose the audience and share
```

Connect your assistant to `https://marke.st/mcp` and complete sign-in using the [connection walkthrough](https://marke.st/p/01M33S86SF35M481JPJ78QCY24). Then use a prompt below. The assistant needs the relevant write permissions; an invented URL in a chat response is not an upload.

## Copy a prompt: an architecture explorer

```text
Create an original interactive explorer for a FICTIONAL document service.
Use no information about me, my employer, accounts, contacts, or networks.

Make one responsive HTML file with inline CSS and JavaScript. Use SVG for
a clickable architecture map with gently moving traffic indicators.
Include development/staging/production selectors, protocol and port
labels, a component/connection inspector, and two simulated failure
modes. Add a pause-motion control, reduced-motion support, keyboard
access, and a readable fallback explanation. Label all traffic simulated.
No network calls, external libraries, browser storage, or credentials.

With Marke.st connected, create ONE new unlisted paste in "My examples":
- index.html: the complete runnable page, not a Markdown code fence.
- README.md: how to explore it and what is intentionally simplified.
- topology.json: the fictional topology reference.
Enable version history. Embed the runtime data in the HTML; explain that
editing topology.json alone will not automatically update that page.

Read back the saved documents. Test interactions in a browser when one is
available, and distinguish those results from merely reading the source.
Return the real tool-provided URL, document paths, visibility, and any
remaining checks. Do not replace any existing example or invent a link.
```

## Copy a prompt: a playable mini-simulation

```text
Create an original browser-only puzzle about a fictional delivery queue.
Use one responsive HTML file with inline CSS and JavaScript, and Canvas
or SVG animation. Include a start button, pause, restart, three scenarios,
a limited action budget, clear win/loss conditions, and a final debrief.
The player should inspect evidence and choose a response, not guess.

Use only invented data. All actions affect the local game, never real
systems. No external libraries, APIs, cookies, saved scores, credentials,
tracking, or cloud connections. Include keyboard controls, reduced-motion
support, and accessible HTML status text outside the canvas. Reset on
reload and explain that progress is temporary.

Use Marke.st to save ONE new unlisted paste in "My examples" with history:
index.html, README.md, and rules.json. Embed the runtime rules in HTML;
keep the reference JSON consistent and explain its role.

Read the saved documents back. Exercise win, loss, pause, and restart
paths when browser tools are available; report only checks actually run.
Return the actual saved URL and visibility. Do not alter existing pastes.
```

## A useful collection, not just a screenshot

| File | Its job |
|---|---|
| `index.html` | The interactive experience and its embedded runtime data. |
| `README.md` | Controls, intended audience, reuse instructions, and limits. |
| `topology.json` or `rules.json` | A readable reference for the scenario or model. |
| `validation.md` when available | What was really tested, with unverified items left open. |

These two examples use embedded data to remain self-contained. Keeping a JSON file alongside an artifact does **not** automatically connect it to the running page.

## Before you share

Check the hosted page on the intended desktop and mobile browsers. Test the controls, pause behavior, reduced motion, and any links. Review all documents for private information. Choose public discovery, an unlisted link, or private access deliberately; complete any public-approval screen returned by Marke.st.

Changing a public paste is publishing immediately. Keep sensitive drafts separate and do not treat saved version history as a private branch.

## What about Three.js or a full app?

These examples intentionally use SVG and 2D Canvas, so they do not establish Three.js compatibility. A larger framework bundle, 3D renderer, server-side feature, persistent account, or remote API introduces requirements to test separately. A self-contained artifact is a good fit for a local interactive experience; it is not automatically a hosted application backend.

---
[Explore all examples](https://marke.st/p/01M33R91CGF13BZC4KDXT2M418) · [Artifact publishing walkthrough](https://marke.st/p/01M33SA090FEGCNHCE4VRPM2X7) · [Create with Marke.st](https://marke.st)

Sources: the linked Marke.st product description and MDN iframe reference, reviewed 22 September 2026. The two artifacts' source and validation records document their own behavior; this guide is not an independent security audit or a new physical-device test.