Simple tsx to static html

[Fodoj]

Is there a way to use claude-artifact-runner to simply take tsx and convert it to a fully function static index.html? build command still creates a file that requires running a server - while I only need a static file that can be used with no server. I was able to convert Claude's tsx to such static pages via Claude Code, but before I start wrapping the result into my own small CLI I thought I'd ask if it's doable with claude-artifact-runner

[claudio-silva]

Hello @Fodoj
Yes, that use case is totally supported by this tool.
There are instructions on how to do it on the Readme, or on https://www.npmjs.com/package/run-claude-artifact
But default, the tool generates an HTML file than can simply be opened from the file explorer with a double click.
Beware though, that some features are blocked by browsers when you open the page from the file system. That's not the artifact-runner's fault; it's the way browsers are designed for security reasons.
If your artifact uses one of those blocked features, you'll need to use a web server.

[Fodoj]

I tried via build command of the tool, but html is just blank in the browser with no errors in the dev console - meanwhile CLIs docs say directly that to run this html server is required, thus the reason I opened this issue :)

[claudio-silva]

I'm sorry if the documentation somewhere seems to imply otherwise, but it also states very clearly (added bold to highlight the important part):

---

If you want to view a previously built Artifact:

There are two build types, with different preview methods:

• Single-file builds (e.g., npx run-claude-artifact build <file>, as explained above):
  • Can be opened directly from the filesystem (double-click the HTML file or open the URL file://path/to/file.html).
  • Multiple pages are supported via HashRouter, so navigation works under file://.

---

Also keep in mind:

There are always going to be some artifacts that won't be able to run correctly (or at all) when opened directly from the file system, but that is a fundamental browser restriction, not something the tool can solve.

Note that if your artifact tries to read any other file from the filesystem, it will be blocked by the browser's security policy.

Of course, I'm not ruling out the possibility of there being some bug on the generated code, and if that's the case, I'll fix it.

If you'll be willing to share your artifact so that I can debug it, I'll take a look and see if there's anything that can be done to make it work from the filesystem.
You can also create a simpler example that doesn't reveal your idea, but still exhibits the same issue.

Otherwise, you can place your index.html in a blank directory and run either:

• npx run-claude-artifact view <your-directory>, or
• npx serve <your-directory>

[Fodoj]

What I meant is (highlighted part, coming from here):

npx run-claude-artifact build --help                    

Notes:
  **- Built artifacts require a web server to run correctly**
  - For multi-file artifacts, specify the directory, not the HTML file
  - --remote and --push require 'create' subcommand
  - Default deployment: single file to CWD, multi-file to CWD/filename/dist

The browser has only this warning in dev console:

<Router basename="/Users/kshirinkin/Work/fodoj/claude-artifacts/contract-discount-calculator"> is not able to match the URL "/" because it does not start with the basename, so the <Router> won't render anything.

I'll check if I can reasonably modify it to attach here for proper debugging.

[claudio-silva]

Yeah, I can already see that this is caused by the built-in router that allows for multi-page navigation. It is error prone because of issues when detecting the base path for navigation.

I'm thinking it would be best to not use the router on default builds via npx, and provide a command line option to enable the router if needed. This would reduce the probability of users facing router-related issues when opening artifacts locally.
And the router is not needed for most artifacts, anyway.

[Fodoj]

Yep, as far as I understood, your tool (which is an excellent tool, don't get me wrong - I am very grateful for you spending time on building it) is structured around hosting multiple artifacts via Artifact Viewer in addition to just converting artifacts to static html's.

[claudio-silva]

Yes, the initial goal was for people to pick up an artifact and use it as a base for developing an application, which could include additional pages.
Later, it focused more on providing a dead-simple way to build an artifact directly into a self-contained single HTML file.
But I guess, for most users, the multi-page functionality won't be needed. So perhaps it's time to simplify things and avoid bug reports caused by that feature.

I have pushed some additional notes on the Readme and on the npx command's help text, to clarify the limitations of opening artifacts directly from the filesystem.

Nevertheless, I'll take look at this specific issue. Thank you for reporting the console's warning message; it's very relevant.