🔄 Claude Artifact Converter

Convert React TSX and HTML artifacts for GitHub deployment

📝 Artifact Details

📄 Artifact Code

💡 Paste your React component code here. The converter will create a standalone HTML file with all dependencies.
React Component (TSX/JSX)

🚀 Features

⚛️
React Support
Converts TSX/JSX components to standalone HTML with React CDN
🎨
Tailwind CSS
Automatically includes Tailwind CSS for React components
📦
Dependency Detection
Identifies and includes Lucide React icons and other dependencies
🔗
Claude Integration
Maintains links to original Claude conversations
${icon} ${name} Claude Artifact
View on Claude Back to Gallery
`; } else { // HTML artifact const htmlCode = document.getElementById('htmlCode').value; if (!htmlCode.trim()) { throw new Error('Please enter HTML content'); } convertedHTML = ` ${name} - Claude Artifact
${icon} ${name} Claude Artifact
View on Claude Back to Gallery
${htmlCode}
`; } // Generate metadata metadata = { id: name.toLowerCase().replace(/\s+/g, '-'), name: name, description: description, claudeUrl: `https://claude.ai/chat/${conversationId}`, githubUrl: `https://github.com/[username]/[repo]/blob/main/artifacts/${name.toLowerCase().replace(/\s+/g, '-')}.html`, created: date, updated: date, version: "1.0.0", author: "Claude AI Assistant", type: currentInputTab, category: category, icon: icon, tags: [currentInputTab, category, 'claude-artifact'], features: currentInputTab === 'react' ? ['Interactive UI', 'React Hooks', 'Tailwind CSS'] : ['Static Content', 'Responsive Design'] }; // Display output document.getElementById('outputCode').textContent = convertedHTML; document.getElementById('metadataOutput').textContent = JSON.stringify(metadata, null, 2); document.getElementById('outputSection').style.display = 'block'; showToast('Artifact converted successfully!'); // Scroll to output document.getElementById('outputSection').scrollIntoView({ behavior: 'smooth' }); } catch (error) { showToast(`Error: ${error.message}`); } finally { // Reset button state document.getElementById('convertButtonText').textContent = '🔄 Convert Artifact'; document.getElementById('convertSpinner').style.display = 'none'; } } // Download HTML file function downloadHTML() { const filename = metadata.id + '.html'; const blob = new Blob([convertedHTML], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showToast(`Downloaded ${filename}`); } // Download metadata function downloadMetadata() { const filename = metadata.id + '.json'; const blob = new Blob([JSON.stringify(metadata, null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showToast(`Downloaded ${filename}`); } // Preview in new tab function previewInNewTab() { const blob = new Blob([convertedHTML], { type: 'text/html' }); const url = URL.createObjectURL(blob); window.open(url, '_blank'); setTimeout(() => URL.revokeObjectURL(url), 1000); }