{"id":21542994,"url":"https://github.com/vimtor/filant","last_synced_at":"2025-07-26T17:39:19.055Z","repository":{"id":143779085,"uuid":"356657563","full_name":"vimtor/filant","owner":"vimtor","description":"Open web components in your editor with a single click","archived":false,"fork":false,"pushed_at":"2021-05-30T10:45:45.000Z","size":1027,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-15T08:37:47.541Z","etag":null,"topics":["browser-extension","chrome-extension","editor","ide","productivity"],"latest_commit_sha":null,"homepage":"https://chrome.google.com/webstore/detail/filant/eilfjabonchhnfknjldhlbedoimgdkfp","language":"HTML","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/vimtor.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":"2021-04-10T17:59:46.000Z","updated_at":"2023-06-03T11:11:55.000Z","dependencies_parsed_at":"2023-05-17T03:00:32.632Z","dependency_job_id":null,"html_url":"https://github.com/vimtor/filant","commit_stats":null,"previous_names":["vimtor/filant"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimtor%2Ffilant","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimtor%2Ffilant/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimtor%2Ffilant/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimtor%2Ffilant/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vimtor","download_url":"https://codeload.github.com/vimtor/filant/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244130283,"owners_count":20402753,"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":["browser-extension","chrome-extension","editor","ide","productivity"],"created_at":"2024-11-24T05:12:20.225Z","updated_at":"2025-03-17T23:53:53.045Z","avatar_url":"https://github.com/vimtor.png","language":"HTML","readme":"\u003cdiv align=\"center\"\u003e\n   \u003ch1 align=\"center\"\u003efilant 📄\u003c/h1\u003e\n   \u003cp align=\"center\"\u003eOpen web components in your editor with a single click\u003c/p\u003e\n\u003c/div\u003e\n\n![filant video](https://user-images.githubusercontent.com/36263538/119271882-d0446880-bc03-11eb-8864-ff8a0e3ca3cb.gif)\n\n## 🧠 Why\n\nAt some moment in your developer journey you will have encountered the following situation:\n\n1. You are working in a codebase that is large or is not well organized\n2. You have to fix a bug located in a section of your application. Let's say a `Download` button does not work properly\n3. You don't have any idea where the file that contains that button is located\n4. You try to search for `Download`\n5. You get 42 results for the word `Download`\n6. You cry a bit and skim through the 42 results\n\nFilant aims to make this process instantaneous. It is as simple as right-clicking the component you want to see it open\nin your favorite IDE\n\n## 📦 Setup\n\n1. Install the browser extension for\n   [Chrome](https://chrome.google.com/webstore/detail/eilfjabonchhnfknjldhlbedoimgdkfp)\n2. Add the plugin [babel-plugin-filant](/packages/babel-plugin-filant) to your project\n\nOnce those things are done you can click the browser extension icon and select your IDE and follow any further\ninstructions specific for that IDE\n\nNow you can simply right-click any component in your app and click on the `Open in IDE` button in the context menu\n\n## 📜 Examples\n\nCheck the [examples](/examples) folder to see how to configure the plugin:\n\n- [React.js](/examples/example-react) using [parcel-bundler](https://parceljs.org/)\n- [Preact](/examples/example-preact) using [parcel-bundler](https://parceljs.org/)\n\n## ❓ Questions\n\n\u003cdetails\u003e\n\u003csummary\u003eMy code editor is not supported\u003c/summary\u003e\nWe tried to support all major code editors. If you think you can help adding your IDE, head over to the \u003ca href=\"#-contributing\"\u003econtributing section\u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eMy Javascript framework is not supported\u003c/summary\u003e\nWe are not experts on other Javascript frameworks. But we are more than welcome to accept pull requests and suggestions\non how to make filant work with other frameworks. If you think you can help, head over the \u003ca href=\"#-contributing\"\u003econtributing section\u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eThe data attributes clutter my HTML\u003c/summary\u003e\nWe plan in the future to add the data attributes differently to make the HTML less cluttered.\nHowever, this is not a priority right now since adding support for other frameworks is more important for us.\nIf you think you can help, head over the \u003ca href=\"#-contributing\"\u003econtributing section\u003c/a\u003e\n\u003c/details\u003e\n\n## 👋 Contributing\n\nWe welcome pull requests to add further capabilities and support to _filant_. Here we'll see the most common scenarios\n\n### How it works internally\n\nAs you will see exploring the `packages` folder, the concept is fairly easy. The\n[babel-plugin-filant](/packages/babel-plugin-filant) adds to all JSX elements an attribute `data-filant` with the\ncurrent path, line and column that element is found. If you inspect you HTML after adding the plugin, you will see\nsomething like this:\n\n```html\n\u003cdiv data-filant=\"C:/Website/src/App.jsx|18|8\"\u003e\n  \u003ch1 data-filant=\"C:/Website/src/App.jsx|19|12\"\u003eHello World!\u003c/h1\u003e\n\u003c/div\u003e\n```\n\nIn short, it adds the following to all HTML elements:\n\n```html\n\u003cdiv data-filant=\"\u003cFULL_PATH\u003e|\u003cLINE\u003e|\u003cCOLUMN\u003e\"\u003e\u003c/div\u003e\n```\n\n### Adding support for a new Javascript framework\n\nTo add support for a new JS framework, you will need to implement some kind of plugin that adds those `data-filant`\nattributes to the output HTML. The browser extension will handle the rest.\n\nHere at Pocket Apps, we use React.js and don't have much experience with other frameworks building pipelines. So we\nthank you so much for helping us in this regard\n\n### Adding support for a new code editor\n\nTo add support for a new code editor, you will need to submit a pull request with the following changes to the\n[browser-extension](/packages/browser-extension) package:\n\n- Add the new icon to the [images](/packages/browser-extension/images) folder\n- Add the image to the IDE list on the [popup/index.html](/packages/browser-extension/popup/index.html) file\n- Add the explanation to the IDE footer on the [popup/index.html](/packages/browser-extension/popup/index.html) file\n- Add a way to open it on the [background.js](/packages/browser-extension/background.js) file\n\n## 💖 Support\n\nIf you found filant useful you may consider [buying us a coffee](https://buymeacoffee.com/pocketapps) or contributing to\nthe repository.\n\nWe are two developers, and a cat making this possible in our free time from work, so your help will be greatly\nappreciated.\n","funding_links":["https://buymeacoffee.com/pocketapps"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvimtor%2Ffilant","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvimtor%2Ffilant","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvimtor%2Ffilant/lists"}