{"id":13805864,"url":"https://github.com/impulse-oss/impulse","last_synced_at":"2025-04-12T13:30:01.753Z","repository":{"id":37474261,"uuid":"493645575","full_name":"impulse-oss/impulse","owner":"impulse-oss","description":"Impossible Dev Tools for React and Tailwind","archived":false,"fork":false,"pushed_at":"2023-12-05T15:59:45.000Z","size":36977,"stargazers_count":461,"open_issues_count":4,"forks_count":13,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-03T14:09:05.157Z","etag":null,"topics":["editor","nextjs","react","typescript"],"latest_commit_sha":null,"homepage":"https://impulse.dev","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/impulse-oss.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}},"created_at":"2022-05-18T12:04:46.000Z","updated_at":"2025-04-02T04:40:09.000Z","dependencies_parsed_at":"2024-04-09T23:01:47.865Z","dependency_job_id":null,"html_url":"https://github.com/impulse-oss/impulse","commit_stats":{"total_commits":128,"total_committers":2,"mean_commits":64.0,"dds":0.09375,"last_synced_commit":"68a24da5cbe903f5f9f13de2d573c919adc17e20"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/impulse-oss%2Fimpulse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/impulse-oss%2Fimpulse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/impulse-oss%2Fimpulse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/impulse-oss%2Fimpulse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/impulse-oss","download_url":"https://codeload.github.com/impulse-oss/impulse/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248573303,"owners_count":21126805,"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":["editor","nextjs","react","typescript"],"created_at":"2024-08-04T01:01:05.724Z","updated_at":"2025-04-12T13:30:01.733Z","avatar_url":"https://github.com/impulse-oss.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Tools"],"sub_categories":[],"readme":"# Impulse: Impossible Dev Tools for React and Tailwind\n\nBuild modern websites right in your browser without giving up on code.\n\n[impulse.dev](https://impulse.dev) | [Discord](https://discord.gg/nDDCyyedbs)\n\nMade by [@krogovoy](https://twitter.com/krogovoy) and [@IVolchenskov](https://twitter.com/IVolchenskov)\n\nImpulse was created to work with React websites in dev mode (meaning, running on your localhost).\n\nIt allows you to edit your UI right in the browser while automatically changing your code precisely the way you would do it manually.\nIt's like a code editor extension that goes beyond the code editor.\n\n- Built into your app: no need to install any extensions or desktop apps\n- No external services, works directly with the code\n- Made exclusively for developers, not designers\n- Addon, not a replacement: gives you a new tool while not adding any boundaries\n\n🍿 See demos at [impulse.dev](https://impulse.dev)\n\nCompared to writing code manually:\n\n- Faster\n- More fun\n- Same code produced\n\n## Requirements\n\nLanguages:\n\n- ✅ Javascript\n- ✅ Typescript (typings built in)\n\nRendering libraries:\n\n- ✅ React 17+\n- ⬜️ Vue (possibly in the future)\n- 🚫 Svelte (no plans for support)\n- 🚫 Angular (no plans for support)\n\nReact frameworks and bundlers:\n\n- ✅ Next.js\n- ✅ Create React App\n- ✅ Vite\n- ✅ esbuild\n- ⬜️ Remix\n- ⬜️ Parcel\n- ✅ any custom system built on top of Babel/Webpack/Rollup\n\nCSS frameworks:\n\n- ✅ Tailwind\n- 🚫 no plans to support other CSS frameworks for now\n\nBrowsers:\n\n- ✅ Chromium-based\n- 🚫 Firefox\n- 🚫 Safari\n\n(Impulse relies on [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API) which only works well in Chromium-based browsers)\n\nEditor integration:\n\n- ✅ VS Code\n- ⬜️ more coming\n\n## Install\n\nThere are three ways to try Impulse.\n\n### Option 1: Try now\n\nCopy and paste the code below into your browser's console.\n\n```js\nd=document;s=d.createElement('script');s.src=`https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js`;d.body.appendChild(s)\n```\n\nEasy way to play with the tool without installing anything, but it will go away once you refresh the page.\n\n### Option 2: npm (recommended)\n\nSetup once and for all for the entire team.\n\n```sh\nnpm i -D @impulse.dev/runtime@latest\n```\n\nPaste into any file that always gets imported. Usually it'll be the \"main\" React file, such as `_app.jsx` in Next.js.\n\n```js\nif (process.env.NODE_ENV === 'development') {\n  import('@impulse.dev/runtime').then((impulse) =\u003e impulse.run())\n}\n```\n\n### Option 3: a \u003cscript\u003e tag\n\nPaste this script tag at the end of `\u003cbody\u003e`\n\n```jsx\n{\n  process.env.NODE_ENV === 'development' \u0026\u0026 (\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js\"\u003e\u003c/script\u003e\n  )\n}\n```\n\n### Don't ship Impulse to production\n\nIMPORTANT: make sure you are not shipping Impulse in your production build! It will bloat your bundle size!\n\nMost bundlers cut out all the code inside an `if (process.env.NODE_ENV === 'development') { ... }`, but it's recommended to make a production build and compare the bundle size to what it was before.\n\n## Configure\n\nOnce installed, Impulse is ready for work. Below are some things you might want to set up for Impulse to work best for you.\n\n### Browser\n\nIf you are using Brave, enable File System Access API:\n\n1. Go to brave://flags\n2. Search for `file system access api`\n3. Change it to \"Enabled\"\n\nImpulse only works if you run your development environment on the same computer that you use the browser. Impulse doesn't work with remote environments because it can't edit files on other computers.\n\nFor security reasons, File System Access API only works for `localhost` when http:// is used. If you are using a different hostname even though the environment is local, you should:\n\n1. Go to chrome://flags\n2. Search for `Insecure origins treated as secure`\n3. Add your origin (e.g. http://my_origin) to the list\n\n### Prettier config\n\nImpulse edits your code. By default, it tries its best to make those changes as minimal as possible.\n\nHowever, it doesn't really know how to format your code.\n\nIf you want it to use Prettier after each code change (recommended), pass your config to `run()`:\n\n```diff\nif (process.env.NODE_ENV === 'development') {\n-  import('@impulse.dev/runtime').then((impulse) =\u003e impulse.run())\n+  import('@impulse.dev/runtime').then((impulse) =\u003e impulse.run({\n+    prettierConfig: require('./path_to/.prettierrc.js')\n+  }))\n}\n```\n\n### Tailwind config\n\nIf you have extended the standard theme in Tailwind, pass your `tailwind.config.js` to `run()`:\n\n```diff\nif (process.env.NODE_ENV === 'development') {\n-  import('@impulse.dev/runtime').then((impulse) =\u003e impulse.run())\n+  import('@impulse.dev/runtime').then((impulse) =\u003e impulse.run({\n+     tailwindConfig: require('./path_to/tailwind.config.js'),\n+  }))\n}\n```\n\n## Use\n\n- Option/Alt+Click to select any element on the page\n- Esc to remove selection and exit Impulse\n- Arrow keys or h, j, k, l for keyboard navigation\n- Use the class editor on the right to add, replace, or remove Tailwind classes\n- Space or Enter to open the command bar\n- Use the command bar or the hotkeys (specified on the right for each action) to perform actions\n\n\u003cimg src=\"./packages/impulse.dev/public/media/5-keybindings.png\" alt=\"command bar\" width=\"600\"\u003e\n\nWhat you can do:\n\n- Jump to the code of the selected element\n- Jump to where the React component of the selected element is called\n- Add or remove a class (so far only works if the list of classes in the code is hardcoded with no conditions)\n- Remove the element\n- Insert a new `\u003cdiv\u003e\u003c/div\u003e`\n- Change the tag of the element (e.g. div -\u003e p)\n- Insert a new text\n- Move elements (swap with the previous/next sibling)\n- Undo the latest change\n\n## Get help or share feedback\n\n- [Discord server](https://discord.gg/nDDCyyedbs)\n- [Discussions on Github](https://github.com/kirillrogovoy/impulse/discussions)\n\n## Contribute\n\nRequirements:\n\n- node 16+\n- npm 8.9.0+\n\nClone the repo:\n\n```sh\ngit clone git@github.com:impulse-oss/impulse.git \u0026\u0026 cd impulse\n```\n\nInstall dependencies:\n\n```sh\nnpm install\n```\n\nRun the dev server:\n\n```sh\nnpm run dev\n```\n\nOpen http://localhost:3005/. This is a playground for developing and testing the app.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimpulse-oss%2Fimpulse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimpulse-oss%2Fimpulse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimpulse-oss%2Fimpulse/lists"}