🎨 Editor Visual de Etiquetas

Como montar uma etiqueta no editor visual

Este editor permite desenhar a etiqueta arrastando elementos para uma área de edição e, no final, gera o código de comandos correspondente (PP, FT, PT, PB, BARSET, PF). Em vez de calcular coordenadas na mão, você posiciona tudo com o mouse e copia o resultado.

1. Defina a largura e a altura da etiqueta em milímetros e escolha o DPI (203, 300 ou 600) no painel da esquerda. O padrão é 101,6 x 76,2 mm, ou seja, 4 x 3 polegadas.
2. Arraste da lista de elementos para a etiqueta: Texto, Código de Barras, QR Code, Linha ou Variável.
3. Clique em um elemento para editar suas propriedades no painel da direita (texto, fonte, tamanho) e arraste-o para ajustar a posição.
4. Use Visualizar para conferir o layout e Gerar Código para ver o código pronto, que aparece abaixo do editor.
5. Copie o código e leve-o para o seu sistema ou impressora. Para continuar depois, use Exportar e guarde o arquivo do projeto.

Recursos do editor

• Seleção múltipla: selecione vários elementos (botão próprio ou Ctrl+clique) para alterar fonte e tamanho de todos de uma vez.
• Atalhos: Del apaga, Ctrl+A seleciona tudo e Ctrl+D duplica o elemento.
• Zoom e grade: controle de zoom de 50% a 150%, botões para centralizar a etiqueta, resetar a vista e ligar ou desligar a grade.
• Importar código existente: o botão "Carregar" aceita um código já escrito e, opcionalmente, um JSON com os valores das variáveis, reconstruindo o layout no editor.
• Projetos em arquivo: Exportar e Importar salvam e abrem o projeto completo. Há ainda "Exportar JSON", "Estatísticas" e "Validar Projeto" no painel de ferramentas.

Os elementos de variável servem para campos que mudam a cada etiqueta, como lote, data ou nome do produto. Você define o nome do campo no layout e preenche os valores no JSON de teste.

Exemplos práticos

• Etiqueta de produto: um texto grande com o nome, uma linha separadora e um código de barras com o código interno logo abaixo.
• Identificação de lote: textos fixos ("Lote:", "Validade:") ao lado de variáveis, para que o mesmo layout sirva para qualquer lote.
• Etiqueta com QR Code: um QR com o link ou o código do item, mais o texto legível ao lado para conferência visual.
• Ajuste de layout antigo: importe o código de uma etiqueta já em uso, mova os elementos que ficaram desalinhados e gere o código novamente.

Dicas

• Confira o DPI da sua impressora antes de começar. Um DPI diferente muda a conversão entre milímetros e pontos.
• Na geração do código, o código de barras usa o formato Code 39 e o QR Code usa parâmetros fixos. Sempre teste uma etiqueta real na impressora antes de produzir em quantidade.
• Se precisar do mesmo layout em ZPL (impressoras Zebra), veja o conversor para ZPL.

Privacidade e funcionamento

O editor roda no seu navegador: o desenho, o código gerado e os JSONs de variáveis não são enviados a nenhum servidor. O projeto em edição é guardado automaticamente no armazenamento local do navegador (localStorage) para que você não perca o trabalho ao recarregar a página; limpar os dados do site apaga esse rascunho. Detalhes gerais sobre o site estão na Política de Privacidade.

Perguntas frequentes

Outras ferramentas gratuitas

• 📋 Editor ZPLEditor especializado para código ZPL (Zebra Programming Language)
• 🔧 Env ConverterConverta facilmente arquivos .env entre diferentes formatos
• 🌐 Is Up - Verificador de SitesVeja se um site responde a partir do seu navegador
• 📡 Is Online - Verificador de ConexãoVerifica se o navegador consegue abrir conexão com Google e Cloudflare e mostra o tempo de
• 🌍 Public IP - Descobrir Meu IPDescubra seu endereço IP público e copie com um clique
• 📸 Pageres - Capturador de ScreenshotsGere a imagem do topo de uma página em larguras de 320 a 1920 px e baixe o arquivo