Non-Permeable Membrane

    @vercel/og
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.21 • Public • Published

    Open Graph Image Generation

    Generate Open Graph images with Vercel’s Edge Function.

    Quick Start

    Install @vercel/og, then use it inside an API route with Edge Runtime configured in your Next.js project:

    // /pages/api/og.jsx
    import { ImageResponse } from '@vercel/og'
    
    export const config = {
      runtime: 'experimental-edge',
    }
    
    export default function () {
      return new ImageResponse(
        (
          <div
            style={{
              width: '100%',
              height: '100%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 128,
              background: 'lavender',
            }}
          >
            Hello!
          </div>
        )
      )
    }

    Then run next dev and access localhost:3000/api/og, the React element will be rendered and responded as a PNG from that endpoint:

    Rendered OG image

    Read more about the API, supported features and check out the examples in the following sections.

    API Reference

    @vercel/og only supports the Edge Runtime. The Node.js runtime will not work.

    The package exposes an ImageResponse constructor, with the following options available:

    import { ImageResponse } from '@vercel/og'
    
    // ...
    new ImageResponse(
      element: ReactElement,
      options: {
        width?: number = 1200
        height?: number = 630
        emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' | 'fluent' | 'fluentFlat' = 'twemoji',
        fonts?: {
          name: string,
          data: ArrayBuffer,
          weight: number,
          style: 'normal' | 'italic'
        }[]
        debug?: boolean = false
    
        // Options that will be passed to the HTTP response
        status?: number = 200
        statusText?: string
        headers?: Record<string, string>
      },
    )

    When running in production, these headers will be included by @vercel/og:

    'content-type': 'image/png',
    'cache-control': 'public, immutable, no-transform, max-age=31536000',

    During development, the cache-control: no-cache, no-store header is used instead.

    Supported HTML and CSS Features

    Please refer to Satori’s documentation for a list of supported HTML and CSS features.

    By default, @vercel/og only has the Noto Sans font included. If you need to use other fonts, you can pass them in the fonts option. Check the Custom Font example below for more details.

    Examples

    Development / Contributing

    Playground

    • pnpm i inside the playground/ directory
    • pnpm dev to start the Next.js app

    Package

    • pnpm i inside the root directory
    • pnpm build to build the library
    • pnpm types to generate the types

    Acknowledgements

    This project will not be possible without the following projects:


    Install

    npm i @vercel/og

    DownloadsWeekly Downloads

    28,780

    Version

    0.0.21

    License

    MPL-2.0

    Unpacked Size

    1.2 MB

    Total Files

    11

    Last publish

    Collaborators

    • nandafyi
    • jooliashi
    • cmeyer_vercel
    • jankaifer
    • uchenkadicode
    • mknichel-vercel
    • souporserious
    • ofhouse
    • alejandro-vercel
    • jescalan
    • chris-tsongas-vercel
    • balazsorban
    • andymckay
    • tmickleydoyle
    • correttojs
    • cond0r
    • kevinrupert
    • janecakemaster
    • raunofreiberg
    • joebell93
    • smaeda-ks
    • manovotny
    • tbremer
    • vercel-release-bot
    • vvo
    • tcc-sejohnson
    • jueungrace
    • tobiaslins
    • timolins
    • cfofiu
    • tjkohli
    • emilkowalski
    • torirussell
    • tsiege
    • mehulkar
    • gnoff
    • shaquilhansford
    • mrkev
    • drcmda
    • kit-foster
    • hellojennifertran
    • aidenschrock
    • wepanicinapew
    • maxleiter
    • sr_intern
    • chris-olszewski
    • wbinnssmith
    • calebboyd
    • gargis5
    • dummdidumm
    • adriancooney_vercel
    • brookemosby
    • amyegan
    • onebutter
    • henryheffernan
    • alexkirsz
    • bvred4244
    • jridgewell
    • cb1kenobi
    • jasonwiker
    • sebastianroming
    • anthonyshew
    • okikio
    • broooooklyn
    • ypessoa
    • zlw241
    • nalalami
    • mbrakken
    • wyattjoh
    • pearlbea
    • gt-codes
    • sowsut
    • hannesborno
    • ethomson
    • lubakravche
    • aaronbrown-vercel
    • reconbot
    • javierbyte
    • kayernyc
    • janory
    • codyogden
    • dcartertwo
    • feedthejim
    • tilly3g
    • wits
    • megbird
    • feugy
    • dizzyup
    • edgarcerecerezv
    • livcarman
    • sambecker
    • craigandrews
    • mjakobis
    • chloe.tedder
    • kale-stew
    • pbto
    • daniel.campbell
    • arian-vercel
    • nuta
    • almonk
    • samselikoff
    • baruchadi
    • ejc
    • aaorris
    • doque
    • ryanto
    • nathanhammond
    • snokohn
    • johnphamous
    • tknickman
    • agadzik
    • thomcrowe
    • emeraldsanto
    • ecklf
    • timeyoutakeit
    • cramforce
    • balazs4
    • casey.gowrie
    • samuel.foster
    • swarnavasengupta
    • lydiahallie
    • ethan_arrowood
    • mitchellwright
    • kwonoj
    • kakadiadarpan
    • endangeredmassa
    • nick.tracey
    • crowterli
    • gsoltis
    • schlez
    • epallerols
    • domysee
    • nwienert
    • arbw
    • gudmundur
    • marcgreenstock
    • stephdietz
    • falcoagustin
    • nabsul
    • bmealey
    • brethudson
    • maedahbatool
    • jasongullickson
    • f3d0r
    • gaspar09
    • jtaylor0196
    • pieparker
    • dferber90
    • healeycodes
    • broph123
    • codybrouwers
    • ebb-tide
    • gdborton
    • msimulcik
    • jeffreyarneson
    • jaredpalmer
    • kikobeats
    • domeccleston
    • nutlope
    • hungrybearstudio
    • mattcleg
    • gkaragkiaouris
    • geovanisouza92
    • dglsparsons
    • pralhad-vercel
    • williamli
    • southpolesteve
    • goncy
    • chibicode
    • andybitz
    • iamevilrabbit
    • tootallnate
    • styfle
    • mglagola
    • javivelasco
    • timer
    • lucleray
    • leerobinson
    • matheuss
    • nkzawa
    • anatrajkovska
    • timneutkens
    • elsigh
    • cl3arglass
    • samsisle
    • chriswdmr
    • rizbizkits
    • ernestd
    • ismaelrumzan
    • mrmckeb
    • kuvos
    • creationix
    • rauchg
    • huozhi
    • cmvnk
    • lfades
    • paulogdm
    • ktcarter
    • okbel
    • padmaia
    • msweeneydev
    • delba
    • catsaremlg
    • steventey
    • sokra
    • gsandhu
    • dbredvick
    • kdy1
    • ijjk
    • quietshu
    • matt.straka
    • zeit-bot