flayyer.io

Og:Image as a Service

Create templates with React.js and Vue.js. Upload your amazingly crafted flayyers to our cloud and use them to render thousand of images.

Get started
import { FlayyerIO } from "@flayyer/flayyer";
const flayyer = new FlayyerIO({
tenant: "flayyer",
deck: "demo",
template: "main",
variables: { title: "Create more engagement" },
});
<meta property="og:image" content={flayyer.href()} />
<meta name="twitter:image" content={flayyer.href()} />
This image was rendered using Flayyer.ioCreate, deploy and update the <meta property="og:image" /> of your website. Checkout the integration guides.flayyer.com
https://flayyer.com/io/demo
import React from "react"
import { TemplateProps } from "@flayyer/flayyer-types";
import clsx from "clsx";
import "../styles/tailwind.css";
import logo from "../static/logo.svg";
// https://flayyer.io/v2/flayyer/demo/main.jpeg?title=Create+more+engagement
type Variables = { title: string, img?: string };
export default function MainTemplate({ agent, variables }: TemplateProps<Variables>) {
const { title, img = "https://images.unsplash.com/photo-1601933552240-d6b9e8e01cdc?w=1200" } = variables;
if (agent.name === FlayyerAgentName.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)} />;
}

JavaScript

Use our universal URL formatter @flayyer/flayyer-js to integrate with any framework.

Express.js

Any Connect.js or Fastify framework can be integrated. Every view engine is supported too.

Gatsby

Gatsby.js

We love JAMStack and of course Gatsby is supported. Checkout our guide.

next-black

Next.js

Flayyer was heavily inspired by this framework, even this site is built with Next.js

Python

We created a pip package flayyer so you don't have to deal with URL encoding. Framework agnostic.

Django

I have been using this framework for many years. I personally crafted a guide and example for Django lovers.

Ruby

Our official gem flayyer is available and ready to be installed. Framework agnostic.

Ruby on Rails

Superpower your Rails app with Flayyer. We are building a gem to make this more automatic.

Official PHP Logo

PHP

Many people asked for a Wordpress plugin so we created this agnostic PHP library with Composer: flayyer/flayyer

Wordpress

For your blog, e-commerce, portafolio, or any type of website you have! Checkout flayyer/flayyer-wp

Developer Experience with zero configuration

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

Automatic deploys with GitHub Actions

Automate your workflow with GitHub Actions in less than 5 minutes

Setup now

Globally distributed service with edge technology

Ensures the best experience for users by delivering fast responses when a link is shared thanks to our global caching system.

PlanetPlanet avatar 01Planet avatar 02

Templates created

642+

Images delivered

473,367+

Data served

36.2GB+

Availability

99.95%

Pricing and plans

Get started for free. Every plan comes with renewable credits, access to our dashboard and unlimited projects.

Free Tier

No strings attached, try Flayyer for free. No credit card required.

Free

Create account
  • 2.100 impressions/mo

  • Unlimited projects

  • 1 user

  • Signed URLs

Hobby

For small project with few amount of pages to share.

$8/mo

Get it for $6.58 with annual billing

Select plan
  • 35.000 impressions/mo

  • Unlimited projects

  • 1 user

  • Signed URLs

  • Analytics

Pro

High volume for companies with many projects and websites to share.

$55/mo

Get it for $41.58 with annual billing

Select plan
  • 420.000 impressions/mo

  • Unlimited projects

  • 5 users

  • Everything in Hobby

  • Full HD images

Scale

Massive amount of images for popular and viral websites.

$233/mo

Get it for $166.58 with annual billing

Select plan
  • 2.240.000 impressions/mo

  • Unlimited projects

  • Unlimited users

  • Everything in Hobby

  • Full HD images

  • Priority support

An impression is a metric used to quantify the number of views or engagement of images. Some platforms may store images in their own cache systems from time to time, you won't be charged in those cases.

Prices in US dollars. May be automatically converted to your local currency on checkout.

Enterprise plans with premium support

Custom solutions, dedicated servers, on-premise installation, and design/development services.

Priority service

If you are dealing with high traffic or you just don't want to worry about quotas, this plan might be for you. We also include dedicated service for additional security and faster delivery times.

What can be included

  • Unlimited images

  • Dedicated servers

  • Design and engineering consulting

  • Improved speed, security and privacy

  • On-premise setup

  • Shared Slack channel with the founding team

Superpower your marketing

Contact us