Nos estamos preparando para el lanzamiento 😄

Flyyer Render

JavaScript-a-Imagen

Crea plantillas con React.js y Vue.js. Sube tus increíbles diseños a nuestra nube y úsalas para renderizar miles de imágenes.

Comienza
import { FlyyerRender } from "@flyyer/flyyer";
const flyyer = new FlyyerRender({
tenant: "flyyer",
deck: "charming-man",
template: "main",
variables: { title: "Atrae más personas a tu sitio" },
});
<meta property="og:image" content={flyyer.href()} />
<meta name="twitter:image" content={flyyer.href()} />
import React from "react"
import { Variable as V, Static } from '@flyyer/variables';
import { TemplateProps } from "@flyyer/types";
import clsx from "clsx";
import "../styles/tailwind.css";
import logo from "../static/logo.svg";
// Export 'schema' to declare variables
export const schema = V.Object({
title: V.String({ default: "This is a variable" }),
img: V.Image({ default: "/background.jpeg" }),
});
type Variables = Static<typeof schema>;
// https://cdn.flyyer.io/r/v2/flyyer/charming-man/main.jpeg?title=Atrae+m%C3%A1s+personas+a+tu+sitio
export default function MainTemplate({ variables, width, height, agent }: TemplateProps<Variables>) {
// Get parsed variables from querystring
const { title, img } = variables;
// Render component to image based on context
if (agent.name === FlyyerAgentName.WHATSAPP) {
return (
<Layer className="bg-gray-800 p-20">
<img src={logo} className="w-full h-full" />
</Layer>
);
}
return (
<div>
<Layer>
<img className="w-full h-full object-cover object-bottom" src={img} />
</Layer>
<Layer className="bg-gradient-to-r from-gray-900 opacity-70 mr-96" />
<Layer className="flex flex-col justify-center items-start px-12 py-12 w-1/2">
<img src={logo} className="w-24 h-24" />
<h1 className="text-8xl text-white tracking-tight font-semibold">
{title}
</h1>
</Layer>
</div>
);
}
function Layer({ className, ...props }: React.ComponentProps<"div">) {
return <div {...props} className={clsx("absolute inset-0", className)} />;
}

Crea templates públicos y privados

Use tus tecnologías web favoritas como React, Vue o Tailwind para crear plantillas para tus propios proyectos o para compartirlas con la comunidad.

$ npm init flyyer-app@latest hello
? Select template setup:
react
react-styled-components
react-typescript-styled-components
react-typescript-tailwind
vue
vue-typescript
$ NODE_ENV=production npm run-script build
🌠 flyyer project successfully built!
$ npm run-script deploy
🖼 Created template with URL:
- https://cdn.flyyer.io/render/v2/flyyer/hello/main.png?title=Hello+World

JavaScript

Usa nuestro formateador universal de URL @flyyer/flyyer-js para integrarnos a cualquier framework.

Express.js

Podemos ser integrados a cualquier framework Connect.js o Fastify. Cada view engine es compatible.

Gatsby

Gatsby.js

Amamos JAMStack, y por supuesto soportamos Gatsby. Echa un vistazo a nuestra guía.

next-black

Next.js

Flyyer fue tremendamente inspirado por este framework, nuestro sitio está desarrollado con Next.js

Python

Creamos un paquete pip flyyer para que no tengas que lidiar con la codificación URL. Independiente del framework.

Django

Hemos utilizado este framework por muchos años. Armamos especialmente una guía y un ejemplo para amantes de Django.

Ruby

Nuestra gema oficial flyyer ya está disponible y lista para ser instalada. Independiente del framework.

Ruby on Rails

Potencia tu app de Rails con Flyyer. Estamos desarrollando una gema para hacer esto más automático.

Official PHP Logo

PHP

Muchos nos pidieron un plugin para Wordpress, por eso creamos esta librería independiente de PHP con Composer: flyyer/flyyer

Wordpress

Para tu blog, e-commerce, portafolio, o cualquier tipo de sitio web que desees. Revisa flyyer/flyyer-wp

Developer Experience y sin configuraciones

We strongly believe in providing the best developer tools to help you maximize productivity.

Screenshot of Flyyer Studio UI
Automatic deploy with Github Actions

Deploy automático con GitHub Actions

Automatiza tu flujo de trabajo con GitHub Actions en menos de 5 minutos

Configura ahora

Un servicio distribuido globalmente mediante edge technology

Te garantizamos la mejor experiencia de usuario ofreciendo respuestas rápidas gracias a nuestro sistema global de caché.

PlanetPlanet avatar 01Planet avatar 02

Plantillas creadas

848+

Imágenes generadas

631.112+

Datos descargados

50.5GB+

Disponibilidad

99.95%

Precios y planes

Todos los planes cuentan con créditos renovables, acceso a nuestro dashboard y templates gratis.

Gratuito

Prueba Flyyer sin compromiso para sitios web con pocas páginas.

Gratis

No credit card required

Crear cuenta
  • 20 páginas web

  • 300 créditos/mes

  • 3 website(s)

  • 1 usuarios(s)

  • Firma digital

Hobby

Para pequeños sitios web con pocas páginas

$12/mes

Obtén 2 meses gratis pagando anualmente

Seleccionar plan
  • 200 páginas web

  • 3000 créditos/mes

  • 3 website(s)

  • 3 usuarios(s)

  • URLs con firma digital

  • Analytics

Pro

Gran volumen para compañías con mucho contenido para compartir.

$36/mes

Obtén 2 meses gratis pagando anualmente

Seleccionar plan
  • 1000 páginas web

  • 10.000 créditos/mes

  • 3 website(s)

  • 5 usuarios(s)

  • Todo del plan Hobby

  • Imágenes Full HD

Escala

Masiva cantidad de imágenes para sitios web populares y virales.

$72/mes

Obtén 2 meses gratis pagando anualmente

Seleccionar plan
  • 3000 páginas web

  • 30.000 créditos/mes

  • 3 website(s)

  • Unlimited usuarios(s)

  • Todo del plan Pro

  • Soporte prioritario

Un crédito es una métrica para cuantificar las veces que se generan imágenes y se escanea el sitio web para obtener información. En condiciones normales 8 créditos son consumidos por 1 página al mes.

Requests subsiguientes a una misma imagen o recurso no debería consumir créditos.

Planes empresariales con soporte premium

Soluciones personalizadas, servers dedicados, instalación local, servicios de diseño y desarrollo.

Servicio prioritario

Si estás lidiando con alto tráfico o simplemente no quieres preocuparte de cuotas, este plan puede ser para ti. También incluímos servidores dedicados para mayor seguridad y menores tiempos de entrega.

Se puede incluir

  • Imágenes ilimitadas

  • Servers dedicados

  • Consultoría de diseño e ingeniería

  • Mayor velocidad, seguridad y privacidad

  • Configuración local

  • Canal de Slack compartido con los fundadores del proyecto.

Potencia tu marketing

Hablemos

El 90% de las compañías descuidan sus vistas previas

Empresas invierten miles de dólares en campañas publicitarias pero muchas personas las ignoran.
Cuando los usuarios comparten tus links hay una mayor probabilidad de que obtengas visitas. ¡No pierdas esa oportunidad!

gallery item showing an example of Flyyer
gallery item showing an example of Flyyer
gallery item showing an example of Flyyer
gallery item showing an example of Flyyer
gallery item showing an example of Flyyer
gallery item showing an example of Flyyer