Code Editor By dcoso.dev 🚀

A modern, lightweight code editor built with Next.js and TypeScript. Write, preview, and download HTML, CSS, and JavaScript code in real-time.

✨ Features

• 🎨 Real-time code preview
• 🌓 Dark/Light mode support
• 💾 Download code as HTML file
• ⚡ Fast and responsive
• 🎯 Monaco Editor integration
• 📱 Mobile-friendly design

🚀 Getting Started

1. Clone the repository:

   git clone https://github.com/dcosodev/code-editor.git

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 in your browser.

🛠️ Tech Stack

• Framework: Next.js 15
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Code Editor: Monaco Editor
• Icons: Lucide Icons

📁 Project Structure

├── app/                  # Next.js app directory
├── components/          # React components
│   ├── editor/         # Editor-related components
│   └── ui/             # UI components
├── hooks/              # Custom React hooks
├── lib/                # Utility functions
└── public/             # Static assets

🧩 Components

Editor Components

• Editor: Main editor component with HTML, CSS, and JS panels
• EditorPanel: Individual code editor panel
• Preview: Live preview of the code
• CodeEditor: Monaco editor wrapper

UI Components

• Navbar: Application header with theme toggle
• ModeToggle: Dark/light mode switcher
• Button: Reusable button component

🎯 Usage

1. Write HTML, CSS, and JavaScript code in their respective panels
2. See real-time preview in the bottom panel
3. Toggle between dark and light themes using the theme switcher
4. Download your code as an HTML file using the download button

📄 License

MIT License - feel free to use this code for your own projects!

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.