Service that dynamically generates Open Graph images for Railway starters that looks something like
Use the generated image URL in the <head> of your HTML document as the og:image meta property
<meta
property="og:image"
content="https://og.railway.app/api/image?fileType=png&layoutName=Simple&Text=Hello+World"
/>Whenever this image is requested (e.g. in link previews) the image will be generated on demand.
Images are generated through the /api/image route. When you hit this route the following happens
- Query params are parsed
- Layout is looked up in list of layouts using the
layoutNamequery param layout.Componentis rendered with all query params asconfigprop- SVG is created from the component using Satori
- Optionally, a PNG is created from the SVG with resvg-js
This service can generate images using multiple layouts. A layout is defined as a
- Collection of properties that are user configurable. The UI for these properties is auto genearted
- Function that takes in layout config and returns CSS needed to render
- A React component that takes in layout config as a prop
For example, the "Simple" layout on og.railway.app is defined as
import React from "react";
import { z } from "zod";
import { ILayout } from "./types";
const simpleLayoutConfig = z.object({
text: z.string(),
});
export type SimpleLayoutConfig = z.infer<typeof simpleLayoutConfig>;
const Component: React.FC<{ config: SimpleLayoutConfig }> = ({ config }) => {
return (
<div
tw="flex items-center justify-center text-center px-4 w-full h-full text-8xl text-white font-bold"
style={{
background: "linear-gradient(to bottom right, tomato, deeppink)",
}}
>
{config.text}
</div>
);
};
export const simpleLayout: ILayout<typeof simpleLayoutConfig> = {
name: "simple",
config: simpleLayoutConfig,
properties: [
{
type: "text",
name: "text",
default: "Hello, world!",
placeholder: "Text to display",
},
],
Component,
};This will render as
You can fork this repo or deploy to Railway to make it your own, customize, and use in your own projects.
The frontend is a NextJS site and the image generation happens in an API route.
# Start local development server
yarn dev
# Build for production
yarn build
# Start in production
yarn start