Generate beautiful Open Graph images via URL. No design skills required.
Install the SDK:
npm install ogis
// app/blog/[slug]/page.tsx
import { OgisClient } from 'ogis';
const ogis = new OgisClient({ baseUrl: 'https://img.ogis.dev' });
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return {
openGraph: {
images: [ogis.generateUrl({
title: post.title,
description: post.excerpt,
template: 'twilight'
})]
}
};
}
<script lang="ts">
import { OgisClient } from 'ogis';
const ogis = new OgisClient({ baseUrl: 'https://img.ogis.dev' });
const ogImage = ogis.generateUrl({
title: 'My Page',
template: 'minimal'
});
</script>
<svelte:head>
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
</svelte:head>
---
import { OgisClient } from 'ogis';
const ogis = new OgisClient({ baseUrl: 'https://img.ogis.dev' });
const ogImage = ogis.generateUrl({
title: frontmatter.title,
description: frontmatter.description
});
---
<head>
<meta property="og:image" content={ogImage} />
</head>
<script setup lang="ts">
import { OgisClient } from 'ogis';
const ogis = new OgisClient({ baseUrl: 'https://img.ogis.dev' });
useSeoMeta({
ogImage: ogis.generateUrl({
title: 'My Page',
template: 'modern'
})
});
</script>
No SDK needed - just construct the URL:
<meta property="og:image" content="https://img.ogis.dev/?title=Hello%20World&template=twilight" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Browse all templates at ogis.dev/playground.
twilight
|
daybreak
|
minimal
|
stripe
|
gradient-aurora
|
hero
|
All parameters are optional and passed as query parameters or SDK options.
| Parameter | Description | Example |
|---|---|---|
title | Main heading text | My Blog Post |
description | Secondary text below title | A deep dive into... |
subtitle | Small text above title | Tutorial |
template | Template name (see above) | twilight |
logo | URL to logo image | https://example.com/logo.png |
image | URL to background/hero image | https://example.com/hero.jpg |
Templates may support additional color customization parameters. See the playground for template-specific options.
docker run -d -p 3000:3000 twango/ogis:latest
docker compose up -d
cargo build --release
./target/release/ogis
Configure via environment variables (prefixed with OGIS_) or CLI arguments:
| Environment Variable | CLI Argument | Default | Description |
|---|---|---|---|
OGIS_PORT | --port | 3000 | Server port |
OGIS_HOST | --host | 0.0.0.0 | Server host |
OGIS_HMAC_SECRET | --hmac-secret | - | Enable HMAC authentication |
OGIS_DEFAULT_TEMPLATE | --default-template | twilight | Default template |
OGIS_MAX_INPUT_LENGTH | --max-input-length | 500 | Max text length |
OGIS_CACHE_SIZE | --cache-size | 1000 | Image cache size |
Run ogis --help for all options.
For private instances, enable HMAC-SHA256 signature validation:
# Server
docker run -d -p 3000:3000 -e OGIS_HMAC_SECRET=your-secret twango/ogis:latest
// Client
const ogis = new OgisClient({
baseUrl: 'https://your-instance.com',
hmacSecret: process.env.OGIS_SECRET
});
// URLs are automatically signed
const url = ogis.generateUrl({ title: 'Secure Image' });
// => https://your-instance.com/?title=Secure+Image&signature=abc123...
See Authentication docs for details.
FAQs
TypeScript client for OGIS OpenGraph image generation service
We found that ogis demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.