Every web project these days starts with the same question: React or Vue? Next.js or Nuxt? TypeScript or not?
When we built Deoit — a browser-based code editor with syntax highlighting, autocomplete, file explorer, live preview, and cloud sync — we chose none of them.
Just vanilla JavaScript. Here's why.
The Problem with Frameworks for This Use Case
We considered React, Vue, and Svelte. But Deoit is a tool, not a content site. It needs to:
- Load fast — every millisecond matters for an editor
- Work offline — developers should code without internet
- Stay lightweight — no one wants a 2MB bundle for a code editor
- Be hackable — users should understand every line
Frameworks are great for data-driven UIs. But for a text manipulation tool, they add overhead without proportional benefit.
What We Built Instead
Deoit is approximately 2000 lines of vanilla JavaScript. Here's what it handles:
// Syntax highlighting — custom tokenizer
// 25+ token types: tags, attributes, strings,
// selectors, properties, functions, keywords...
// File system — full CRUD with folders
// Drag-and-drop, rename, delete, create
// Auto-complete — context-aware suggestions
// HTML tags, CSS properties, JS keywords
// Live preview — sandboxed iframe
// Console bridge via postMessage
// Cloud sync — Supabase auth + storage
// Google and GitHub sign-in
// Settings — 7 themes, font size, tab size
// All applied via CSS custom propertiesThe Benefits
1. Zero Build Step
Every edit is instantly deployable. No npm run build, no webpack config, no waiting. Edit → Save → Deploy. That's it.
2. Tiny Bundle Size
The entire editor — HTML, CSS, and JS — loads in under 100KB. Compare that to CodeSandbox's initial load of 2MB+. The result? Deoit loads in under 1 second on 3G.
3. No Dependency Hell
Zero node_modules. Zero security vulnerabilities from third-party packages. Zero "this package is deprecated" warnings. Just our code and the browser's APIs.
4. Total Control
When the syntax highlighter has a bug, we fix it in 5 lines. When we need a new feature, we don't hunt for a library — we write it. Every line of code is ours.
5. It's Educational
Deoit is a learning platform. Students can open DevTools and read every line. There's no magic — just HTML, CSS, and JavaScript they can understand and learn from.
What We Sacrificed
Let's be honest about the tradeoffs:
- No component reuse — we rebuild UI patterns instead of importing components
- No virtual DOM — we manually update the DOM, which requires more care
- No TypeScript — we rely on discipline and testing instead of type checking
- No ecosystem — no npm packages, no community components
For Deoit, these tradeoffs are worth it. The benefits of simplicity outweigh the costs of ecosystem.
The Numbers
- ~2000 lines of JavaScript (editor core)
- ~1500 lines of CSS
- 0 npm dependencies at runtime
- <100KB total page weight
- <1 second load time on 3G
Should You Use Vanilla JS?
It depends. If you're building a dashboard with complex state management — use React. If you're building a content site — use Next.js or Astro.
But if you're building a tool, a utility, or something where performance and simplicity matter most — consider vanilla JavaScript. You might be surprised how much you can build without a framework.
"The best code is no code at all." — Jeff Atwood
The second best? Simple, readable, vanilla code.
Try the result: deoit.vercel.app