\n' }, dashboard: { name: 'Dashboard App', icon: '📊', color: 'linear-gradient(135deg,#8b5cf6,#a78bfa)', desc: 'Charts, tables, sidebar navigation', tag: 'Popular', html: '\n

📊 Dashboard

🏠 Overview
📈 Analytics
👤 Users
💼 Projects
💰 Revenue
🛠 Settings
\n

Overview

Welcome back, Admin
A
\n
Total Revenue
$45,231
+20.1% from last month
Active Users
2,350
+15.2% from last month
Projects
127
+8.3% from last month
Conversion Rate
3.2%
-1.4% from last month
\n

Revenue Overview

MonTueWedThuFriSatSun

Traffic Sources

100%
■ Direct 42%■ Organic 28%■ Social 19%■ Referral 11%
\n

Recent Transactions

UserAmountDateStatus
John Doe$299.00Sep 18, 2026Completed
Jane Smith$149.00Sep 17, 2026Completed
Bob Wilson$89.00Sep 16, 2026Pending
Alice Brown$499.00Sep 15, 2026Completed
Charlie Davis$199.00Sep 14, 2026Failed
\n' } };/* ─── View: Landing ────────────────────────────────────────────── */ function renderLanding() { var html = ''; html += '
'; html += '
'; html += '
'; html += '
9 AI Agents Working For You
'; html += '

Build Anything.
For Free.

'; html += '

The free Replit alternative. Code editor, live preview, AI assistant, and one-click deploy. No credit card required.

'; html += '
'; html += 'Start Building Free →'; html += 'Explore Features'; html += '
'; html += '
'; html += '
9Free AI Models
'; html += '
$0Monthly Cost
'; html += '
∞Projects
'; html += '
'; html += '
'; /* Features */ html += '
'; html += '

Why CreateStuff.ai?

'; html += '

Everything you need to build, preview, and deploy apps — all powered by AI.

'; html += '
'; var features = [ { icon: '💻', title: 'Code Editor', desc: 'Full-featured code editor with syntax highlighting, line numbers, and multi-file support.' }, { icon: '👁', title: 'Live Preview', desc: 'See your changes instantly with a built-in live preview panel. No refresh needed.' }, { icon: '🤖', title: 'AI Assistant', desc: '9 AI agents that can write code, fix bugs, add features, and explain what they do.' }, { icon: '🚀', title: 'One-Click Deploy', desc: 'Deploy to Cloudflare Pages instantly. Get a free URL and share with the world.' }, { icon: '🛠', title: '5+ Templates', desc: 'Start with pre-built templates for SaaS, e-commerce, portfolios, blogs, and more.' }, { icon: '🔒', title: 'Full Ownership', desc: 'Your code, your data. Export anytime. No vendor lock-in. MIT licensed.' }, ]; features.forEach(function(f) { html += '
' + f.icon + '

' + f.title + '

' + f.desc + '

'; }); html += '
'; /* Comparison */ html += '
'; html += '

CreateStuff.ai vs Replit

'; html += ''; html += ''; html += ''; var rows = [ ['Monthly Price', '✓ $0 (Free)', '$25/month'], ['AI Models', '✓ 9 Free Models', 'Limited'], ['Code Editor', '✓ Full Editor', '✓ Full Editor'], ['Live Preview', '✓ Instant', '✓ Yes'], ['One-Click Deploy', '✓ Cloudflare Pages', '$7+/mo extra'], ['Custom Domains', '✓ Free', '$7+/month'], ['AI Code Generation', '✓ Unlimited', 'Paywalled'], ['Templates', '✓ 6+ Free Templates', 'Limited'], ['No Ads', '✓ Ad-Free', 'Ads on Free Tier'], ]; rows.forEach(function(r) { html += ''; }); html += '
FeatureCreateStuff.aiReplit
' + r[0] + '' + r[1] + '' + r[2] + '
'; /* Templates Preview */ html += '
'; html += '

Start with a Template

'; html += '

Choose from professionally designed templates and customize with AI.

'; html += '
'; var tKeys = Object.keys(TEMPLATES); tKeys.forEach(function(k) { var t = TEMPLATES[k]; html += '
'; html += '
' + t.icon + '
'; html += '

' + t.name + '

' + t.desc + '

'; html += '
' + t.tag + '
'; html += '
'; }); html += '
'; /* CTA */ html += '
'; html += '

Ready to Build Something Amazing?

'; html += '

Join thousands of developers building the future with free AI models.

'; html += 'Get Started Free →'; html += '
'; /* Footer */ html += ''; $('app').innerHTML = html; createParticles(); } function createParticles() { var c = $('particles'); if (!c) return; for (var i = 0; i < 30; i++) { var p = document.createElement('div'); p.className = 'particle'; p.style.left = Math.random() * 100 + '%'; p.style.animationDuration = (8 + Math.random() * 12) + 's'; p.style.animationDelay = Math.random() * 10 + 's'; p.style.width = p.style.height = (2 + Math.random() * 4) + 'px'; c.appendChild(p); } } function handleTemplateClick(tid) { if (!S.user) { showSignup(); return; } openPromptForTemplate(tid); }/* Prompt Builder */ var promptState={step:0,answers:{},templateId:null}; function openPrompt(){promptState={step:0,answers:{},templateId:null};renderPrompt();prompt-overlay.classList.add('open')} function openPromptForTemplate(tid){promptState={step:0,answers:{type:tid},templateId:tid};renderPrompt();prompt-overlay.classList.add('open')} function closePrompt(){prompt-overlay.classList.remove('open');setTimeout(function(){prompt-box.innerHTML=''},300)} function renderPrompt(){var s=promptState.step;var dots='';for(var i=0;i<4;i++){dots+='
'}var h='
'+dots+'
'; if(s===0){h+='

What type of app?

Choose a category or type your own.

'; var types=[{i:'saas',e:'⚡',l:'SaaS App'},{i:'ecommerce',e:'🛒',l:'E-Commerce'},{i:'portfolio',e:'🎨',l:'Portfolio'},{i:'blog',e:'📝',l:'Blog'},{i:'chat',e:'💬',l:'Chat App'},{i:'dashboard',e:'📊',l:'Dashboard'}]; types.forEach(function(t){var sel=promptState.answers.type===t.i?' selected':'';h+='
'+t.e+'
'+t.l+'
'}); h+='
'; h+='
'} else if(s===1){h+='

What features?

Select all that apply.

'; var feats=['Authentication','Payments','Database','Real-time','Analytics','API','Search','Notifications']; feats.forEach(function(f){var sel=(promptState.answers.features||[]).indexOf(f)>=0?' selected':'';h+='
'+f+'
'}); h+='
'} else if(s===2){h+='

What style?

Pick a visual style.

'; var styles=[{i:'modern',e:'🌟',l:'Modern Dark'},{i:'minimal',e:'🖱',l:'Minimal'},{i:'colorful',e:'🎨',l:'Colorful'},{i:'professional',e:'💼',l:'Professional'}]; styles.forEach(function(st){var sel=promptState.answers.style===st.i?' selected':'';h+='
'+st.e+'
'+st.l+'
'}); h+='
'} else if(s===3){h+='
🤖

Generating your project...

AI is building your app

'} prompt-box.innerHTML=h} function selectPromptOption(key,val){promptState.answers[key]=val;renderPrompt()} function togglePromptFeature(f){if(!promptState.answers.features)promptState.answers.features=[];var idx=promptState.answers.features.indexOf(f);if(idx>=0)promptState.answers.features.splice(idx,1);else promptState.answers.features.push(f);renderPrompt()} function promptNext(){var inp=prompt-custom;if(promptState.step===0&&inp&&inp.value.trim()){promptState.answers.customType=inp.value.trim();promptState.answers.type='custom'}promptState.step++;renderPrompt()} function promptPrev(){promptState.step--;renderPrompt()} function generateFromPrompt(){promptState.step=3;renderPrompt();var fill=gen-fill;var pct=0;var iv=setInterval(function(){pct+=Math.random()*15+5;if(pct>=100){pct=100;clearInterval(iv);setTimeout(function(){closePrompt();var tid=promptState.answers.type||'saas';if(!TEMPLATES[tid])tid='saas';startProject(tid)},500)}fill.style.width=pct+'%'},300)} function startProject(tid){var t=TEMPLATES[tid];if(!t)return;S.currentProject={id:uid(),templateId:tid,name:t.name+' Project',html:t.html,css:'',js:'',created:new Date().toISOString(),status:'active'};saveProjects();navigate('builder')}/* View: Dashboard */ function renderDashboard(){ var h='
'; h+='

Welcome back, '+(S.user?esc(S.user.name):'User')+'

Build something amazing today

'; h+='
'; h+='
'; h+='
📁
'+S.projects.length+'
Total Projects
'; h+='
🚀
'+S.projects.filter(function(p){return p.status==='deployed'}).length+'
Deployed
'; h+='
🤖
9
AI Models
'; h+='
'; h+='

Your Projects

'; if(S.projects.length===0){ h+='
🏠

No projects yet

Start building your first app with AI assistance

'; h+='
'; }else{ h+='
'; S.projects.slice().reverse().forEach(function(p){ var t=TEMPLATES[p.templateId]||TEMPLATES.saas; h+='
'; h+='
'+t.icon+'
'; h+=''+(p.status||'active')+'
'; h+='

'+esc(p.name)+'

Created '+fmtDate(p.created)+(p.lastEdited?' | Edited '+fmtDate(p.lastEdited):'')+'

'; h+='
'; h+=''; if(p.status==='deployed')h+=''; h+=''; h+='
'; }); h+='
'; } h+='
'; app.innerHTML=h; } function openProject(pid){var p=S.projects.find(function(x){return x.id===pid});if(!p)return;S.currentProject=Object.assign({},p);navigate('builder')} function deleteProject(pid){if(!confirm('Delete this project?'))return;S.projects=S.projects.filter(function(x){return x.id!==pid});saveProjects();toast('Project deleted');renderDashboard()} function showDeployUrl(name){var url='https://'+slugify(name)+'.createstuff.pages.dev';openModal('
Project Deployed!
'+url+'
')}/* View: Templates */ function renderTemplates(){ var h='
'; h+='

Templates

Choose a template to start building

'; h+='
'; h+='
'; var keys=Object.keys(TEMPLATES); keys.forEach(function(k){ var t=TEMPLATES[k]; h+='
'; h+='
'+t.icon+'
'; h+='

'+t.name+'

'+t.desc+'

'; h+='
'+t.tag+'
'; h+=''; h+='
'; }); h+='
'; app.innerHTML=h; } function startProjectFromTemplate(tid){startProject(tid);navigate('builder')}/* View: Builder */ function renderBuilder(){ var p=S.currentProject; if(!p){navigate('dashboard');return} var t=TEMPLATES[p.templateId]||TEMPLATES.saas; var h='
'; h+='
'; h+='
'; h+=''; h+=''+t.icon+' '+esc(t.name)+'
'; h+='
'; h+=''; h+='
'; h+=''; h+=''; h+=''; h+=''; h+=''; h+='
'; h+='
'; /* Editor Panel */ h+='
'; h+='
'; h+=''; h+=''; h+=''; h+='
'; h+='
'; h+='
'; h+='
'; h+='
'; h+='index.html | UTF-8'; h+='Ln 1, Col 1
'; h+='
'; /* Preview Panel */ h+='
'; h+='
Live Preview
'; h+=''; h+='
👁

Click Run to preview your code

'; h+='
'; /* AI Panel */ h+='
'; h+='

🤖 AI Assistant

'; h+='
'; h+='
+ Add Navigation Bar
'; h+='
+ Make Responsive
'; h+='
+ Add Dark Mode Toggle
'; h+='
+ Add Footer
'; h+='
💡 Explain My Code
'; h+='
'; h+='
'; h+='
'; h+='
'; h+='
'; app.innerHTML=h; initMonacoEditor(); } function switchTab(btn,tab){ document.querySelectorAll('.panel-tab').forEach(function(t){t.classList.remove('active')}); btn.classList.add('active'); var p=S.currentProject;if(!p||!window.editor)return; /* Save current tab content */ var prevTab=S.currentTab||'html'; if(!p.tabs)p.tabs={html:p.html||'',css:p.css||'',js:p.js||''}; p.tabs[prevTab]=window.editor.getValue(); /* Switch */ S.currentTab=tab; window.editor.setValue(p.tabs[tab]||''); var langMap={html:'html',css:'css',js:'javascript'}; monaco.editor.setModelLanguage(window.editor.getModel(), langMap[tab]||'html'); var tabNames={html:'index.html',css:'style.css',js:'app.js'}; editor-status.textContent=(tabNames[tab]||tab)+' | UTF-8'; } function onEditorInput(){ var p=S.currentProject;if(!p||!window.editor)return; var tab=S.currentTab||'html'; if(!p.tabs)p.tabs={html:p.html||'',css:p.css||'',js:p.js||''}; p.tabs[tab]=window.editor.getValue(); } function updateLineNumbers(){} function syncLineNumbers(){} function updateCursorPos(){ if(!window.editor)return; var pos=window.editor.getPosition(); if(pos)editor-pos.textContent='Ln '+pos.lineNumber+', Col '+pos.column; } function handleTab(e){} function changeFontSize(v){S.fontSize=parseInt(v);if(window.editor)window.editor.updateOptions({fontSize:parseInt(v)})} function toggleWordWrap(){S.wordWrap=!S.wordWrap;if(window.editor)window.editor.updateOptions({wordWrap:S.wordWrap?'on':'off'})} function toggleAiPanel(){var p=ai-panel;if(p){p.classList.toggle('collapsed')}}/* Preview */ function runPreview(){ var p=S.currentProject;if(!p)return; if(!p.tabs)p.tabs={html:p.html||'',css:p.css||'',js:p.js||''}; var tab=S.currentTab||'html'; if(window.editor)p.tabs[tab]=window.editor.getValue(); var htmlContent=p.tabs.html||''; var cssContent=p.tabs.css||''; var jsContent=p.tabs.js||''; var full=''+htmlContent+'