Enter your custom values, copy the generated URL or download the generated image and use it wherever you want.
Tips on usage:
- To override default values and hide an element, pass a single space character (' ') as its input.
- All fields which accept image URLs, accept emojis as well!
If you want to create your own OG Image generator from this repo, you can do so very easily:
Make sure you have the following installed before proceeding:
- Node.js v14.18.0+ (v18+ recommended)
- Package manager of your choice (npm, yarn, pnpm, etc.)
git clone https://github.com/anurag-roy/og.anuragroy.dev.gitnpm installnpm run dev
This will start a local development server where you will be able to make changes to the code and preview them live.
-
To customise the actual generated image, you have to edit
pages/api/index.tsx.Here, you can edit the fonts used, parameters accepted by the API, look and feel of the image, etc. The Vercel docs have a lot of examples which should cover most use cases.
-
To customise anything in the UI, you can start by looking at
components/Main/index.tsxwhich contains the main form.
To build the project and test the production build locally:
npm run build
npm startThis will start a local server with the final production build.
Currently this can only be deployed on Vercel's Edge platform due to the dependency on @vercel/og. But on the bright side, they have a very generous Hobby plan and extremely simple deployments.
- Create an account on Vercel, if you don't have one already.
- Upload this repo to GitHub (or GitLab or whatever). Create a new project on Vercel and link it to your repo.
- Thats it, no other configuration or env variables needed! (Just make sure your selected Node.js version is 18.x).
- Visit the project URL and you should now have your own OG image generator!
- Vercel edge functions
- @vercel/og docs
- Next.js docs (This project uses the Next's Pages Router)