An `og:image` (social card) generator that is fast, browser-less (no Puppeteer), and capable of running on the edge. This package is designed to be used with Cloudflare Workers (but may be used elsewhere), with the simple API inspired by `@vercel/og`.

Overview

Cloudflare Workers OG Image Generator

Using Vercel's Satori engine, and many credits to @vercel/og for the inspiration.

An og:image (social card) generator that is fast, browser-less (no Puppeteer), and capable of running on the edge.

This package is designed to be used with Cloudflare Workers (but may be used elsewhere), with the simple API inspired by @vercel/og.

Difference from @vercel/og

@vercel/og is designed to run on Vercel's edge runtime, and workers-og on Cloudflare Workers.

While satori (used in both @vercel/og and workers-og) accepts React element as the input, workers-og adds a feature which allows you to write a simple HTML, which will here be parsed into React element-like object.

Example Usage on a Worker:

import { ImageResponse } from "workers-og";

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    const params = new URLSearchParams(new URL(request.url).search);
    const title = params.get("title") || "Lorem ipsum";

    const html = `
    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; width: 100vw; font-family: sans-serif; background: #160f29">
      <div style="display: flex; width: 100vw; padding: 40px; color: white;">
        <h1 style="font-size: 60px; font-weight: 600; margin: 0; font-family: 'Bitter'; font-weight: 500">${title}</h1>
      </div>
    </div>
   `;

    return new ImageResponse(html, {
      width: 1200,
      height: 630,
    });
  },
};
You might also like...

Automagically bypass hcaptcha challenges with http api, with puppeteer, selenium, playwright browser automation scripts to bypass hCaptcha programmatically

Automagically bypass hcaptcha challenges with http api, with puppeteer, selenium, playwright browser automation scripts to bypass hCaptcha programmatically. For help you can message on discord server with the bellow link. You can also create an issue.

Jan 2, 2023

基于 gh-proxy + Jsdelivr+ cnpmjs + cloudflare workers 的 GitHub Serverless API 工具。

better-github-api Better, Eazy, Access Anywhere 介绍 基于 gh-proxy + Jsdelivr + cnpmjs + cloudflare workers 的 GitHub Serverless API 工具。 cdn.js:仅含 gh-proxy

Nov 23, 2022

Remix run stack built for the edge (cloudflare pages and d1)

Remix run stack built for the edge (cloudflare pages and d1)

Remix Race Stack Learn more about Remix Stacks. npx create-remix@latest --template jose-donato/race-stack What's in the stack Cloudflare Pages for ho

Aug 10, 2023

The high efficent browser driver on top of puppeteer, ready for production scenarios.

The high efficent browser driver on top of puppeteer, ready for production scenarios.

browserless is an efficient driver for controlling headless browsers built on top of puppeteer developed for scenarios where performance matters. High

Jan 6, 2023

A simple daily news, used the api of Zhihu Daily, deployed on Vercel.

Daily News Introduction | 介绍 A simple daily news website, used the api of Zhihu Daily, deployed on Vercel. Inspired by @zkeq/news. 一个简单的,使用知乎日报api的,部署

Jul 26, 2022

WebVM is a server-less virtual Linux environment running fully client-side in HTML5/WebAssembly.

WebVM This repository hosts the source code of the https://webvm.io live demo page. WebVM is a server-less virtual Linux environment running fully cli

Jan 8, 2023

A Tauri update server, hosted as a Cloudflare edge function

Tauri Update Server: Cloudflare One-Click Deploy Click the button above, let Cloudflare walk you through: it's easy! Go to your forked repository, edi

Dec 14, 2022

Notes may contain grammatical errors and some wont make sense and will only make sense to me

Notes may contain grammatical errors and some wont make sense and will only make sense to me

This is my own notes containing all the information and knowledge I've gained during my studying sessions. The notes are all topics that relates to technology such as computers, software or programming.

Dec 15, 2022

A Cloudflare Workers service that fetches and renders Notion pages as HTML, Markdown, or JSON.

notion-fetch A Cloudflare Workers service that fetches and renders Notion pages as HTML, Markdown, or JSON. Powered by Durable Objects and R2. Usage P

Jan 6, 2023
Owner
Kevin Ang
Kevin Ang
Abusing Cloudflare Workers to establish persistence and exfiltrate sensitive data at the edge.

Abusing Cloudflare Workers This repository contains companion code for the blog post MITM at the Edge: Abusing Cloudflare Workers. malicious-worker/ c

Christophe Tafani-Dereeper 10 Sep 16, 2022
Functional-style Cloudflare Durable Objects with direct API calls from Cloudflare Workers and TypeScript support.

durable-apis Simplifies usage of Cloudflare Durable Objects, allowing a functional programming style or class style, lightweight object definitions, a

Dabble 12 Jan 2, 2023
A flexible gateway for running ML inference jobs through cloud providers or your own GPU. Powered by Replicate and Cloudflare Workers.

Cogflare (Working title) Cogflare is a Cloudflare Workers application that aims to simplify running distributed ML inference jobs through a central AP

NightmareBot 14 Dec 12, 2022
A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more What can co

null 6.7k Jan 3, 2023
Google-Drive-Directory-Index | Combining the power of Cloudflare Workers and Google Drive API will allow you to index your Google Drive files on the browser.

?? Google-Drive-Directory-Index Combining the power of Cloudflare Workers and Google Drive will allow you to index your Google Drive files on the brow

Aicirou 127 Jan 2, 2023
Lightweight universal Cloudflare API client library for Node.js, Browser, and CF Workers

Cloudflare API Client Lightweight universal HTTP client for Cloudflare API based on Fetch API that works in Node.js, browser, and CF Workers environme

Kriasoft 15 Nov 13, 2022
Flight is a universal package manager for your needs, no matter what language you may want to write your code in.

Flight Swift, reliable, multi-language package manager. ⚡ Installation We don't have an official release of Flight yet, however, if you would like to

null 26 Dec 25, 2022
A developer directory built on Next.js and MongoDB Atlas, deployed on Vercel with the Vercel + MongoDB integration.

MongoDB Starter – Developer Directory A developer directory built on Next.js and MongoDB Atlas, deployed on Vercel with the Vercel + MongoDB integrati

Vercel 246 Dec 20, 2022