⚠️ Compatibilidad Actual (v1.x): En esta primera versión, Canvy está construido de forma exclusiva y altamente optimizada para:

• Librería/Framework: React (Archivos .jsx / .tsx)
• Build Tool: Vite
• Estilos: Tailwind CSS

Canvy transforma tu entorno de desarrollo local en una herramienta de diseño profesional. Edita márgenes, colores, tipografías y sombras visualmente. Gracias a la magia del AST (Babel), todos los cambios que hagas visualmente se escriben de vuelta en tus archivos .jsx en tiempo real.

Sin configuraciones complejas. Sin ensuciar tu código.

✨ ¿Por qué Canvy?

• ⚡️ Cero Fricción: No tienes que aprender un nuevo IDE. Trabaja sobre tu propio proyecto React/Vite.
• 🌳 Babel AST: A diferencia de otras herramientas frágiles, Canvy entiende tu código mediante un árbol sintáctico, asegurando que tus componentes nunca se rompan al guardar.
• 🎯 Visual Controls: Ajusta el padding, margin y tamaño directamente arrastrando los elementos en pantalla.
• 🎨 Soporte total para Tailwind: Sombras precisas, opacidad, paletas completas y controles de flexbox/grid con interfaz dedicada.

🚀 Quick Start (En 3 pasos)

Para usar Canvy necesitas un proyecto React basado en Vite.

1. Instalar dependencias

npm install -D canvy-editor

2. Configurar Vite

Añade nuestro plugin a tu archivo vite.config.js. Esto inyecta silenciosamente las referencias de los archivos para que el editor sepa qué línea de código estás modificando.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { canvyBabelPlugin } from 'canvy-editor/plugin'

export default defineConfig({
  plugins: [
    react({
      babel: { plugins: [canvyBabelPlugin] }
    })
  ]
})

3. Envolver tu Aplicación

En tu archivo principal (usualmente main.jsx), envuelve tu App con nuestro <VisualEditor>.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { VisualEditor } from 'canvy-editor' // <-- Importar

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <VisualEditor> {/* <-- Envolver */}
      <App />
    </VisualEditor>
  </React.StrictMode>,
)

🕹️ Iniciar el Editor

Una vez configurado, asegúrate de que tu app de React esté corriendo (usualmente en el puerto 5173). Luego abre otra terminal y lanza Canvy:

npx canvy

¡Eso es todo! Tu navegador se abrirá en http://localhost:3000 y podrás comenzar a diseñar haciendo clic en cualquier elemento.

⌨️ Atajos de Teclado

• ESC: Deseleccionar elemento actual.
• Doble Clic: Editar texto / Tipografía.
• Ctrl + Z: Deshacer el último cambio de Tailwind.
• Ctrl + Y: Rehacer.