Un editor de código web en tiempo real construido con React, CodeMirror y Vite. Permite escribir, formatear, previsualizar y descargar código HTML, CSS y JavaScript directamente desde el navegador. Soporta múltiples temas visuales y guarda el contenido en localStorage automáticamente.
- Editor en tiempo real con vista previa integrada (
iframe) - Soporte para HTML, CSS y JavaScript
- Temas personalizables con CodeMirror (Dracula, Material, GitHub, etc.)
- Guardado automático en
localStorage - Formateo automático del código con Prettier
- Descarga del código generado como archivo
.html - Diseño responsivo con Bootstrap 5
- Separación de componentes para fácil mantenimiento
# Clonar el repositorio
git clone https://github.com/tu-usuario/react-editor-code.git
cd react-editor-code
# Instalar dependencias
npm install
# Ejecutar en modo desarrollo
npm run dev"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
}├── public/
├── src/
│ ├── components/
│ │ ├── Editor.jsx
│ │ ├── EditorCode.jsx
│ │ ├── FormatPrettier.jsx
│ │ ├── ThemeSelector.jsx
│ │ ├── Menu.jsx
│ │ ├── DownloadCode.jsx
│ │ ├── RemoveStorage.jsx
│ │ └── Iframe.jsx
│ ├── hooks/
│ │ └── useLocalStorage.js
│ ├── lib/
│ │ ├── themes.js
│ │ ├── languages.js
│ │ └── extensions.js
│ ├── ui/
│ │ ├── container.jsx
│ │ ├── navbar.jsx
│ │ ├── footer.jsx
│ │ └── heading.jsx
│ ├── App.jsx
│ └── main.jsx
├── package.json
└── README.md
¡Las contribuciones son bienvenidas! Podés abrir un issue o enviar un pull request.
Este proyecto está bajo la licencia MIT. Ver el archivo LICENSE para más detalles.
Desarrollado con ❤️ por \Kenkyo