CodeCraft is a modern web-based frontend playground that enables developers to write, edit, and preview HTML, CSS, and JavaScript code in real time. Built with cutting-edge technologies like Next.js, React, @uiw/react-codemirror, and Tailwind CSS, it offers a clean, responsive, and intuitive user experience for rapid prototyping, learning, and sharing.
- 🖊 Live Code Editing — Write HTML, CSS, and JS simultaneously with instant results.
- ⚡ Real-Time Preview — See your output update live as you type.
- 🎨 Responsive UI — Built with Tailwind CSS and
shadcn/uifor a clean and accessible interface. - 🧠 @uiw/react-codemirror Integration — Fast, lightweight code editor with syntax highlighting and customization support.
- 📱 Mobile-Friendly Design — Optimized layout for all screen sizes.
- 🌈 Dark/Light Theme Support — Seamless theme switching based on system preferences.
- 💾 Local Save Option — Save your code to
localStorageto persist work across sessions. - 🔗 Rich UI Enhancements — Includes icons and animations using
react-icons,swiper-js.
- Framework: Next.js + React
- Editor:
@uiw/react-codemirror - Styling: Tailwind CSS + shadcn/ui
- Icons & UI:
react-icons,swiper-js.
- 🎯 Rapid prototyping of frontend components and layouts.
- 📚 Learning and experimenting with HTML, CSS, and JavaScript.
- 🔗 Sharing live, interactive code snippets with others.
- 💡 Practicing and improving frontend development skills.
- 📁 Code Export (Download as files or Gists)
- 🔗 Shareable preview URLs
- 💬 Collaborative editing
- ☁️ Cloud saving and GitHub login
- 📦 Integration with code hosting services
Theming support (dark/light mode switch).
Multi-file editing.
Collaboration features (live sharing).