How to Embed a GitHub Repository on Any Website

A repository link is useful, but it is small. On a portfolio page, docs page, launch post, or README, a visual GitHub repo card can show the project name, description, stars, language mix, license, and activity before someone clicks through to GitHub.

There are three practical ways to embed a GitHub repository on a website:

1. Use an SVG image embed.
2. Use an iframe widget.
3. Build or reuse a React component.

Start with the GitHub repo card generator, enter an owner and repository name, choose a layout, then use the embed format that fits your surface.

Method 1: embed an SVG repo card

For most pages, SVG is the best default. It works like a normal image, stays sharp on high-density screens, and can be pasted into HTML, Markdown, MDX, Astro, Next.js, Remix, WordPress, Webflow, and many documentation tools.

HTML example

<a href="https://github.com/facebook/react">
  <img
    src="https://githubcard.com/facebook/react.svg"
    alt="GitHub repository card for facebook/react"
    width="720"
    height="360"
    loading="lazy"
  />
</a>

The link should usually point to the actual GitHub repository. The image URL can point to the generated GitHubCard SVG.

Markdown example

[![React GitHub repo card](https://githubcard.com/facebook/react.svg)](https://github.com/facebook/react)

This is the easiest option for GitHub READMEs, docs written in Markdown, and static site content collections.

Responsive CSS

.github-repo-card {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
}

Then apply it:

<img
  class="github-repo-card"
  src="https://githubcard.com/facebook/react.svg"
  alt="GitHub repository card for facebook/react"
/>

When SVG is best

Use SVG when you want a lightweight card in a README, project gallery, docs homepage, open-source landing page, comparison article, or portfolio case study. SVG is also a strong default when the page is mostly static and the card only needs to communicate repository credibility.

Method 2: embed an iframe repo widget

An iframe is useful when the repository card should behave like a small, self-contained page. It can isolate styling and scripts from the parent site.

iframe example

<iframe
  src="https://githubcard.com/facebook/react/card"
  title="GitHub repository card for facebook/react"
  width="720"
  height="360"
  loading="lazy"
  style="border:0;max-width:100%;"
></iframe>

If your layout is responsive, wrap the iframe in an aspect-ratio container:

<div class="github-repo-frame">
  <iframe
    src="https://githubcard.com/facebook/react/card"
    title="GitHub repository card for facebook/react"
    loading="lazy"
  ></iframe>
</div>

.github-repo-frame {
  aspect-ratio: 2 / 1;
  width: 100%;
  max-width: 720px;
}

.github-repo-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

When iframe is best

Use an iframe when the card needs a separate rendering boundary, interactive behavior, or a more app-like preview. For a simple README or portfolio section, SVG is usually simpler and faster.

Method 3: embed a React component

If your website is a React app, a small component wrapper gives you typed props, consistent sizing, fallback UI, and a single place to control links.

Simple React image component

type GitHubRepoCardProps = {
  owner: string;
  repo: string;
  width?: number;
};

export function GitHubRepoCard({
  owner,
  repo,
  width = 720,
}: GitHubRepoCardProps) {
  const repoPath = `${owner}/${repo}`;
  const repoUrl = `https://github.com/${repoPath}`;
  const imageUrl = `https://githubcard.com/${repoPath}.svg`;

  return (
    <a href={repoUrl} aria-label={`Open ${repoPath} on GitHub`}>
      <img
        src={imageUrl}
        alt={`GitHub repository card for ${repoPath}`}
        width={width}
        height={Math.round(width / 2)}
        loading="lazy"
        style={{ maxWidth: '100%', height: 'auto' }}
      />
    </a>
  );
}

Then use it in a project page:

<GitHubRepoCard owner="facebook" repo="react" />

React iframe component

type GitHubRepoFrameProps = {
  owner: string;
  repo: string;
};

export function GitHubRepoFrame({ owner, repo }: GitHubRepoFrameProps) {
  const repoPath = `${owner}/${repo}`;

  return (
    <iframe
      src={`https://githubcard.com/${repoPath}/card`}
      title={`GitHub repository card for ${repoPath}`}
      loading="lazy"
      style={{
        width: '100%',
        maxWidth: 720,
        aspectRatio: '2 / 1',
        border: 0,
      }}
    />
  );
}

When React is best

Use React when repo cards are part of a reusable project grid, documentation template, comparison page, or internal dashboard. It also helps when you want to switch between multiple repositories with the same component API.

Which embed method should you choose?

Use this quick rule:

For most repository embeds, start with SVG. Move to iframe only when you need widget behavior. Move to React when your app needs one reusable component for many repositories.

Where repo cards work best

A GitHub repository card is most useful when the repository itself is the proof. Good placements include:

• A project section on a personal portfolio.
• An open-source library homepage.
• Documentation pages that reference example repositories.
• Launch posts where readers need project context quickly.
• Internal dashboards that track important repositories.
• GitHub READMEs that need a richer visual link than a plain badge.

If the page is about you as a developer rather than one specific project, a profile card may be a better fit. See How to Embed Your GitHub Profile on Any Website for profile-specific examples.

Performance and accessibility checklist

Before publishing a repository card, check these details:

• Use meaningful alt text for image embeds.
• Use a descriptive title for iframe embeds.
• Define width and height, or use aspect-ratio.
• Lazy-load cards that appear below the first viewport.
• Link the card to the GitHub repository, docs, or project page.
• Keep cards readable on mobile.
• Avoid loading too many live iframe widgets in the first viewport.

For README usage, also keep the surrounding copy short. The card should support the repository story, not replace the README's installation and usage sections.

FAQ

What is the easiest way to embed a GitHub repository on a website?

The easiest method is to publish or export an SVG repository card, then embed it with a normal image tag. It works in most websites, static site generators, and Markdown files.

Should I use SVG, iframe, or React?

Use SVG for most websites and READMEs, iframe when you need an isolated live widget, and React when you want a typed reusable component inside your app.

Can I embed a GitHub repo card in a README?

Yes. Use the Markdown image syntax with a link to the repository. SVG is usually the best README format because it stays sharp and behaves like a normal image.

Can I embed private repositories?

GitHubCard is designed for public repository cards. Private repository data should not be exposed in public embeds unless you intentionally publish a separate static image.

Will a repo card slow down my website?

It should not if you use SVG, define dimensions, and lazy-load cards below the first viewport. Be more careful with many iframe widgets because each iframe has its own loading cost.

Design the repo card first

The embed code is only the final step. Start with the GitHub repo card generator, test the card against a real public repository, and make sure it communicates why the project matters.

For profile README stats, see How to Add Stats to Your GitHub README.