Skip to main content

One min read
Patricio Lopez Juri

Hello fellow developers 馃憢

This feature has been around for a while but it requires a special mention here.

JavaScript projects are very sensible to third-party dependencies file sizes because each byte sent to the browsers can reduce the time to interaction.

Our JavaScript library @flyyer/flyyer includes some cryptographic functions to sign URLs, but if you are not using this feature you can use our lightweight module that doesn't include those functions.

npm install --save @flyyer/flyyer-lite

yarn add @flyyer/flyyer-lite

The code change is minimal:

- import { Flyyer } from "@flyyer/flyyer";
+ import { Flyyer } from "@flyyer/flyyer-lite";

See the difference here:

bundlephobia with Flyyer JS

Remember to join our Discord channel to discuss new features:

Happy sharing.

2 min read
Franco Mendez

Hey there 馃憢

Anytime you integrate with your existing website you can keep your original image to use it with the Default handler and as the main image with the Template handler.

To ensure Flyyer gets the right image, you can setup a meta-tag in your HTML's head with: <meta property="flyyer:default" content="/img/product/1.png">.

flyyer ui showing template and default variant handlers

But it turns out getting this image from every page takes an additional request from our CDN so every image takes longer to appear.

Good news: we just updated Flyyer libraries and CDN to make reduce latency by directly passing the default image's URL to Flyyer CDN via a new _def (default) query parameter.

How to upgrade (note _def value is URL-encoded), we well consider a website with a page /products/hoodie as the example here:

- <meta property="og:image" content="" />
- <meta property="flyyer:default" content="/products/hoodie/picture.png" />

+ <meta
+ property="og:image"
+ content=""
+ />

If you are using one of our SDK/libraries It's already available for Node.js, Python, PHP and Ruby.

Here is an example for JavaScript-based projects:

import { Flyyer } from "@flyyer/flyyer";

const product = { /* */ }

const flyyer = new Flyyer({
project: "your-project-identifier",
path: product["path"],
default: product["image_path"],

// Use this image in your <head/> tags
const url = flyyer.href()
// >

To upgrade your flyyer-js library run:

npm install --save @flyyer/flyyer@latest

yarn add @flyyer/flyyer@latest

Remember to join our Discord channel to discuss new features:

Happy sharing.

One min read
Patricio Lopez Juri

Hello creators 馃憢

We just updated @flyyer/variables to add V.Nullable type. This is an addition to the current V.Optional type.

The main difference of V.Nullable and V.Optional is that V.Nullable will always appear in Flyyer UI (dashboard), while optional values are hidden behind a flag for advanced users.

This new nullable variable is combinable with optional allowing to define nullable optional values:

import { Variable as V, Static, Validator } from "@flyyer/variables";

export const schema = V.Object({
price: V.Nullable(V.Number()),
logo: V.Optional(V.Image()),
font: V.Optional(V.Nullable(V.Font())),
const validator = new Validator(schema);

type Variables = Static<typeof schema>;
// Variables.price is `number | null`
// Variables.logo is `string | undefined`
// Variables.font is `string | undefined | null`

To upgrade your Flyyer decks run:

yarn add @flyyer/variables@latest

Remember to join our Discord channel to discuss new features:

One min read
Patricio Lopez Juri

To prevent premature renders because you are waiting for an image or doing some slow CPU task you can toggle a .flyyer-wait CSS class in your template's HTML to tell our rendering service to wait until that class disappears.

Our decks in production use this class while waiting for use-smartcrop:

export default function Template() {
return (
<div className={areYouReady ? "READY!" : "flyyer-wait"}>

See more details at: /docs/advanced/flyyer-wait

One min read
Patricio Lopez Juri

Now you can make your templates public by publishing them to the Flyyer Community.

It is super easy, just set on your flyyer.config.js the private flag to false.

const {config} = require('@flyyer/types');

module.exports = config({
engine: 'react-typescript',
key: process.env.FLYYER_KEY,
deck: 'impact-news',

// Optionals
name: 'Impact News',
description: 'A short description of this deck.',
homepage: '', // your personal webpage.
keywords: ['news', 'vue', 'tailwind'],
private: false, // 馃憟 set to false to make it public
repository: 'https:/',
sizes: ['THUMBNAIL', 'BANNER', 'SQUARE', 'STORY'] // supported formats

2 min read
Patricio Lopez Juri

We are glad to announce we added the long awaited Variables UI support on the dashboard.

This allows users to know what variables are required and optional in each template.

Now an UI Widget will be displayed based on the type of the variable. We support a hint, a default value and even an array of examples! 馃く


You can start using it by upgrading @flyyer/cli to ^1.17.0 and installing @flyyer/variables:

yarn add --dev @flyyer/cli
yarn add @flyyer/variables

One min read
Patricio Lopez Juri

We added a new section about Cache invalidation to our docs page so you can check it out 馃憖

This section explains the __v parameter that usually pops up in Flyyer URLs.

This is a random value (not so random, it is just a timestamp) to trigger cache invalidation on social networks crawlers.

You can always toggle off this feature by setting to a nullish value the meta.v parameter when using our libraries.

One min read
Patricio Lopez Juri

Previously emojis were not rendered, until now 馃殌

We just released @flyyer/cli@1.11.0 which adds an additional post-procesisng step to add Emojis via twemoji, an amazing open-source library from Twitter.

Here is an example:

Emoji example

Are we missing a feature? Have you found a bug? Let us know via Github: