How to Use Claude Artifacts

Step by step

1. 1 min

   Request content that triggers Artifacts

   Ask Claude to create substantial content like code files, HTML pages, SVG graphics, or structured documents. Artifacts automatically appear for content over ~15 lines or when you specifically request a file format. Say something like 'Create a Python script that...' or 'Build an HTML page for...'

   Note: Artifacts work best for self-contained, substantial content rather than snippets or explanations.
2. 30 sec

   Locate the Artifact panel

   When Claude creates an Artifact, it appears in a dedicated panel to the right of the conversation on desktop, or below the message on mobile. The panel shows a preview of your content with the filename at the top. Interactive content like HTML pages renders live in this panel.

   Note: You can resize the Artifact panel by dragging the divider between the chat and Artifact areas.
3. 1 min

   Edit Artifacts with natural language

   Request changes to your Artifact using plain English. Say 'Change the background color to blue' or 'Add error handling to the function' and Claude will update the Artifact directly. The panel refreshes automatically to show your changes.

   Note: Be specific about what you want changed. Instead of 'make it better,' say 'add responsive CSS for mobile devices.'
4. 30 sec

   Copy or download your content

   Click the copy button in the top-right corner of the Artifact panel to copy the entire content to your clipboard. For code files, this preserves formatting and syntax. You can then paste the content into your preferred editor or development environment.

   Note: Some browsers allow you to right-click in the Artifact panel and 'Save as...' for HTML files and other web content.
5. 1 min

   Work with multiple Artifacts

   Claude can maintain multiple Artifacts in a single conversation. Reference them by name when requesting changes, like 'Update the CSS file to match the HTML structure.' Each Artifact maintains its own version history within the conversation thread.

   Note: Name your Artifacts clearly when creating them by saying 'Create a file called homepage.html' to make them easier to reference later.
6. 1 min

   Iterate and refine continuously

   Use the conversation to continuously improve your Artifact. Request additions, modifications, or complete rewrites. Claude remembers the context and can make incremental changes or explain the code structure. This creates a collaborative development workflow.

   Note: Ask Claude to explain complex parts of the generated code by saying 'Explain how the authentication function works' without modifying the Artifact.