Web app · Developer tool · 2025

IDE Arena

Objective comparisons of the top code editors for developers and startups.

Role: Design + Engineering
Timeline: Archived · 2025
Stack: Next.js 16 · Tailwind 4 · Radix UI · TanStack Table

Problem

Switching IDEs costs days. Finding the right one should take minutes.

Every developer switching to an AI-native workflow faces the same question: Cursor, Windsurf, VS Code with Copilot, or JetBrains? Marketing pages answer with superlatives. A comparison tool has to answer with rows and columns.

IDE Arena compiles the criteria that actually matter (pricing tiers, AI request limits, multi-file edit support, startup time, extension ecosystem) into a single structured matrix. The goal is one honest page that ends the research phase and starts the decision.

The full comparison matrix on the Pricing tab, showing VS Code, Cursor, Windsurf, JetBrains, Zed, and Antigravity in columns with feature rows — The core product: a tabbed matrix that lets you scan pricing, AI capabilities, performance, and ecosystem without leaving the page.

Decisions

One matrix, five tabs, not five pages.

The data across all five dimensions (pricing, AI, performance, customization, ecosystem) could have lived on five separate routes, linked from a nav. Instead, a single /comparison page holds everything behind a tab strip: one URL to bookmark, one page to share, one scroll position to orient from. TanStack Table handles the row definitions so adding a new IDE is a data edit, not a layout rebuild. Each cell uses a small badge component (green tick, red cross, or a coloured label) that communicates at a glance without requiring the reader to interpret a scoring scale.

AI Features comparison tab showing codebase understanding, multi-file edits, and full code generation rows — AI features: codebase understanding and multi-file edits mapped per IDE.

Pricing comparison page showing monthly costs, AI limits, team plans, and value scores — Pricing: free tiers, AI request caps, and a price-to-value grade.

The Arena leaderboard ranking six IDEs by composite Arena Score with per-category letter grades — The Arena: six IDEs ranked by a composite score, A+ to F per category.

Mobile view of the landing page showing the full category grid and IDE cards stacked vertically — Mobile: the full comparison hierarchy readable at 390 px.

Five screens in 30 seconds: landing, leaderboard, matrix, AI features, and the quiz.

Outcome

6: IDEs compared
5: Comparison dimensions
A+–F: Arena Score grading scale

The tabbed matrix design held up well: when Zed and Antigravity joined the arena, each was a data file change, not a template edit. The same data now powers three surfaces: the comparison matrix, a leaderboard that averages the five category grades into a composite Arena Score, and a five-question quiz that scores your constraints against the leaderboard data to recommend an IDE.

Back to Work