--- title: GitHubCode description: Fetch and display code from a GitHub repository. image: https://developers.cloudflare.com/cf-twitter-card.png --- > Documentation Index > Fetch the complete documentation index at: https://developers.cloudflare.com/style-guide/llms.txt > Use this file to discover all available pages before exploring further. [Skip to content](#%5Ftop) # GitHubCode The `GitHubCode` component is used `26` times on `13` pages. See all examples of pages that use GitHubCode Used **26** times. **Pages** * [/agents/concepts/agentic-patterns/](https://developers.cloudflare.com/agents/concepts/agentic-patterns/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/agents/concepts/agentic-patterns/index.mdx) * [/d1/best-practices/read-replication/](https://developers.cloudflare.com/d1/best-practices/read-replication/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/d1/best-practices/read-replication.mdx) * [/d1/tutorials/d1-and-prisma-orm/](https://developers.cloudflare.com/d1/tutorials/d1-and-prisma-orm/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/d1/tutorials/d1-and-prisma-orm.mdx) * [/kv/get-started/](https://developers.cloudflare.com/kv/get-started/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/kv/get-started.mdx) * [/style-guide/how-we-docs/image-maintenance/](https://developers.cloudflare.com/style-guide/how-we-docs/image-maintenance/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/style-guide/how-we-docs/image-maintenance.mdx) * [/style-guide/how-we-docs/links/](https://developers.cloudflare.com/style-guide/how-we-docs/links/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/style-guide/how-we-docs/links.mdx) * [/style-guide/how-we-docs/metadata/](https://developers.cloudflare.com/style-guide/how-we-docs/metadata/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/style-guide/how-we-docs/metadata.mdx) * [/style-guide/how-we-docs/redirects/](https://developers.cloudflare.com/style-guide/how-we-docs/redirects/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/style-guide/how-we-docs/redirects.mdx) * [/style-guide/how-we-docs/reviews/](https://developers.cloudflare.com/style-guide/how-we-docs/reviews/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/style-guide/how-we-docs/reviews.mdx) * [/workers/platform/infrastructure-as-code/](https://developers.cloudflare.com/workers/platform/infrastructure-as-code/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers/platform/infrastructure-as-code.mdx) * [/workers/static-assets/direct-upload/](https://developers.cloudflare.com/workers/static-assets/direct-upload/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers/static-assets/direct-upload.mdx) * [/workers/tutorials/deploy-an-express-app/](https://developers.cloudflare.com/workers/tutorials/deploy-an-express-app/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers/tutorials/deploy-an-express-app.mdx) * [/workflows/examples/wait-for-event/](https://developers.cloudflare.com/workflows/examples/wait-for-event/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workflows/examples/wait-for-event.mdx) **Partials** The `GitHubCode` component allows you to include files from Cloudflare repositories. The remote content can be filtered by lines or a region enclosed in tags. ## Import ``` import { GitHubCode } from "~/components"; ``` ## Usage ``` import { GitHubCode } from "~/components"; ``` ### Filtering by lines ``` import { GitHubCode } from "~/components"; {/*import { foo } from "bar"; const baz = foo(); console.log(baz);*/}{/*import { foo } from "bar"; const baz = foo();*/} ``` ### Filtering by tag ``` import { GitHubCode } from "~/components"; {/*import { foo } from "bar"; const baz = foo(); console.log(baz);*/}{/*import { foo } from "bar"; const baz = foo();*/} ``` ## `` Props ### `repo` **required** **type:** `string` The owner and repository to pull from, in the form of `cloudflare/` For example: * `cloudflare/workers-rs`. * `cloudflare/templates`. ### `file` **required** **type:** `string` The file path to pull from, in the form of `path/to/filename-including-extensions`. This path excludes the repo name. For example: * `templates/hello-world/src/lib.rs`. * `d1-starter-sessions-api/src/index.ts`. ### `commit` **required** **type:** `string` The long (40-characters) Git commit hash to pull from, for example `ab3951b5c95329a600a7baa9f9bb1a7a95f1aeaa`. ### `lang` **required** **type:** `string` The language to use for the code block, for example `rs`. ### `useTypeScriptExample` **type:** `boolean` If the `lang` is `"ts"` and `useTypeScriptExample` is `true`, the [TypeScriptExample](https://developers.cloudflare.com/style-guide/components/typescript-example/) component will be used to provide a JavaScript tab as well. ### `lines` **type:** `string` A range of lines to filter the content using, for example `1-3`. ### `tag` **type:** `string` A region to filter the content with, for example `no-logging`. This should be represented as starting `` and closing `` comments in the source file. ### `code` **type**: `object` Props to pass to the [Expressive Code component ↗](https://expressive-code.com/key-features/code-component/). ## Associated content types * [Tutorial](https://developers.cloudflare.com/style-guide/documentation-content-strategy/content-types/tutorial/) ```json {"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/style-guide/components/github-code/#page","headline":"GitHubCode · Cloudflare Style Guide","description":"Fetch and display code from a GitHub repository.","url":"https://developers.cloudflare.com/style-guide/components/github-code/","inLanguage":"en","image":"https://developers.cloudflare.com/cf-twitter-card.png","dateModified":"2026-06-18","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/style-guide/","name":"Style Guide"}},{"@type":"ListItem","position":3,"item":{"@id":"/style-guide/components/","name":"Components"}},{"@type":"ListItem","position":4,"item":{"@id":"/style-guide/components/github-code/","name":"GitHubCode"}}]} ```