---
title: Custom code & code snippets with GitHub
slug: archbee-docs/custom-code-and-code-snippets-with-github
description: Learn how to integrate your Archbee account with GitHub to seamlessly sync your custom code and CSS. Follow the step-by-step guide to define an 'archbee.json' file in your GitHub repository and easily add your custom code or CSS. Archbee ensures that any
docTags: 
createdAt: 2023-01-18T08:31:59.000Z
---

Integration with GitHub allows you to sync the [Custom Code](<./././HOSTED SPACES/Custom Code.md>):  [customCSS](<./././HOSTED SPACES/Custom CSS.md>), **customJS**, **footerTemplate**, **headerTemplate**, directly from the GitHub repository. These variables can be raw text or link to a file from the `root` folder.&#x20;

You just need to define the `archbee.json` file in your repo and add your custom code or custom CSS, like in this example:

:::CodeblockTabs
archbee.json

```json
{
  "root": "docfolderwithsummary",
  "structure": {
    "summary": "summary.md",
    "assets": ".archbee/assets"
  },
  "customJS":"custom.js",
  "customCSS":"* \n {  font-family: \"Comic Sans MS\", cursive, sans-serif; }",
  "footerTemplate": "",
  "headerIncludes": ""
}
```

summary.md

```none
# Table of contents

- [Introduction](introduction.md)

## Walkthroughs

- [Installing](walkthroughs/01-installing-app.md)
- [Adding Event Handlers](walkthroughs/02-adding-event-handlers.md)
- [Defining Custom Elements](walkthroughs/03-defining-custom-elements.md)

## Docs

- [Configuring](docs/01-configuring-app.md)
- [Adding info](docs/02-adding-info.md)
- [Starting App ](docs/03-starting-app.md)
```

custom.js

```markdown
window._archbee = window._archbee || {
  queue: [],
  push: function (x) {window._archbee.queue.push(x)}
};

window._archbee.push({
  eventType: "init",
  spaceId: "PUBLISHED-0AUu0NJ_zFLC52lH2Yy5U",
});
```
:::

If you push the code to GitHub, Archbee will read the configuration from the `archbee.json` file and automatically update the **Space Settings -> Custom Code&#x20;**&#x73;ection with your new code.

![](https://app.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/eoeIwuvZ0mtjJpZRtOcSk_github-customcode-light.png "Custom code in Space settings")

## Code snippets

You can add code snippets in your GitHub repo, you just need to configure them in the `config.md` file.

:::hint{type="warning"}
The `config.md` file must be placed in the same folder as the `summary.md` file.
:::

Below is an example of a `config.md` file:

:::CodeblockTabs
config.md

```markdown
## use a file relative to  docsPath folder
::use{file="swagger-v2.json#L2"}

## relative path to repo structure
::use{file="/app/package.json#L1-L5"}

## relative path to docsPath folder
::use{file="../app/package.json#L1-L5"}

## one single line
::use{file="../app/package.json#L5"}

## specify syntax, from and to parameters explicitly
::use{file="swagger-v2.json" from="L6" to="L10" syntax="javascript"}

```
:::

### Example

Assuming that you have the below `package.json` file (from the above example):

![](https://app.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/cS_lk0o5MtUDGpk-qzVbk_github-codesnippets-light.png "Code snippet example")

And also the `config.md` file:

:::CodeblockTabs
config.md

```markdown
## specify syntax, from and to parameters explicitly
::use{file="swagger-v2.json" from="90" to="127" syntax="javascript"}

```
:::

You will see the following in the Archbee doc after the import:

```javascript
      "post": {
        "tags": ["pet"],
        "summary": "Add a new pet to the store",
        "description": "",
        "operationId": "addPet",
        "consumes": ["application/json", "application/xml"],
        "produces": ["application/json", "application/xml"],
        "parameters": [
          {
            "in": "body",
            "name": "body",
            "description": "Pet object that needs to be added to the store",
            "required": true,
            "schema": {
              "$ref": "#/definitions/Pet"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "Success!"
          },
          "405": {
            "description": "Invalid input"
          }
        },
        "security": [
          {
            "api_key": []
          },
          {
            "petstore_auth": ["write:pets", "read:pets"]
          }
        ]
      },
```