🎨 Editor Visual de Etiquetas

Cómo montar una etiqueta en el editor visual

Este editor permite diseñar la etiqueta arrastrando elementos a un área de edición y, al final, genera el código de comandos correspondiente (PP, FT, PT, PB, BARSET, PF). En lugar de calcular coordenadas a mano, colocas todo con el ratón y copias el resultado.

1. Define el ancho y el alto de la etiqueta en milímetros y elige los DPI (203, 300 o 600) en el panel de la izquierda. El valor predeterminado es 101,6 x 76,2 mm, es decir, 4 x 3 pulgadas.
2. Arrastra desde la lista de elementos hasta la etiqueta: Texto, Código de barras, Código QR, Línea o Variable.
3. Haz clic en un elemento para editar sus propiedades en el panel de la derecha (texto, fuente, tamaño) y arrástralo para ajustar la posición.
4. Usa Vista previa para comprobar el diseño y Generar código para ver el código listo, que aparece debajo del editor.
5. Copia el código y llévalo a tu sistema o impresora. Para continuar más tarde, usa Exportar y guarda el archivo del proyecto.

Funciones del editor

• Selección múltiple: selecciona varios elementos (botón propio o Ctrl+clic) para cambiar la fuente y el tamaño de todos a la vez.
• Atajos: Del elimina, Ctrl+A selecciona todo y Ctrl+D duplica el elemento.
• Zoom y cuadrícula: control de zoom del 50% al 150%, botones para centrar la etiqueta, restablecer la vista y activar o desactivar la cuadrícula.
• Importar código existente: el botón "Cargar" acepta un código ya escrito y, opcionalmente, un JSON con los valores de las variables, y reconstruye el diseño en el editor.
• Proyectos en archivo: Exportar e Importar guardan y abren el proyecto completo. También hay "Exportar JSON", "Estadísticas" y "Validar proyecto" en el panel de herramientas.

Los elementos de variable sirven para campos que cambian en cada etiqueta, como el lote, la fecha o el nombre del producto. Defines el nombre del campo en el diseño y rellenas los valores en el JSON de prueba.

Ejemplos prácticos

• Etiqueta de producto: un texto grande con el nombre, una línea separadora y un código de barras con el código interno justo debajo.
• Identificación de lote: textos fijos ("Lote:", "Caducidad:") junto a variables, para que el mismo diseño sirva para cualquier lote.
• Etiqueta con código QR: un QR con el enlace o el código del artículo, más el texto legible al lado para comprobarlo a simple vista.
• Ajuste de un diseño antiguo: importa el código de una etiqueta que ya usas, mueve los elementos que quedaron desalineados y genera el código de nuevo.

Consejos

• Comprueba los DPI de tu impresora antes de empezar. Unos DPI distintos cambian la conversión entre milímetros y puntos.
• Al generar el código, el código de barras usa el formato Code 39 y el código QR usa parámetros fijos. Prueba siempre una etiqueta real en la impresora antes de producir en cantidad.
• Si necesitas el mismo diseño en ZPL (impresoras Zebra), consulta el conversor a ZPL.

Privacidad y funcionamiento

El editor se ejecuta en tu navegador: el diseño, el código generado y los JSON de variables no se envían a ningún servidor. El proyecto en edición se guarda automáticamente en el almacenamiento local del navegador (localStorage) para que no pierdas el trabajo al recargar la página; borrar los datos del sitio elimina ese borrador. Los detalles generales sobre el sitio están en la Política de Privacidad.

Preguntas frecuentes

Otras herramientas gratuitas

• 📋 Editor ZPLEditor especializado en código ZPL (Zebra Programming Language)
• 🔧 Env ConverterConvierte fácilmente archivos .env entre distintos formatos
• 🌐 Is Up - Verificador de sitios webComprueba si un sitio responde desde tu navegador
• 📡 Is Online - Verificador de conexiónComprueba si el navegador puede abrir conexión con Google y Cloudflare y muestra el tiempo
• 🌍 Public IP - Descubrir mi IPDescubre tu dirección IP pública y cópiala con un clic
• 📸 Pageres - Capturador de capturas de pantallaGenera la imagen del inicio de una página con anchos de 320 a 1920 px y descarga el archiv