Deoit

Browser-based IDE for HTML, CSS & JavaScript
Build, run, and preview projects instantly — no local setup required.

---

What is Deoit?

Deoit is a browser-based IDE for building with HTML, CSS, and JavaScript. Full syntax highlighting, smart autocomplete, multi-file projects, live preview, and a built-in console — all running in the browser with zero configuration.

• No local setup. No toolchain. Just open and build.
• 81+ reference lessons across 6 topics

Try it live → deoit.js.org

---

Features

Advanced Code Editor

• Syntax highlighting for 25+ token types
• Smart autocomplete with fuzzy matching (HTML tags, CSS properties, JS keywords)
• Auto-closing tags and bracket pairs
• HTML5 boilerplate shortcut (! + Tab)
• 7 themes — Dark, Light, Dracula, Monokai, Nord, GitHub Dark, One Dark

File Explorer

• Create, rename, delete files and folders
• Drag-and-drop reordering
• Multi-file project support
• Auto-save to browser + cloud

Live Preview

• One-click run in a sandboxed popup
• Multiple HTML file support

Console

• Captures console.log, warn, error, info
• Runtime error catching

Cloud Sync

• Google Sign-In and GitHub Sign-In
• Auto-save projects to cloud

81+ Reference Lessons

• HTML (25 lessons) — Tags, forms, semantic HTML, media, SVG
• CSS (17 lessons) — Flexbox, Grid, animations, responsive, variables
• JavaScript (20 lessons) — DOM, async, ES6+, classes, modules
• React (12 lessons) — Components, hooks, state, props, Router
• Node.js (6 lessons) — Modules, HTTP, npm, Express
• Developer Tools (6 lessons) — Git, terminal, devtools, VS Code

---

Quick Start

Use Online (Recommended)

Open Deoit → deoit.js.org/pages/editor

Run Locally

git clone https://github.com/MajedQandeel0/deoit-code-editor.git
cd deoit-code-editor
npx serve .

Then open http://localhost:3000 in your browser.

---

Embed Deoit in Your Site

Add a live code playground to any webpage:

<iframe 
  src="https://deoit.js.org/embed" 
  width="100%" 
  height="500" 
  frameborder="0"
  style="border-radius:12px;border:1px solid #252525;"
></iframe>

---

Tech Stack

Layer	Technology
Frontend	Vanilla HTML, CSS, JavaScript
Auth	Supabase (Google + GitHub)
Hosting	Vercel
Analytics	Umami (privacy-respecting)
Storage	localStorage + Supabase Cloud
Build	None — zero build step

---

Contact

For questions or feedback:

• Email: deoit.platform@gmail.com

---

License

All rights reserved. © 2026 Deoit. This source code is shared for viewing purposes only. No permission is granted to copy, modify, distribute, or use this code without explicit written permission from the author.