Solana dApp Builder
Start Building Your dApp
Click component buttons to add them via modal preview
Customizations
Preview
This is how the component will look in your dApp
Purchase dApp Source Code
Pay 0.1 SOL to download the complete HTML source
0.1 SOL
≈ $15 USD
SoLdApP8UyBuiRk4Jjqg7v9j5p8gHaQ6tSXzNmVc7x
After payment verification, you’ll receive a download link for the complete HTML file.
Payment received! Generating your dApp source code…
Your dApp is ready! Copy the code below or download the HTML file.
';
document.getElementById('sourceCode').textContent = sourceCode;
}
function showExportModal() {
generateSourceCode();
exportModal.show();
}
function copySourceCode() {
const sourceCode = document.getElementById('sourceCode').textContent;
navigator.clipboard.writeText(sourceCode)
.then(() => {
alert('Source code copied to clipboard!');
})
.catch(err => {
console.error('Copy failed:', err);
const textArea = document.createElement('textarea');
textArea.value = sourceCode;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
alert('Source code copied to clipboard!');
});
}
function downloadHTMLFile() {
const sourceCode = document.getElementById('sourceCode').textContent;
const blob = new Blob([sourceCode], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = currentDesign.name.toLowerCase().replace(/\s+/g, '-') + '-dapp.html';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
alert('Your dApp has been downloaded as "' + a.download + '"');
}
function previewGeneratedCode() {
const sourceCode = document.getElementById('sourceCode').textContent;
const previewWindow = window.open('', '_blank');
previewWindow.document.write(sourceCode);
previewWindow.document.close();
}
function previewFullScreen() {
const previewContent = document.getElementById('livePreview').innerHTML;
document.getElementById('fullscreenPreview').innerHTML = previewContent;
fullscreenModal.show();
}
function updateColorDisplays() {
document.getElementById('primaryColorValue').textContent = document.getElementById('primaryColor').value.toUpperCase();
document.getElementById('secondaryColorValue').textContent = document.getElementById('secondaryColor').value.toUpperCase();
document.getElementById('bgColorValue').textContent = document.getElementById('bgColor').value.toUpperCase();
}
