9 Blocks · Colour Themes · PNG Export · 100% Free
Free Business Model Canvas Template (Editable & Fillable)
Build a complete Business Model Canvas for any company or startup. All 9 colour-coded blocks, interactive. Add points, choose a theme and export as PNG or PDF.
● Pro Version is Free for now
✓ 8 colour themes · Monochrome · Canvas stats · Live preview · Print / PDF · Smart tips unlocked
Your canvas is saved only in your browser — nothing is ever sent to any server
Company or Business
💻 SaaS Startup
🛒 E-Commerce
🏪 Marketplace
🎯 Consulting Firm
🍽️ Restaurant
🤝 Non-Profit
0
Total Points
0/9
Blocks Filled
0
Avg per Block
9
Blocks Empty
🎨 Theme:
Default
🤝
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?
Auto-saved
👁️ Live Export Preview — Click to Download
💡 Business Model Canvas Tips
${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);
document.body.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();