Photo of DeepakNess DeepakNess

How to convert Claude Artifacts to HTML files

Unproofread notes

When I downloaded a Claude Artifact locally, it was downloaded as a <filename>.tsx file and I couldn't preview this without setting up a new React project. So... I searched about this and found a blog post by Simon Willison, and found this repo called calude-artifact-runner that solves this problem.

With just using the below command, I could preview the file in my browser:

npx run-claude-artifact <path-to-file>

And by running the following build command, it also converted the .tsx file to .html file as I wanted:

npx run-claude-artifact build <path-to-file>

I can then normally open the HTML file in my browser at anytime, without needing any additional tools.

Lovely!

Also, I have shared more about the tool and how I used it in this post on X including screenshots.

Comment via email