9 Blocks · PNG Export · 100% Free
Business Model Canvas Generator
Build a complete Business Model Canvas for any company or startup, editable and fillable directly in your browser. All 9 colour-coded blocks are interactive, add points and export as a high quality PNG. Pro Mode adds 8 colour themes, canvas stats, a live preview and strategy tips.
100% Private — saved only in your browser, never sent to a server
● Pro Version is Free for now
Day
Night
Company or Business
💻 SaaS Startup
🛒 E-Commerce
🏪 Marketplace
🎯 Consulting Firm
🍽️ Restaurant
🤝 Non-Profit
Key Partners
Who helps you?
Key Activities
What do you do?
Value Proposition
What value do you create?
Customer Relationships
How do you interact?
Customer Segments
Who are your customers?
Key Resources
What do you need?
Channels
How do you reach them?
Cost Structure
What are your major costs?
Revenue Streams
How do you make money?
📖 Quick Reference
Key Partners who helps you.
Key Activities what you do.
Key Resources what you need.
Value Proposition value you create.
Customer Relationships how you interact.
Channels how you reach them.
Customer Segments who your customers are.
Cost Structure your major costs.
Revenue Streams how you make money.
📊 Canvas Stats PRO
0
Total Points
0/9
Blocks Filled
0
Avg per Block
9
Blocks Empty
🎨 Colour Theme PRO
Default👁️ Live Export Preview PRO
Click to Download
💡 Business Model Canvas Tips PRO
${t}
`).join('');
}// ─── SAVE ─────────────────────────────────────────────────────
function schedSave(){
const dot=document.getElementById('saveDot'),lbl=document.getElementById('saveLbl');
if(dot)dot.style.background='#f59e0b';if(lbl)lbl.textContent='Saving…';
clearTimeout(saveTimer);
saveTimer=setTimeout(()=>{
try{const d={subject,pal:curPal};BLOCKS.forEach(b=>{d[b.key]=data[b.key];});localStorage.setItem(SK,JSON.stringify(d));if(dot)dot.style.background='#10b981';if(lbl)lbl.textContent='Saved';}catch(e){}
},1200);
}function clearAll(){
const total=BLOCKS.reduce((s,b)=>s+data[b.key].length,0);
if(!total&&!subject)return;
if(confirm('Clear the entire canvas?')){BLOCKS.forEach(b=>{data[b.key]=[];});subject='';document.getElementById('subjectInput').value='';renderAll();toast('Canvas cleared!');}
}// ─── APP MODE ─────────────────────────────────────────────────
function setAppMode(m){
isPro=m==='pro';
document.getElementById('btnSimple').classList.toggle('active',!isPro);
document.getElementById('btnPro').classList.toggle('active',isPro);
widget().classList.toggle('pro-mode',isPro);
const pb=document.getElementById('proBar');if(pb)pb.style.display=isPro?'flex':'none';
const pr=document.getElementById('paletteRow');if(pr)pr.style.display=isPro?'flex':'none';
if(isPro){buildPaletteBar();updateCanvas();}
try{localStorage.setItem('sst_bmc_mode',m);}catch(e){}
}function esc(s){return(s||'').replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"');}
function toast(msg){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2400);}// ─── INIT ─────────────────────────────────────────────────────
function init(){
try{
const saved=localStorage.getItem(SK);
if(saved){const d=JSON.parse(saved);subject=d.subject||'';BLOCKS.forEach(b=>{if(d[b.key])data[b.key]=d[b.key];});document.getElementById('subjectInput').value=subject;if(d.pal)curPal=d.pal;}
const m=localStorage.getItem('sst_bmc_mode');if(m==='pro')setAppMode('pro');
}catch(e){}
renderAll();
}
init();