{"id":19534043,"url":"https://github.com/foxglove/create-foxglove-extension","last_synced_at":"2026-01-29T23:10:40.247Z","repository":{"id":37053018,"uuid":"371158644","full_name":"foxglove/create-foxglove-extension","owner":"foxglove","description":"Create Foxglove extensions","archived":false,"fork":false,"pushed_at":"2026-01-22T01:17:22.000Z","size":1379,"stargazers_count":56,"open_issues_count":7,"forks_count":32,"subscribers_count":4,"default_branch":"main","last_synced_at":"2026-01-22T10:20:14.381Z","etag":null,"topics":["foxglove","robotics","ros","typescript","visualization"],"latest_commit_sha":null,"homepage":"https://docs.foxglove.dev/docs/extensions","language":"TypeScript","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/foxglove.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-05-26T20:16:40.000Z","updated_at":"2026-01-21T21:38:37.000Z","dependencies_parsed_at":"2024-06-21T14:06:47.858Z","dependency_job_id":"b7a23969-6d9a-41de-b94f-301e2a722b8a","html_url":"https://github.com/foxglove/create-foxglove-extension","commit_stats":{"total_commits":131,"total_committers":14,"mean_commits":9.357142857142858,"dds":0.7709923664122138,"last_synced_commit":"7f4766e5c6f1f498c58c9bbc119d537d3b2e1b06"},"previous_names":["foxglove/fox"],"tags_count":28,"template":false,"template_full_name":null,"purl":"pkg:github/foxglove/create-foxglove-extension","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxglove%2Fcreate-foxglove-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxglove%2Fcreate-foxglove-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxglove%2Fcreate-foxglove-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxglove%2Fcreate-foxglove-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foxglove","download_url":"https://codeload.github.com/foxglove/create-foxglove-extension/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxglove%2Fcreate-foxglove-extension/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28889865,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-29T21:06:44.224Z","status":"ssl_error","status_checked_at":"2026-01-29T21:06:42.160Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["foxglove","robotics","ros","typescript","visualization"],"created_at":"2024-11-11T02:12:05.749Z","updated_at":"2026-01-29T23:10:40.231Z","avatar_url":"https://github.com/foxglove.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# create-foxglove-extension\n\n[![npm version](https://img.shields.io/npm/v/create-foxglove-extension.svg?style=flat)](https://www.npmjs.com/package/create-foxglove-extension)\n\n## Introduction\n\n[Foxglove](https://foxglove.dev) allows developers to create\n[extensions](https://docs.foxglove.dev/docs/visualization/extensions/introduction), or custom code\nthat is loaded and executed inside the Foxglove application. Extensions are authored in TypeScript\nusing the `@foxglove/extension` SDK.\n\n## Creating Your First Extension\n\nMake sure you have [Node.js](https://nodejs.org/) 14 or newer installed. In a terminal, go\ninto the directory where you keep source code (ex: `cd ~/Code`) and run the following\ncommand:\n\n```sh\nnpm init foxglove-extension@latest helloworld\n```\n\nFeel free to choose an extension name other than _helloworld_. Otherwise, this will create\na folder named _helloworld_ containing your extension. Run a one-time initialization step:\n\n```sh\ncd helloworld\nnpm install\n```\n\nThis installs all of the dependencies needed to edit and build the extension. You can use\nany editor to work on this project, although [VSCode](https://code.visualstudio.com/) is\nthe best supported IDE for authoring Foxglove extensions. Look at the files\n`src/index.ts` and `src/ExamplePanel.tsx` for a simple example of creating a React element\nand registering it as a custom panel. To build and install this extension into your local\nFoxglove extensions folder, run:\n\n```sh\nnpm run local-install\n```\n\nThis should create a folder under your home directory such as\n`~/.foxglove-studio/extensions/unknown.helloworld-0.0.0` containing your compiled\nextension. Start Foxglove. If everything succeeded, you should be able to add a new\npanel in Foxglove named _\"ExamplePanel\"_. Each time you make a change to your\nextension, you will need to run `npm run local-install` again to build it and copy the\nbuild output to the Foxglove extensions folder in your home directory. You can\neither reload Foxglove or close and reopen it to load your latest extension code.\n\nIf you just want to confirm your code compiles without installing it locally, run `npm run build`.\n\nYou can customize the build and install process by editing your `./config.ts` file. The\nconfig file should look something like this:\n\n```typescript\nmodule.exports = {\n  webpack: (config) =\u003e {\n    config.module.rules.push({\n      test: /\\.css$/i,\n      use: [\"style-loader\", \"css-loader\"],\n    });\n    return config;\n  },\n};\n```\n\n## Publishing Your Extension\n\nAll of the metadata for your extension is contained in the _package.json_ file. Before\npublishing, make sure you have set `name`, `publisher`, `version`, and `description`. When\nyou are ready to distribute your extension, run:\n\n```sh\nnpm run package\n```\n\nThis will produce a _.foxe_ file such as `helloworld-0.0.0.foxe`. This is essentially a\nZIP archive containing your extension manifest and compiled code that can be opened by the\nFoxglove application, which will unpack it and install it to the\n`~/.foxglove-studio/extensions` folder. Stay tuned for future instructions on how to\npublish Foxglove extensions to a registry so other users can easily search for and\ninstall your extension.\n\n## Examples\n\nYou can find examples of different kinds of extensions in the `./examples` directory.\n\n## Stay in touch\n\nJoin our [Discord](https://foxglove.dev/chat) to ask questions, share\nfeedback, and stay up to date on what our team is working on.\n\n## Developer information\n\nInformation on developing `create-foxglove-extension` itself.\n\n### Build and Run Locally\n\nBuild the `create-foxglove-extension` package locally with:\n\n```bash\nnpm pack\n```\n\nRun the extension generator:\n\n```bash\n npx create-foxglove-extension-{VERSION}.tgz example-extension-name\n```\n\n### Release process\n\n1. Bump the version in package.json, and merge to main\n2. [Create a new release](https://github.com/foxglove/create-foxglove-extension/releases/new)\n3. Create a tag for the version above, with a leading \"v\" (`v0.0.0`)\n4. Generate release notes\n5. Publish the release\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxglove%2Fcreate-foxglove-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoxglove%2Fcreate-foxglove-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxglove%2Fcreate-foxglove-extension/lists"}