Fake Twitter Chat

Generate a realistic Fake X (Twitter) Direct Message screen.

Chat Settings


Add Message

09:41 AM
Elon Musk
@elonmusk
Nov 3, 2023, 10:14 AM
Hey! How's the new project going?
It's going great! Just pushing the latest update now.
Seen
Start a message
\n

About Fake Twitter Chat

This is a placeholder for your detailed article. Content here will help with SEO and user engagement. You can edit this area specifically for the Fake Twitter Chat tool.

How to use this tool

Follow the simple steps above to modify the settings and click download. It's that easy!

\n

Related Tools

Action successful!
let msgType = 'received'; document.getElementById('btn-msg-received').onclick = () => { msgType = 'received'; updateTwChatBtns(); }; document.getElementById('btn-msg-sent').onclick = () => { msgType = 'sent'; updateTwChatBtns(); }; document.getElementById('btn-msg-stamp').onclick = () => { msgType = 'stamp'; updateTwChatBtns(); }; function updateTwChatBtns() { ['received', 'sent', 'stamp'].forEach(t => { let btn = document.getElementById(`btn-msg-${t}`); if(t === msgType) { btn.className = 'flex-1 py-2 bg-[#1d9bf0] text-white rounded-lg text-xs font-bold border-2 border-transparent'; } else { btn.className = 'flex-1 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded-lg text-xs font-bold border-2 border-transparent hover:border-[#1d9bf0] transition'; } }); document.getElementById('msg-liked').disabled = (msgType === 'stamp'); document.getElementById('msg-liked').parentElement.style.opacity = (msgType === 'stamp') ? '0.5' : '1'; } updateTwChatBtns(); document.getElementById('cfg-dp').addEventListener('change', function() { if(this.files && this.files[0]) { const reader = new FileReader(); reader.onload = function(e) { document.getElementById('prv-dp').src = e.target.result; document.getElementById('prv-dp-typing').src = e.target.result; }; reader.readAsDataURL(this.files[0]); } }); window.addTwChatMsg = function() { let text = document.getElementById('msg-text-input').value; if (!text) return; text = text.replace(/ /g, '
'); let isLiked = document.getElementById('msg-liked').checked; let area = document.getElementById('tw-chat-area'); // Like reaction badge logic let heartStrReceived = isLiked ? `
` : ``; let heartStrSent = isLiked ? `
` : ``; let html = ''; if (msgType === 'stamp') { html = `
${text}
`; } else if (msgType === 'received') { let mb = isLiked ? 'margin-bottom:12px' : ''; html = `
${text} ${heartStrReceived}
`; } else if (msgType === 'sent') { let mb = isLiked ? 'margin-bottom:12px' : ''; html = `
${text} ${heartStrSent}
Seen
`; } area.insertAdjacentHTML('beforeend', html); document.getElementById('msg-text-input').value = ''; }; if (!window.downloadImage) { window.downloadImage = (name) => { if(window.toast) toast('Generating Canvas...'); const dom = document.getElementById('mockup'); const clone = dom.cloneNode(true); function inlineComputedStyles(node, original) { if (node.nodeType !== 1) return; const comp = window.getComputedStyle(original); const props = ['display','flex-direction','justify-content','align-items','width','height','padding','margin','background-color','background','background-image','color','font-size','font-weight','font-family','border-radius','border','border-top','border-bottom','border-left','position','flex','flex-shrink','overflow','overflow-y','overflow-x','opacity','box-shadow','z-index','top','left','right','bottom','fill','white-space','text-overflow','gap','line-height','text-align','max-width','object-fit','min-width','pointer-events','stroke','stroke-width','letter-spacing','text-shadow','transform','text-transform','aspect-ratio','filter','backdrop-filter']; let inline = ''; for (let p of props) { let val = comp.getPropertyValue(p); if (val && val !== 'none' && val !== '0px' && val !== 'auto') inline += `${p}:${val};`; } node.setAttribute('style', inline + (node.getAttribute('style') || '')); for (let i = 0; i < node.children.length; i++) { inlineComputedStyles(node.children[i], original.children[i]); } } try { inlineComputedStyles(clone, dom); } catch(e) {} clone.style.margin = '0'; clone.style.transform = 'none'; // Stop animations to capture clean frame clone.querySelectorAll('*').forEach(n => { n.style.animation = 'none'; }); const svg = `
${clone.outerHTML}
`; const b = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' }); const URL = window.URL || window.webkitURL; const url = URL.createObjectURL(b); const i = new Image(); i.onload = () => { const canvas = document.createElement('canvas'); canvas.width = dom.offsetWidth * 2; canvas.height = dom.offsetHeight * 2; const ctx = canvas.getContext('2d'); ctx.scale(2, 2); ctx.drawImage(i, 0, 0); const a = document.createElement('a'); a.download = `${name}-${Date.now()}.png`; a.href = canvas.toDataURL('image/png', 1.0); a.click(); URL.revokeObjectURL(url); if(window.toast) toast('Downloaded!'); }; i.src = url; }; }