*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0f172a;color:#e2e8f0;padding:20px;line-height:1.6}
h1{text-align:center;margin:8px 0 4px;font-size:1.8em;color:#f8fafc}
.subtitle{text-align:center;color:#94a3b8;margin-bottom:24px;font-size:0.95em}
.filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:24px}
.filter-btn{padding:8px 16px;border:1px solid #334155;border-radius:8px;background:#1e293b;color:#e2e8f0;cursor:pointer;font-size:0.85em;transition:all 0.2s}
.filter-btn:hover,.filter-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.card{background:#1e293b;border:1px solid #334155;border-radius:12px;padding:20px;transition:transform 0.2s}
.card:hover{transform:translateY(-2px);border-color:#3b82f6}
.card h2{font-size:1.2em;margin-bottom:4px;color:#f8fafc}
.card .price{color:#22c55e;font-weight:600;margin-bottom:8px}
.card .tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:0.75em;margin:2px}
.tag-green{background:#052e16;color:#86efac}
.tag-blue{background:#172554;color:#93c5fd}
.tag-yellow{background:#422006;color:#fde047}
.tag-red{background:#450a0a;color:#fca5a5}
.card ul{margin:8px 0 8px 20px;font-size:0.9em;color:#cbd5e1}
.card .score{margin-top:12px;padding-top:12px;border-top:1px solid #334155;display:flex;justify-content:space-between;align-items:center}
.score-bar{height:6px;background:#334155;border-radius:3px;overflow:hidden;flex:1;margin:0 12px}
.score-fill{height:100%;border-radius:3px}
.recommend{display:block;text-align:center;padding:10px;background:#3b82f6;color:#fff;border-radius:8px;text-decoration:none;margin-top:12px;font-weight:600}
.recommend:hover{background:#2563eb}
.matrix{width:100%;border-collapse:collapse;margin-top:24px;font-size:0.85em}
.matrix th,.matrix td{padding:8px 12px;text-align:center;border:1px solid #334155}
.matrix th{background:#1e293b;color:#94a3b8;font-weight:600}
.matrix tr:nth-child(even){background:#1e293b}
.matrix tr:nth-child(odd){background:#0f172a}
.check{color:#22c55e}.cross{color:#ef4444}
.section-title{margin:32px 0 16px;font-size:1.3em;color:#f8fafc}

${t.name}
${t.price}

${t.tags.map(tag=>`${tag}`).join(' ')}

${t.features.map(f=>`${f}`).join('')}
✓ ${t.pros}
✗ ${t.cons}

${t.score}/100

Try ${t.name} →

matrix.innerHTML+=`${f}`+filtered.map(t=>{
const has=t.features.some(ff=>ff.toLowerCase().includes(f.toLowerCase().split(' ')[0]));
return`${has?'✓':'✗'}`;

const tools=[

function filter(tag){

function render(tag){
const filtered=tag==='all'?tools:tools.filter(t=>t.tags.includes(tag));
const grid=document.getElementById('toolGrid');

const features=['Multi-file editing','Agent mode','Free tier','Enterprise','IDE extension','Git integration','Code review','Autonomous PR'];
const matrix=document.getElementById('matrix');
matrix.innerHTML='Feature'+filtered.map(t=>`${t.name}`).join('')+'';

🤖 AI Coding Assistant Comparison Tool

Compare the top AI coding tools of 2026 — features, pricing, and best use cases

📊 Feature Comparison Matrix

{id:’cursor‘,name:’Cursor‘,price:’$20/mo‘,tags:[‚ide‘,’free‘],score:92,features:[‚Multi-file editing‘,’Codebase-wide search‘,’Composer agent mode‘,’VS Code fork — zero learning curve‘,’Tab autocomplete++‘],pros:’Best overall AI-native IDE experience‘,cons:’Requires subscription for full features‘,url:’https://cursor.sh‘},
{id:’copilot‘,name:’GitHub Copilot‘,price:’$10/mo‘,tags:[‚ide‘,’enterprise‘],score:88,features:[‚Copilot Workspace (issue→PR)‘,’Deep GitHub integration‘,’Multi-line completions‘,’Chat in IDE‘,’Code review in PRs‘],pros:’Best GitHub ecosystem integration‘,cons:’Less powerful agent mode than competitors‘,url:’https://github.com/features/copilot‘},
{id:’devin‘,name:’Devin (Cognition)‘,price:’$500/mo‘,tags:[‚autonomous‘,’enterprise‘],score:85,features:[‚Full autonomous agent‘,’Parallel execution‘,’Own cloud environment‘,’End-to-end PR creation‘,’Handles entire features‘],pros:’Most autonomous — hands-off development‘,cons:’Expensive, can be unpredictable on complex tasks‘,url:’https://devin.ai‘},
{id:’amazonq‘,name:’Amazon Q Developer‘,price:’$19/mo‘,tags:[‚ide‘,’enterprise‘],score:80,features:[‚Java/.NET modernization‘,’AWS integration‘,’Security scanning‘,’Code transformation‘,’Chat in IDE‘],pros:’Best for AWS-heavy enterprises‘,cons:’Limited outside AWS ecosystem‘,url:’https://aws.amazon.com/q/developer‘},
{id:’replit‘,name:’Replit Agent‘,price:’$25/mo‘,tags:[‚ide‘,’free‘],score:78,features:[‚Full-stack scaffolding‘,’Instant deployment‘,’Database setup‘,’UI iteration‘,’Beginner-friendly‘],pros:’Fastest zero-to-deployed experience‘,cons:’Less powerful for complex existing codebases‘,url:’https://replit.com‘},
{id:’windsurf‘,name:’Windsurf (Codeium)‘,price:’$15/mo‘,tags:[‚ide‘,’free‘],score:82,features:[‚Cascade flow-based agent‘,’Supercomplete predictions‘,’Free tier available‘,’VS Code extension‘,’Multi-model support‘],pros:’Best free tier with agent capabilities‘,cons:’Newer, smaller community‘,url:’https://codeium.com/windsurf‘},
{id:’aider‘,name:’Aider‘,price:’$Free / API costs‘,tags:[‚free‘,’autonomous‘],score:75,features:[‚Terminal-based‘,’Git-integrated‘,’Open source‘,’Works with any LLM‘,’Pair programming in terminal‘],pros:’Free and open source‘,cons:’Terminal-only, no GUI‘,url:’https://aider.chat‘},
{id:’tabnine‘,name:’Tabnine‘,price:’$12/mo‘,tags:[‚ide‘,’enterprise‘],score:76,features:[‚Private model training‘,’On-prem deployment‘,’Team-wide consistency‘,’Multi-language‘,’Enterprise security‘],pros:’Best for data-sensitive enterprises‘,cons:’Less capable agent features‘,url:’https://tabnine.com‘}
];

document.querySelectorAll(‚.filter-btn‘).forEach(b=>b.classList.remove(‚active‘));
event.target.classList.add(‚active‘);
render(tag);
}

grid.innerHTML=filtered.map(t=>`