D
S
J
C
I
F
B
L
M
Fx
G
2
3
H
Mo
T
A
Dr
N
Cd
Tb
!
Cl
Fh
Ev
Tg
Sc
Dm
Gl
Gs
Nn
Hv
Bt
Gr
BH
BC
BJ
MH
MC
MJ
Page / Layout / UI / JS / CSS / Utility tools
Paste any page code into the editor, or load this page’s HTML, then preview and copy.
Code Editor
Live Preview
Amazon Walmart eBay AliExpress BestBuy Target Etsy Newegg Awin CJ Affiliate Impact Rakuten ShareASale Bankrate NerdWallet Experian LendingTree Hulu Paramount+ FuboTV Prime Video NordVPN HostGator Bluehost Canva Envato Booking.com Expedia Hotels.com Kayak Pixabay Pexels Unsplash Wikimedia Commons
\n'); break; case 'insertStyle': this.insertAtCursor('\n'); break; case 'insertImg': this.insertAtCursor('Image\n'); break; case 'insertIframe': this.insertAtCursor('\n'); break; case 'insertButton': this.insertAtCursor('\n'); break; case 'insertLinkCSS': this.insertAtCursor('\n'); break; case 'insertMeta': this.insertAtCursor('\n'); break; // Layout case 'addFlex': this.insertAtCursor('
\n
Item 1
\n
Item 2
\n
\n'); break; case 'addGrid': this.insertAtCursor('
\n
Cell 1
\n
Cell 2
\n
\n'); break; case 'add2Col': this.insertAtCursor('
\n
Left
\n
Right
\n
\n'); break; case 'add3Col': this.insertAtCursor('
\n
Col 1
\n
Col 2
\n
Col 3
\n
\n'); break; case 'addHeaderFooter': this.insertAtCursor('
\n

Header

\n
\n
\n

Content...

\n
\n\n'); break; // UI Components case 'addModal': this.insertAtCursor('\n'); break; case 'addTabs': this.insertAtCursor('
\n \n \n
Content 1
\n \n
\n\n'); break; case 'addAccordion': this.insertAtCursor('
\n \n \n
\n\n'); break; case 'addDropdown': this.insertAtCursor('\n'); break; case 'addNavbar': this.insertAtCursor('\n'); break; case 'addCard': this.insertAtCursor('
\n

Card Title

\n

Card content...

\n
\n'); break; case 'addTable': this.insertAtCursor('\n \n \n
Header 1Header 2
Row 1Data
\n'); break; // JS Snippets case 'addAlert': this.insertAtCursor('\n'); break; case 'addConsole': this.insertAtCursor('\n'); break; case 'addFetch': this.insertAtCursor('\n'); break; case 'addListener': this.insertAtCursor('\n'); break; case 'addToggle': this.insertAtCursor('\n
Toggle me
\n'); break; case 'addSmoothScroll': this.insertAtCursor('Scroll to target\n
\n
Target
\n\n'); break; case 'addDarkMode': this.insertAtCursor('\n\n'); break; // CSS Snippets case 'addGlow': this.insertAtCursor('\n'); break; case 'addGlass': this.insertAtCursor('\n'); break; case 'addNeon': this.insertAtCursor('\n'); break; case 'addHover': this.insertAtCursor('\n'); break; case 'addButtonStyles': this.insertAtCursor('\n'); break; case 'addGradient': this.insertAtCursor('\n'); break; // Utility (placeholder simple versions) case 'beautifyHTML': case 'beautifyCSS': case 'beautifyJS': case 'minifyHTML': case 'minifyCSS': case 'minifyJS': alert('Utility "' + action + '" is a placeholder. You can wire in a beautifier/minifier later.'); break; } }, applyToPreview() { const html = this.codeEditor.value; const doc = this.previewFrame.contentWindow.document; doc.open(); doc.write(html); doc.close(); }, loadSelfHTML() { fetch(window.location.href) .then(r => r.text()) .then(t => { this.codeEditor.value = t; this.applyToPreview(); }) .catch(err => { console.error('Cannot load self HTML (file:// may block):', err); alert('Loading this page HTML may not work from file://. Paste code manually if needed.'); }); }, generateHTML() { // For now, generated HTML is just the editor content this.generatedHTML = this.codeEditor.value; alert('HTML output generated. Use Copy or Show Modal.'); }, copyHTML() { const text = this.codeEditor.value; navigator.clipboard.writeText(text).then(() => { alert('HTML copied to clipboard. Paste into a new file in cPanel.'); }).catch(err => { console.error('Clipboard error:', err); alert('Clipboard copy failed. Use the modal and Select All instead.'); }); }, showModal() { this.modalTextarea.value = this.codeEditor.value; this.modalOverlay.style.display = 'flex'; }, hideModal() { this.modalOverlay.style.display = 'none'; } }; window.addEventListener('load', () => EditorApp.init());