{"id":20810840,"url":"https://github.com/elvisans/webflow_local_bridge","last_synced_at":"2026-04-19T21:09:10.991Z","repository":{"id":223746257,"uuid":"761420177","full_name":"ElvisAns/webflow_local_bridge","owner":"ElvisAns","description":"Manage your Webflow Custom Scripts from the confort of your local development environment","archived":false,"fork":false,"pushed_at":"2024-12-08T07:39:40.000Z","size":104,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-18T14:33:56.722Z","etag":null,"topics":["webflow","webflow-api","webflow-app"],"latest_commit_sha":null,"homepage":"https://webflow-local-bridge-website.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ElvisAns.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-21T20:47:38.000Z","updated_at":"2024-12-08T07:39:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"33bffc1a-9dae-417f-ba14-6b7836875a36","html_url":"https://github.com/ElvisAns/webflow_local_bridge","commit_stats":null,"previous_names":["elvisans/webflow_local_bridge"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElvisAns%2Fwebflow_local_bridge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElvisAns%2Fwebflow_local_bridge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElvisAns%2Fwebflow_local_bridge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElvisAns%2Fwebflow_local_bridge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ElvisAns","download_url":"https://codeload.github.com/ElvisAns/webflow_local_bridge/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243158973,"owners_count":20245669,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["webflow","webflow-api","webflow-app"],"created_at":"2024-11-17T20:28:21.350Z","updated_at":"2025-12-24T21:49:35.947Z","avatar_url":"https://github.com/ElvisAns.png","language":"JavaScript","readme":"# Webflow Local bridge CLI\n\nLocal Bridge is a powerful command-line tool designed to supercharge the way Webflow developers handle custom scripts.\n\n## Installation\n\nPrequesites :\n- Node and NPM Installed (Preferably Node 20+)\n- A webflow account\n\nTo install the project, follow these steps:\n\n1. Clone the repository to your local machine `git clone https://github.com/ElvisAns/webflow_local_bridge local_bridge.git` or download the latest release https://github.com/ElvisAns/webflow_local_bridge/releases\n2. Cd to the project folder `cd local_bridge`\n3. Install dependencies by running `npm install`.\n4. Change your Site ID, Client ID and Client Secret inside the `user.config.cjs` file (You can see your webflow site ID at the general settings of the site and the Client ID/Client Secret from the custom app tab). When you dont have a custom app with Client ID and Client Secret, just fill the Site ID and just leave the Client ID and Client Secret empty.\n\n### Authentication\n\n#### Option 1 : You have a custom app with Client ID and Client Secret\nAuthenticate your CLI instance with an authorization code.\nTo get the authCode please refer to the app website at [https://webflow-local-bridge-website.vercel.app](https://webflow-local-bridge-website.vercel.app/)\n```bash\nnpm run bridge -- auth \u003cauthCode\u003e\n```\n\n#### Option 2 : Use an Access Token generated from a the docs site\nYes, it is a hacky way to authenticate but it works for now.\n- Go to [webflow.com/oauth/authorize](https://webflow.com/oauth/authorize?response_type=code\u0026client_id=2ccc1b455c782fd60093590c83ee5e315b36bd6640507bb48570e5d0265c2854\u0026redirect_uri=https%3A%2F%2Fdevelopers.webflow.com%2Fapi%2Ffern-docs%2Foauth%2Fwebflow%2Fcallback\u0026scope=assets%3Aread+assets%3Awrite+authorized_user%3Aread+cms%3Aread+cms%3Awrite+custom_code%3Aread+custom_code%3Awrite+forms%3Aread+forms%3Awrite+pages%3Aread+pages%3Awrite+sites%3Aread+sites%3Awrite+ecommerce%3Aread+ecommerce%3Awrite+users%3Aread+users%3Awrite+site_activity%3Aread+workspace%3Aread+workspace%3Awrite+app_subscriptions%3Aread+site_config%3Aread+site_config%3Awrite+components%3Aread+components%3Awrite\u0026state=https%3A%2F%2Fdevelopers.webflow.com%2Fdata%2Freference%2Fcustom-code%2Fcustom-code-sites%2Fget-custom-code%3Fplayground%3D%252Fdata%252Freference%252Fcustom-code%252Fcustom-code-sites%252Fget-custom-code)\n- Choose the site you want to authenticate against or select the entire workspace\n- It will be redirect you to the docs site with the login successfull notice\n- Copy the sample curl command shown to you and paste it in your favorite text editor then copy the value of the Bearer token\n- If no .env file is found in the project folder, create one and add the following line `ACCESS_TOKEN=\u003cyour_access_token\u003e`\n\n### Adding JavaScript Files\nInstall Dependencies\n```bash\nnpm install\n```\n\nStart the Development Server\n```bash\nnpm run dev\n```\nAdd JavaScript files to the scripts folder to be able to use the commands below with them.\n\n## Steps to commit your changes\n\n### 1. Upload the script to the Webflow assets\n\nOnce you have your script ready, you can upload it to the Webflow assets by running the following command.\n\nThe script has to be located inside the scripts folder\n\nYour dev server has to be running for this command to work. (npm run dev)\n\n```bash\nnpm run bridge -- push \u003cfilename\u003e\n```\n\n### 2. Register the script\n\nRegister a script with a specific version.\n\nNote : The first time you create a new file remember to register it's dev version (`npm run bridge -- deploy --version=dev --file=test.js --location=head`, which will automatically register the localhost url) then you can switch to that dev version whenever you want to start development and see changes live.\n\n\n```bash\nnpm run bridge -- deploy --version=\u003cversion\u003e --file=\u003cfilename\u003e --location=\u003clocation\u003e\n```\nLocation can be `header` or `footer`\n\n### 3. Attach the script to the page\n\nAttach a script's specific version to a Webflow page and location.\nlocation can be `header` or `footer`\n\n```bash\nnpm run bridge -- attach --pageId=\u003cpageId\u003e --file=\u003cfilename\u003e --version=\u003cversion\u003e --location=\u003clocation\u003e\n```\nMake sure you redeploy your site from the designer for the script deployment to reflect on the actual website\nTip : If you dont know how to get the pageId, you can see the url of your designer tab while making changes to that page and take the value of the pageId query param. For homepage you usually dont see pageId in the url, so the hack is to visit the page in the browser, inspect the site with dev tools and take the value of the attribute `data-wf-page` from the `html` tag.\n\n**Tip : Anytime you want to see changes live (dev server must be running) without redeploying your site any time you make changes, please attach the dev version to the page, deploy from the designer and stay between your code editor and the browser (just refresh the page in the browser). When  you are done making changes, upload the new file as of step 1, register the newest version and attach it to the page again then finally deploy from the designer. If you want to rollback to the previous version, just attach the previous version to the page and deploy from the designer.**\n\n![2025-01-03-1543 excalidraw](https://github.com/user-attachments/assets/87da598b-36b2-4289-b824-4ceb2de9025f)\n\n\n### 4. Detach the script from the page\n\nif you want to remove the script from the page, you can do so by running the following command.\n\n```bash\nnpm run bridge -- remove --pageId=\u003cpageId\u003e --file=\u003cfilename\u003e\n\n```\nMake sure you redeploy your site from the designer for the script deployment to reflect on the actual website\n\n### Miscellaneous\n\n#### Show Registered scripts\n\nRetrieve scripts registered to your site or page, specify the page if you need to see registered script to the page only\n\n```bash\nnpm run bridge -- show site --limit=\u003climit\u003e --offset=\u003coffset\u003e\n```\nor\n```bash\nnpm run bridge -- show page --pageId=\u003cpageId\u003e --limit=\u003climit\u003e --offset=\u003coffset\u003e\n```\nThe offset and limits are optional you can ommit them.\n\n#### Sharing the script with others\n\nYou can track the entire project with git and that means you can use tool like github to share the project with others within your team.\n\n## Contributing\n\nContributions are welcome! Please submit bug reports, feature requests, and pull requests following our guidelines.\n\n\n## Contact\n\nFor any questions or inquiries, please contact me.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felvisans%2Fwebflow_local_bridge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felvisans%2Fwebflow_local_bridge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felvisans%2Fwebflow_local_bridge/lists"}