cd /news/developer-tools/print-export-claude-chat · home topics developer-tools article
[ARTICLE · art-6995] src=gist.github.com ↗ pub= topic=developer-tools verified=true sentiment=· neutral

Print / Export Claude Chat

Instructions and JavaScript code for exporting or printing a Claude AI chat conversation. The code, created by ZeroWw in 2024, targets the main chat area on claude.ai, expands any collapsed content, and opens a new window with the formatted chat for printing. It includes CSS variables to preserve the original color scheme and removes unnecessary UI elements before triggering the print function.

read1 min views26 publishedJul 22, 2024

Go to https://claude.ai/chat/new (or any other chat you had in the past).

Then run this code:

function printClaude() {   // (C) 2024 by ZeroWw. If you use this code, just give me some credit.
    const centralPart = document.querySelector('.flex-1.flex.flex-col.px-4.max-w-3xl.mx-auto.w-full.pt-1');

    if (centralPart) {
        // Expand all "show more" buttons
        document.querySelectorAll('button').forEach(button => {
            const text = button.textContent.toLowerCase();
            if (text.includes('show more') || text.includes('continue') || text.includes('expand')) {
                button.click();
            }
        });

        // Wait for content to expand
        setTimeout(() => {
            const printWindow = window.open('', '_blank', `width=${window.screen.width * 0.85},height=${window.screen.height * 0.85}`);

            if (!printWindow) {
                alert('Pop-up blocked! Please allow pop-ups for this site and try again.');
                return;
            }

            // Get page stylesheets
            const styles = Array.from(document.styleSheets).map(styleSheet => {
                try {
                    return Array.from(styleSheet.cssRules).map(rule => rule.cssText).join('\n');
                } catch (e) {
                    return '';
                }
            }).join('\n');
            
            // Essential color variables - must stay in HSL format
            const cssVars = `:root{--text-000:49 6.9% 5.5%;--text-100:49 19.6% 13.3%;--text-200:49 18.8% 20%;--text-300:49 9% 30%;--text-400:49 7% 37%;--text-500:51 7.5% 42.1%;--accent-main-000:15 52.7% 43.9%;--accent-main-100:16 53.8% 47.5%;--accent-main-200:15 55.6% 52.4%;--accent-secondary-000:210 74.2% 42.1%;--accent-secondary-100:210 74.8% 49.8%;--accent-secondary-200:210 74.8% 57%;--accent-secondary-900:210 68.8% 93.3%;--accent-pro-000:251 34.2% 33.3%;--accent-pro-100:251 40% 45.1%;--accent-pro-200:251 61% 72.2%;--accent-pro-900:253 33.3% 91.8%;--oncolor-100:0 0% 100%;--bg-000:60 6.7% 97.1%;--bg-100:50 23.1% 94.9%;--bg-200:49 26.8% 92%;--bg-300:49 25.8% 87.8%;--bg-400:46 28.3% 82%;--bg-500:47 27% 71%;--accent-main-900:15 48% 90.2%;--border-100:48 12.5% 39.2%;--border-200:48 12.5% 39.2%;--border-300:48 12.5% 39.2%;--oncolor-200:60 6.7% 97.1%;--oncolor-300:60 6.7% 97.1%;--border-400:48 12.5% 39.2%;--danger-000:5 74% 28%;--danger-100:5 73.9% 37.7%;--danger-200:5 49.5% 58%;--danger-900:0 40.3% 89%;--white:0 0% 100%;--black:0 0% 0%;--kraft:25 49.7% 66.5%;--book-cloth:15 52.3% 58%;--manilla:40 54% 82.9%}`;
            
            printWindow.document.write(`<html><head><title>Claude_${new Date().getTime()}</title><style>${cssVars}${styles}</style></head><body>${centralPart.innerHTML}</body></html>`);

            // Cleanup: remove UI elements not needed in print
            const firstLink = printWindow.document.getElementsByTagName('a')[0];
            if (firstLink) firstLink.parentElement.removeChild(firstLink);

            const replyBox = printWindow.document.getElementsByClassName('border-0.5 border-border-300 flex');
            if (replyBox.length > 0) {
                const last = replyBox[replyBox.length - 1];
                if (last) last.parentElement.removeChild(last);
            }

            ['absolute -bottom-0 -right-1.5 sm:right-2', 'absolute -bottom-0 left-[2.3rem]', 'sticky bottom-0 mx-auto w-full pt-6'].forEach(className => {
                Array.from(printWindow.document.getElementsByClassName(className)).forEach(elem => elem.parentElement.removeChild(elem));
            });

            setTimeout(() => printWindow.print(), 3000);
        }, 1000);
    } else {
        console.error('Central part not found!');
    }
}

printClaude();
── more in #developer-tools 4 stories · sorted by recency
kortix.com · · #developer-tools
Kortix
── more on @claude 3 stories trending now
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
Live at https://your-agent.zahid.host
Get free account → Pricing
from €0/mo · no card required
LIVE [news/print-export-claude-…] indexed:0 read:1min 2024-07-22 ·