Webify - Online Code Editor for Web Development with Live Preview

🚀 Overview

A sleek and powerful browser-based IDE for HTML, CSS, and JavaScript development. This project uses Next.js, Monaco Editor, and iframes to provide an instant live preview of your code as you type.

🎯 Objective

Create a responsive, user-friendly platform where users can:

• Write HTML, CSS, and JS in separate editors
• Instantly see the output in a live preview window
• Share code via a unique URL or database
• Optionally save and manage snippets with cloud storage

🛠️ Tech Stack

• Frontend: Next.js
• Code Editor: Monaco Editor (VS Code's editor)
• Preview Engine: HTML <iframe>

📚 Features

• 🔹 Real-time Live Preview (HTML/CSS/JS)
• 🔹 Monaco Editor Integration (syntax highlighting, autocompletion)
• 🔹 Responsive Layout (Side-by-side & full preview modes)
• 🔹 Template Support (start with boilerplates)
• 🔹 Code Sharing (via URL or database)
• 🔹 Optional: Save/Load snippets to/from cloud storage

🧩 Folder Structure (Simplified)

src/
├── components/
│   ├── monaco-editor.jsx
├── App.js
├── index.js
public/
└── index.html

🚧 Future Enhancements

• ⏳ User Authentication
• 🌩 Cloud-based snippet management
• 🌐 Collaborative coding support
• 🧠 AI-based code suggestions

📦 Installation

git clone https://github.com/yourusername/Webify.git
cd online-code-editor
npm install
npm run dev

---

Created with ❤️ by Debmallya Bhandari