Fabric.js: La librería que convierte píxeles en objetos que puedes tocar
Como construir un editor visual en el navegador sin tocar la API de canvas a pelo.
Hola, soy Pol Marzà. Cada semana escribo una nueva edición de Con Criterio, la newsletter sobre construir productos digitales con IA, con planificación, método y sin atajos. Si te han reenviado este email, puedes suscribirte aquí:
Esta es una nueva sección dentro de la newsletter donde hablo sobre distintas herramientas que encuentro. Te explico qué es, cómo funciona, cómo integrarla y luego te muestro una demo que he construido y que cuelgo en concriterio.tools
Hoy hablamos de Fabric
Cuando Figma no existía y Flash empezaba a morir, los desarrolladores que querían crear editores gráficos en el navegador, se encontraban con un problema: el canvas de HTML era muy limitado para un trabajo interactivo. Podías dibujar formas, sí, pero no podías seleccionarlas. No podías moverlas y el navegador no recordaba nada de lo que habías pintado.
El elemento <canvas> de HTML5 es un área rectangular en una página web diseñada para dibujar gráficos dinámicos utilizando JavaScript. Funciona como un lienzo digital al que se accede mediante código, permitiendo la creación de animaciones, juegos y visualizaciones interactivas.
Fabric.js nació en 2010, creado por Juriy Zaytsev, como solución a esa complejidad. Surgió de la necesidad práctica de tener una forma más accesible de crear aplicaciones gráficas interactivas en el navegador. Su autor estaba construyendo un editor para personalizar ropa online. La interactividad que necesitaba solo existía en Flash. Así que construyó la capa que faltaba.
Qué es exactamente
Fabric.js es como una caja de herramientas que te permite trabajar de manera más intuitiva: en lugar de pensar en píxeles individuales, trabajas con objetos (rectángulos, imágenes, textos) que puedes mover, rotar y modificar fácilmente.
La librería maneja automáticamente las cosas complicadas: detecta cuándo haces clic en una forma, permite arrastrar objetos, rotar figuras con el ratón y gestiona el redibujado de todo el canvas. Tú defines qué hay en el canvas y Fabric se encarga del resto.
Cuándo usarlo vs cuándo no
Usa Fabric cuando el usuario necesita manipular elementos visuales directamente: editores de imágenes, constructores de slides, herramientas de anotación, configuradores de producto. Cualquier aplicación donde los usuarios necesiten interactuar visualmente con elementos en pantalla.
No lo uses para visualizaciones de datos o juegos donde el rendimiento del render importa más que la interactividad de objetos. Para eso hay opciones más ligeras. Fabric es un editor de objetos, no un motor de juego.
Pricing: MIT, libre. Sin tokens, sin tiers. Es una librería npm.
Una librería npm es esencialmente un paquete de código reutilizable para JavaScript. NPM (Node Package Manager) es la herramienta que permite a los desarrolladores encontrar, instalar y gestionar estas librerías (o paquetes) en sus proyectos.
Cómo se integra
bash
npm install fabrictypescript
import { Canvas, FabricImage, FabricText } from 'fabric'
const canvas = new Canvas('canvas-element', { width: 800, height: 600 })
// Cargar imagen
const img = await FabricImage.fromURL('/foto.jpg')
canvas.add(img)
// Añadir texto que el usuario puede mover y escalar
const text = new FabricText('Tu texto aquí', {
left: 100, top: 100,
fontSize: 32, fill: '#ffffff',
})
canvas.add(text)
// Exportar como PNG
const dataURL = canvas.toDataURL({ format: 'png' })Con eso tienes selección, movimiento y escala de objetos funcionando por defecto. .toJSON() serializa el estado completo del canvas para guardarlo. .loadFromJSON() lo restaura. Un detalle: si encuentras ejemplos con fabric.Canvas son de v5 — en v6 el API cambió a imports con nombre.
La demo
He montado un editor de memes en fabric.concriterio.tools para que veas cómo funciona en real. Puedes cargar una imagen, añadir capas de texto con distintas tipografías, moverlas y escalarlas directamente sobre el canvas, y descargar el resultado como PNG.
Todo el código está en el repositorio público de Github, listo para que te lo puedas descargar y modificar a tu gusto.
(Accede a él a través de enlace)
Recapitulemos
Hay una categoría de interfaces que no se resuelven bien con HTML y CSS: las que el usuario edita visualmente, donde los elementos se mueven, se superponen y se transforman. Para eso existe el canvas. Y para trabajar con el canvas sin volverte loco, existe Fabric. Si alguna vez tienes que construir algo donde el usuario “diseña” en lugar de solo “rellenar formularios”, esta librería es el punto de partida.
Si esta entrega de Con Criterio te ha resultado útil, no olvides compartirla :)