HTML Artifacts: How to Run and Share HTML Files

HTML Artifacts: run and share An HTML artifact can feel like the easiest AI output to share: save one file, open a browser, and send it. That works until the page depends on modules, assets, APIs, routes, or a build process the recipient does not have.

An HTML artifact is an HTML page or small web experience treated as a usable output. It might be a landing page, interactive prototype, chart, calculator, dashboard, game, report, or interface generated by Claude, ChatGPT, a coding agent, or a developer.

HTML artifacts sit between documents and apps. A self-contained file can package structure, styling, and JavaScript, while a larger artifact may include CSS, images, dependencies, and source files that must stay together.

This guide shows how to inspect, run, troubleshoot, and share an HTML artifact so the current version opens for the next viewer and remains editable for the next collaborator.

Use AgentGrid.io to share an HTML artifact. AgentGrid.io turns the HTML file or project into an app artifact with a runnable view, source files, stable address, and History.

A private artifact link works for team members and does not grant access by itself. Use Share to add a person only when team-wide artifact visibility is appropriate. Public publishing is a separate action that should happen only after the app is reviewed and explicitly approved.

This solves the problems created by common file handoffs:

A single .html attachment can be blocked or confusing to open.
A ZIP preserves files but gives the recipient a static copy.
Raw source is not a useful review experience for a non-technical person.
New attachments create new versions with no shared history.

With AgentGrid.io, people can open the current result while connected agents continue editing the same artifact. When the app should be public, explicitly ask a connected agent to publish the current version.

What is an HTML artifact?

An HTML artifact is usually one of these:

A single self-contained .html file
An HTML file plus local CSS, JavaScript, images, and fonts
A generated static website
A browser-based interactive prototype
The built output of a larger web project
An HTML preview created inside an AI artifact workspace

A single-file artifact may embed CSS in a <style> block and JavaScript in a <script> block. That portability makes it useful for fast demos and AI-generated tools.

A multi-file artifact is more maintainable for larger projects but must preserve its folder structure.

How to inspect an HTML artifact before running it

HTML can execute JavaScript as soon as it loads. Treat unknown files as code, not harmless documents.

Search for:

<script> tags and external script URLs
Network calls such as fetch() or WebSocket connections
Forms that send data
Access to local storage, clipboard, camera, or microphone
Downloads and redirects
Obfuscated JavaScript
Hard-coded secrets or tokens
Third-party trackers

Open untrusted artifacts in an isolated browser profile or sandbox. Never run an unknown file while signed into sensitive services if the artifact does not need them.

How to run an HTML artifact

Put the HTML file or project in AgentGrid.io when you want a runnable artifact that can be opened from a shared browser link. AgentGrid.io keeps the rendered experience, source, assets, and History together.

Use the local methods below only when you are developing or troubleshooting the source before sharing it.

Method 1: Open the file directly

For a simple artifact:

Save the file as index.html or another name ending in .html.
Double-click it or drag it into a browser.
Interact with the page.
Open the browser developer console if something fails.

The browser address begins with file://. This is enough for many self-contained pages.

Method 2: Use a local web server

Some artifacts fail when opened directly because browsers restrict modules, requests, routes, and cross-origin behavior from local files.

From the folder containing the artifact, run:

python3 -m http.server 8000

Then open:

http://localhost:8000

This is a local testing server, not public hosting. It does not automatically create a secure link that clients or teammates can open over the internet.

A local server also preserves relative paths more reliably.

Method 3: Run the source project

If the folder contains package.json, src/, or framework files, the HTML may be generated by a build tool rather than intended to run alone.

Read the README and inspect the scripts. A common development flow is:

npm install
npm run dev

Review dependencies and install scripts before running unknown code.

Why an HTML artifact may not work

Blank page

Open the browser console and look for the first error. Common causes include syntax errors, missing imports, and code that assumes a build step.

Missing styles or images

Keep the original folder structure. Check whether file paths use the correct capitalization and whether assets were actually included.

“Blocked by CORS” or failed requests

The artifact may need an HTTP server, a configured backend, or permission from the remote API. Do not disable browser security as a shortcut.

`process is not defined` or module errors

The artifact may contain source intended for a bundler or Node.js environment. It is not a standalone browser file yet.

API key prompt

Do not paste a production key into client-side HTML. Anyone who receives the file can inspect its source. Put secrets on a server or use a service designed for user-authenticated access.

It worked inside Claude or ChatGPT but not after download

The original preview environment may have supplied libraries, packaging, storage, or runtime behavior. Ask the AI to export a self-contained version and list every dependency. Then test the exported files independently.

AgentGrid.io treats a web app as an artifact backed by a real git repository. The artifact has one address and one History list. Connected agents can modify the source while people open the current result.

A practical workflow is:

Give the HTML file or project folder to a connected agent.
Ask it to create an app artifact in the correct AgentGrid.io team.
Open the artifact and test the rendered result.
Keep edits on the same artifact.
Share the team link with existing team members.
Invite another person or agent only when they need access.
Publish the app only when you explicitly want a public URL.

AgentGrid.io currently separates team sharing from public publishing:

The artifact link works for team members and does not itself grant access.
Inviting a person adds them to the team, which gives access to all artifacts in that team.
A connected agent can publish the current app version to a public URL.
Later changes do not update the public version until it is published again.
Unpublishing removes the deployment, not the artifact or its history.

Use a separate team when a client or external group should not see the rest of your team's work.

Before you share:

The page loads without console errors
All images, fonts, CSS, and scripts are included
Relative paths work from the shared environment
No secrets appear in source code
Forms and API calls use safe test data
The page works on mobile
The title and metadata are correct
The intended audience can access the link
You know whether the link is private or public
The current version is recorded
Setup instructions are included when needed

Frequently asked questions

Can I run HTML without a server?

Use an AgentGrid.io app artifact when you want other people to run the HTML from a shared link. For local development, a self-contained file may open directly, while modules, requests, routes, or assets can require a local server.

Put the HTML file or project in AgentGrid.io and share the artifact link. AgentGrid.io keeps the runnable view and source together at one stable address.

Can I send an HTML file through Slack or email?

You can attach it, but security filters may block it and recipients may not know how to open it. Share the AgentGrid.io artifact link instead.

Is a single HTML file a real app?

It can be. HTML, CSS, and JavaScript can implement substantial client-side behavior. Larger apps may still need a backend, authentication, storage, and a build process.

How do I edit an HTML artifact with AI?

Give the AI the source files, a clear requested change, constraints, and a verification step. Keep the result in the same artifact history rather than creating a new disconnected copy.

Turn one HTML file into a shared web artifact

HTML makes it easy to turn AI output into something people can see and use. The final step is making the result reliable for the next viewer and editable for the next collaborator.

Put the HTML source, rendered experience, assets, instructions, and History in one AgentGrid.io app artifact. Test the shared view, then send the artifact link instead of another attachment or ZIP.