Design a code editor in the browser
PremiumFrontend systemHard
- Piece table
- Virtualized lines
- Incremental tokenization
Quick answer
This frontend system interview question asks you to design a code editor in the browser. Aim for a design that loads fast, stays responsive and is easy to maintain, then explain components, state, data fetching and trade-offs. Interviewers want to see how you structure the interface, manage state and keep the experience fast.
The problem
Design a code editor in the browser, like VS Code for the web or CodeSandbox, with tabs, syntax highlighting, multiple cursors and language features. The hard part is keeping each keystroke under 16 ms even in a 100,000-line file, so the buffer, rendering and highlighting must all be incremental.
Users open files from a project tree into tabs, type code with syntax highlighting, use multiple cursors, find and replace, fold blocks, undo and redo, and see completions and error squiggles from a language service. Files can be large: a generated JSON or a minified bundle can be 100,000 lines. Typing must never feel slower than a native editor, including when the editor sits inside an online judge.
What must a code editor in the browser do?
- Editing: Insert, delete, select, multiple cursors (Alt+Click, Ctrl+D), auto-indent, bracket matching, line comments.
- Highlighting: Syntax colours for TypeScript, Python, JSON and Markdown that update as you type.
How well must it do it?
- Input latency: A keystroke appears on screen within 16 ms, even in a 100,000-line file.
- Open time: A 5 MB file is editable within 500 ms.
What scale should you design for?
Use these numbers in your estimates.
The scale numbers unlock with this questionUnlock
Key concepts
- Piece table
- Virtualized lines
- Incremental tokenization
- Web workers
- IME composition
- Multi cursor
How you’ll practise
- Requirements
- Components
- State and data
- Network and caching
- Performance and accessibility
- Wrap-up
Lala, personalized to you, gives a hint when you ask and reviews your design when you are ready.
What do interviewers look for?
In any frontend system design round.
- Starts from the user flows and the screens
- Splits the interface into clear components
- Decides where state lives and how it stays in sync
- Plans data fetching, caching and loading states
- Covers performance, accessibility and error states
- Explains how the design holds up on slow networks and small screens
Questions people ask about this interview question
- Which design type is this question?
- It is a frontend system question. You design a code editor in the browser and explain your choices the way you would in an interview.
- Is this question asked at entry level?
- It is marked Hard. It suits engineers preparing for senior interviews, where you are expected to drive the discussion and go deep on trade-offs.
- What should I cover first?
- Start with the main user flows, the screens and the data each one needs. Agree on scope with the interviewer before you design anything.
- Can I practise it for free?
- It is a premium question. Sign up and unlock it once for 10 credits; it then stays unlocked. When you finish, Lala, your personalized AI mentor, can review your design for 30 credits.
Related questions
Updated · Written by the SevyDevy team