How to Use Claude Artifacts: Create, Share, and Remix AI Content

In the evolving generative AI landscape, tools that foster creativity, collaboration, and transparency are becoming increasingly important. One such tool is Claude Artifacts. Claude Artifacts is a powerful feature within Anthropic’s Claude AI that redefines how we interact with, organize, and share AI-generated content.

In this article, we will discuss what Claude artifacts are and why they are created. We will also use examples to explain how to create, edit, share, publish, and remix Claude artifacts.

What are Claude artifacts?

Claude artifacts are standalone content pieces created in a Claude chat that we may want to store, build upon, modify, or share. An artifact can be an image, a code snippet, an HTML page, a diagram, an SVG image, or any other significant and self-contained content piece.

For example, if we create the Codecademy logo using CSS in a Claude chat, Claude converts it into an artifact, as we may want to store, modify, or share the logo. However, how does Claude decide if a content piece needs to be converted into an artifact?

Let’s look at the conditions Claude uses to decide if a content piece can be converted into an artifact.

When and why does Claude create artifacts?

Claude Artifacts offer a structured and intuitive way to build, refine, and showcase our work. In a chat, Claude analyzes the content and uses the following conditions to create artifacts:

• If the content is self-contained and has over fifteen lines of code.
• If the content is something that we might want to store, edit, or share outside the chat.
• If the content is complex but self-contained and doesn’t require the chat context for reuse.

While working in a chat, if a content piece satisfies any of the above conditions, Claude converts it into an artifact. For instance, if we create a diagram, we will likely reuse it outside the chat, and it doesn’t need the chat context for reuse. Hence, Claude converts the diagram into an artifact. Similarly, if we create an HTML page, we might want to edit and reuse it later. Hence, Claude converts the HTML code into an artifact.

Having discussed what the Claude artifacts are and when Claude creates them, let’s discuss how to turn on the Claude artifacts feature so that we can create artifacts. Before that, go to Claude AI and sign in to your Claude account. You can sign up by email if you don’t have a Claude account.

How to turn on the Claude artifacts feature?

After logging in to Claude, we get a new chat window, as shown below:

The Claude artifacts feature is turned off by default. We can change the settings to allow artifact creation in chats. To turn on artifact creation in a Claude chat, click on the profile icon in the bottom left corner of the chat screen.

After clicking on the profile icon, we get a menu, as shown in the following image:

Click on Settings to open your Claude account’s settings page. When we scroll through the settings page, we get the Claude capabilities section. Here, we get a toggle button to turn on the Artifacts feature.

Toggle the button to On to activate the Artifacts feature.

After turning on the Artifacts feature, we can create Claude artifacts in the chat.

How to create Claude artifacts?

To create a Claude artifact, let’s go to the chat and ask the Claude AI to create a Codecademy logo in CSS. As the logo is a self-contained content piece that we might want to edit or use outside of the chat, it will be converted into an artifact.

After the Claude AI processes the above instruction, we get the following output:

In this output, the logo is automatically rendered on the right side of the chat screen. In the chat window, you can see that we get a clickable object named Codecademy Logo in CSS, which is an Interactive artifact. Thus, we have successfully created a Claude artifact.

To hide the logo, i.e., the artifact, you can click the X button on the top-right corner of the screen.

Once the artifact is hidden, we get the chat window on the entire screen.

To unhide the artifact, you can click on the artifact box on the chat screen. Otherwise, you can click the |← button on the top right of the screen.

We can also examine the code for the Claude artifact. Claude provides the code toggle button at the top-middle of the screen for this purpose.

You can click on the code toggle button to view the code and to switch back to the artifact visual.

Now, let’s discuss how to edit an artifact.

How to edit a Claude artifact?

We can give specific instructions in the chat on how to edit an existing artifact. For example, we can ask Claude AI to capitalize the first letter of codecademy in the logo, as shown below:

After executing the statement, Claude creates a new version of the artifact with the letter C capitalized.

Claude saves all the versions of the artifact after each edit. We can select and view any version of the artifact created in a chat using the versions dropdown.

The versions dropdown shows the current artifact version on the screen. If we click on it, we get a list of all the artifact versions.

We can select any artifact version from the dropdown and edit it by giving instructions in the chat.

After creating a Claude artifact, we can share it or make it publicly available, as needed. Let’s discuss how to share and publish Claude artifacts.

How to share and publish artifacts?

We can copy and paste the artifact code into a separate file to share the artifact code. For this, we can use the Copy button on the top-right of the screen.

Instead of copying, we can download the artifact code using the ⌄ button on the right of the Copybutton. When we click on the ⌄ button, it gives us the pop-up to download the file, as shown in the following image:

In our case, the logo is created using CSS. Hence, we get an HTML file after downloading. For other types of artifacts, we get the respective file types. For example, if the Claude artifact is built using Python code, we get a Download as py button for downloading the artifact code.

Instead of copying or downloading the artifact code, we can share the artifact using a publicly available link. For this, we can use the Publish button on the left side of the Copy button.

When we click on the Publish button, we get a popup, as shown in the following image:

Once we click on the Publish & copy link button, the artifact is published, and the link is copied to the device clipboard.

After publishing, the artifact is publicly available using the link; anyone can access it if they have it. For example, you can access the published Codecademy logo artifact even though it was created using a different Claude account.

When we publish an artifact, only the selected version is published while clicking the Publish button. For our example, only version 2 of the artifact will be publicly available, as it was selected while publishing.

Editing and remixing published artifacts

A published artifact is available as a read-only file. For example, when we go to the Codecademy logo artifact link, we get the following webpage:

We get the webpage in the output as the Codecademy artifact contains an HTML file. If the artifact contains a Python code, it looks as follows:

We can edit and remix a published artifact using the Remix Artifact button on the bottom-right corner of the published artifact page.

When we click on the Remix Artifact button, it takes us to a new Claude chat page where we can edit the artifact.

When you click on the Remix Artifact button, Claude automatically turns on the Claude artifact feature in your account if it isn’t already turned on. This lets you edit the artifact from the chat page without worrying about turning on Claude artifacts.

How to unpublish the published artifacts?

We might run into situations where we don’t want an artifact to stay publicly available. In that case, we can unpublish the artifact.

To unpublish an artifact, go to your chat history by clicking on the Chats button on the left panel of the screen.

When we click on the Chats button, we get a list of all the recent chats. Here, we need to select the chat in which the published artifact was created.

After selecting the chat, scroll to the published artifact.

Once we click on the published artifact, it opens on the right side of the screen. At the top right, you can see that the artifact is published.

To unpublish the artifact, click on the Published button. After this, we get the following popup with the Unpublish button.

After you click Unpublish, the artifact will be unpublished. You cannot republish the unpublished artifact, and the Publish button will be deactivated. Hovering the cursor over the deactivated Publish button will show you the message This artifact was previously unpublished. Create a new artifact to publish again.

To unpublish multiple artifacts from a single chat, you can unpublish them individually or delete the chat. After a chat is deleted from Claude, all the associated artifacts are also unpublished.

To delete a chat, click on the chat name on the top left of the chat screen.

When we click on the chat name, we get a menu with a Delete button as shown in the following image:

When we click on the Delete button, the chat is deleted, and all the artifacts created in the chat are automatically unpublished.

We have already discussed how to work with Claude artifacts. Now, let’s discuss the different types of Claude artifacts.

Different types of Claude artifacts with examples

Whether you want to create a flowchart, create a dashboard, or build an HTML page, Claude artifacts are the easiest way to convert your ideas into shareable content pieces.

Here are the different types of Claude artifacts with examples that you can remix and edit:

• Code snippets: Claude can write code in popular programming languages like Python, C++, C#, Java, etc. You can write clean and modular code, edit it, and share it using Claude artifacts. Here is a Python code artifact containing code for a data analysis task.
• Documents: While brainstorming or creating a plan in a Claude chat, you can export the content in a markdown file. You can even write code tutorials using Claude artifacts and export them as markdown documents. Here is a document Claude artifact that contains a code tutorial.
• Single-page HTML websites: While working on HTML and CSS code, Claude stores it as an HTML artifact. We can download the code as an HTML file or share it using Claude artifacts. Here is an example single-page HTML artifact. The Codecademy logo we created in the running examples is also an HTML artifact.
• Diagrams and flowcharts: Claude artifacts create and store diagrams and flowcharts as SVG images or mermaid diagrams. We can download and share the SVG files and mermaid diagrams or share them using published links. Examples of these types of artifacts are class diagram artifact and ML process diagram.
• Interactive dashboards: Claude artifacts also allow us to create interactive dashboards, share them using links, and download them as TSX files. Examples of interactive dashboards include machine learning model performance dashboard, machine learning training visualizer, and sales pipeline dashboard

To explore more Claude artifacts, you can visit Made with Claude, which hosts some of the best publicly available Claude artifacts. Now, let’s discuss some limitations of Claude artifacts.

Limitations of Claude artifacts

Artifacts help us easily create and share different diagrams, dashboards, and code snippets. However, they aren’t suitable for every use case. Let’s look at some of the limitations of Claude artifacts.

• We cannot create and share audio and video content using Claude artifacts.
• Although we can easily write and share code using Claude artifacts, we cannot execute the code as there is no underlying server to execute it.
• Claude artifacts don’t have access to real-time data or any external APIs. They are rendered as static objects in the browser. However, you can add real-time data and external APIs to the dashboard and run it on your machine by downloading the artifact code.
• Although we can create diagrams and SVG images using Claude artifacts, we cannot import external images to edit and share them as artifacts.
• Claude isn’t good at creating realistic images. For example, if you ask Claude to create a realistic scenery, it would create this scenery artifact. For the same prompt, ChatGPT creates a much realistic image. Hence, we cannot create and share realistic images using Claude artifacts.

Claude artifacts best practices

While using Claude artifacts, we need to use this feature responsibly. Using AI applications to create images or write code is costly, and we should achieve our goals at a minimum cost. For this, we need to keep the following things in mind:

• Give clear instructions with requirements for creating artifacts. This will help Claude generate accurate output on the first attempt.
• For edits, clearly specify the part you want to change so that only specific parts are rewritten.
• Before recreating an artifact, identify whether a complete rewrite or a minor update is required. If we can get the correct output using a minor update, we should use an update instead of a rewrite.

Publishing an artifact makes it publicly available. Hence, we also need to ensure we aren’t sharing sensitive information in the artifacts. For this, you should keep in mind the following best practices:

• Do not publish artifacts that you want to use in a blog or a video. Making the artifacts publicly available will allow other people to reuse them, which might not be good for your video or blog.
• Don’t publish artifacts containing sensitive information that is confidential to your company or client. Confidential information in the wrong hands can cause financial and reputation loss to your company, client, and you.

Conclusion

Claude artifacts are a significant step forward in making AI a true collaborator in building, organizing, and sharing ideas. By enabling us to create, edit, remix, and publish our work, artifacts bridge the gap between raw AI output and usable results.

In this article, we discussed how to create, edit, publish, and unpublish Claude artifacts. We also discussed the best practices for using artifacts. As you begin experimenting with Claude Artifacts, you’ll discover how versatile and intuitive they can be.

To learn more about Claude artifacts, you can go through the Introduction to Claude artifacts course that discusses how to create and publish documents, SVGs, HTML, and React components with prompt engineering for dynamic projects. You might also like this Introduction to Claude analysis course that discusses utilizing Claude for data insights by managing CSV files, handling data, performing statistical analysis, using natural language queries, and creating visualizations.

Frequently asked questions

1. Can you use Claude artifacts for free?

Yes. Claude artifacts are available in the free Claude plan.

2. How to share Claude artifacts?

You can share Claude artifacts by publishing them and sharing a publicly available link. Otherwise, you can download the artifact and share it with your team.

3. Can Claude make a flowchart?

Yes. Claude can create charts, diagrams, and flowcharts. You can also share and export them as SVG images and mermaid diagrams.

4. Is Claude’s free plan unlimited?

No. Claude AI’s free plan doesn’t provide unlimited usage. While we can access Claude for free, there are daily message limits.