Claude Artifacts

Tags Claude

Using Claude Artifacts

  • Open a new chat in Claude.
  • Describe what you'd like Claude to build — a document, app, game, or other interactive tool.
    • Here, we asked for a simple interactive HTML countdown timer.

Screenshot of the Claude web interface home screen. The page displays a greeting, “Good evening, Sarah,” above a prompt box containing the text “Create a simple interactive HTML countdown timer.” The selected model is Sonnet 5 (Medium). Below the prompt area are suggested tasks, including studying a topic, career guidance, and research projects. A navigation panel with icons appears along the left side of the screen.

  • Claude builds the artifact in a panel next to the chat.
  • Artifacts are interactive — this countdown timer's Start, Pause, and Reset buttons all work right in the panel.

Screenshot showing the Claude web interface on the left and a live preview of generated content on the right. Claude has created an interactive HTML countdown timer based on a user prompt. The preview displays input fields for hours, minutes, and seconds, set to 0 hours, 5 minutes, and 0 seconds, along with a large digital countdown reading 00:05:00 and buttons to start, stop, or reset the timer. The Claude response includes a downloadable file for the countdown timer.

  • Click the </>icon in the top left of the artifact panel to view its underlying code.

Screenshot of the Claude web interface showing a completed response to the prompt “Create a simple interactive HTML countdown timer.” The left panel contains Claude’s description of the generated countdown timer and a downloadable file named “Countdown timer.” The right panel displays the generated HTML code, including document structure and CSS styling. A Copy button appears at the top of the code pane, allowing the code to be copied for use.

  • Click the arrow next to “Copy” to download the artifact as a file or share it with others.

Screenshot of the Claude web interface displaying a completed response to a request for an interactive HTML countdown timer. The left panel shows Claude’s response and a downloadable file named “Countdown timer.” The right panel displays a live preview of the countdown timer set to 5 minutes, showing 00:05:00 with controls to start, stop, and reset the timer. A menu is open in the upper-right corner of the preview pane, providing options to download the HTML file or share the artifact.

  • Click the expand icon to view the artifact full screen.

Screenshot of an interactive HTML countdown timer running in the Claude artifact viewer. The timer interface displays input fields set to 0 hours, 5 minutes, and 0 seconds, with a large digital countdown reading 00:05:00. Buttons labeled Start, Pause, and Reset appear below the timer. The artifact is open in a preview window with a Copy button in the upper-right corner and a navigation panel visible along the left side of the screen.

  • To save your artifact, click the drop-down menu next to the copy button.

Screenshot of the Claude web interface displaying a completed response for an interactive HTML countdown timer. The left panel shows Claude’s response and a downloadable HTML file named “Countdown timer.” The right panel displays a live preview of the timer set to 0 hours, 5 minutes, and 0 seconds, showing a countdown of 00:05:00 with Start, Pause, and Reset buttons. A menu is open in the upper-right corner of the preview panel, displaying options to Download as HTML or Share artifact.

  • Choose “Share artifact”.
  • Click Share & copy link.

Screenshot of the Claude Share artifact dialog box. The window explains that anyone in the organization can view the shared artifact and access attachments and files included in the conversation. The artifact is currently marked Unshared, with a note stating “Only you have access.” A Share & copy link button appears in the lower-right corner, and a close button is located in the upper-right corner of the dialog.

  • Your artifacts will appear in your Artifacts section in your Claude bar.

Screenshot of the Claude Artifacts page displaying a collection of saved artifacts. The page includes tabs for All, Yours, and Shared with you, with All currently selected. Two artifact cards, terminal-notes.jsx and weather.html, are shown in the main content area with timestamps indicating recent edits. A search icon, filter menu, and New artifact button appear at the top of the page, while a navigation sidebar is visible along the left side of the screen.

Print Article

Related Services / Offerings (1)

Claude for Education
Claude for Education provides UT Dallas faculty and staff with institutionally managed access to Anthropic's Claude AI assistant. The offering includes Claude Chat for everyday AI assistance, Claude Cowork for more complex, multi-step work, and Claude Code for programming and development tasks.