Codepedia ⚡

Codepedia is a lightweight, browser-based live code editor designed for web developers to prototype and test HTML, CSS, and JavaScript instantly. With a sleek, dark-themed interface and real-time preview engine, it offers a seamless coding experience similar to CodePen.

🚀 Live Demo

Check out the live application here: 👉 https://codepedia-sandy.vercel.app/

---

✨ Features

• Real-time Preview: Instantly renders HTML, CSS, and JavaScript as you type.
• Three-Pane Layout: Dedicated, resizable code editors for distinct languages.
• Smart Error Handling: JavaScript execution is wrapped in try-catch blocks to prevent the editor from crashing on syntax errors.
• Modern UI/UX:
  • Dark mode aesthetics with a custom color palette (#0f0f12 background).
  • Glassmorphism effects on UI elements.
  • Syntax highlighting simulation using colored borders and distinct fonts.
• Typography: Integrated Fira Code for monospaced editing and Inter for the UI.
• Responsive: Flexible layout that adapts to different screen sizes.

🛠️ Tech Stack

• Frontend: HTML5, CSS3 (Custom Properties/Variables)
• Logic: Vanilla JavaScript
• Fonts: Google Fonts (Inter, Fira Code)
• Icons: Custom CSS-styled indicators

📂 Project Structure

Codepedia/
├── .vscode/          # VS Code configuration
├── index.html        # Main application entry point
├── style.css         # Global styling and editor themes
├── script.js         # Core logic for live preview generation
└── .gitignore        # Git ignore rules

Built with ❤️ by Rudresh Rajvansh