Introduction

The what and the why of metaimg

Get started with metaimg

What's this documentation for

You'll learn to create your own templates, which you can use for your link previews, download social media formats, or offer them in the Marketplace.

Alternatively, you can integrate Flyyer to manage link previews and social media images enriched from your website (no effort required). You can choose templates that are already available. Check it out before coming here.

Create deck

Create a new Flyyer app using create-metaimg, which sets up everything automatically for you. To start a deck follow the steps below.

class MarkdownEditor extends React.Component  {
  constructor(props) {
    super(props);
    this.md = new Remarkable();
    this.handleChange = this.handleChange.bind(this);
    this.state = { value: 'Hello, **world**!' };
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }
class MarkdownEditor extends React.Component  {
  constructor(props) {
    super(props);

Your first template

CLI

For more details about the available commands refer to Command-Line Interface.

Create (if you don't have) a file with the desired name of your template in a directory called templates. Every deck created with create-flyyer-app starts with a file named templates/main.js, template/main.tsx, or template/main.vue.

Let's take https://github.com/useflyyer/create-flyyer-app/tree/master/templates/react as example

import React from "react";
import background from "../static/background.jpg";
import logo from "../static/logo.svg";
import "./styles.css"

// Make sure to 'export default' a React component
export default function MainTemplate({ variables }) {
  const { title = "Hello world!", img = background, description, } = variables;

  return (
    <div>
      <div className="layer background" style={{ backgroundImage: `url("${img}")` }} />
      <div className="layer fade" />
      <div className="layer content">
        <img className="logo" src={logo} />
        <h1 className="title">
          {title}
        </h1>
        {description && (
          <span className="description">
            {description}
          </span>
        )}
      </div>
    </div>
  );
}

Important globals

Create a new Flyyer app using create-metaimg, which sets up everything automatically for you. To start a deck follow the steps below.

class MarkdownEditor extends React.Component  {
  constructor(props) {
    super(props);
    this.md = new Remarkable();
    this.handleChange = this.handleChange.bind(this);
    this.state = { value: 'Hello, **world**!' };

Conclusion

Social images are a great way to introduce users to a link on your website, before they even click on it. Remix makes dynamically generating images and adding it to your website much simpler compared to other React frameworks. By generating images using the canvas library, we can add lots of dynamic behavior to our images, in combination with the power that Remix gives us to control how it gets accessed and cached.

Integrations