{"id":30046729,"url":"https://github.com/xarlizard/responsive-panel","last_synced_at":"2025-08-07T08:53:47.547Z","repository":{"id":308111077,"uuid":"1018724678","full_name":"xarlizard/responsive-panel","owner":"xarlizard","description":"A development tool that helps frontend developers visualize and test responsive design breakpoints in real-time","archived":false,"fork":false,"pushed_at":"2025-07-12T23:13:19.000Z","size":90,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-04T09:17:47.085Z","etag":null,"topics":["breakpoints-plugin","npm-package"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/responsive-panel","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/xarlizard.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-12T22:33:46.000Z","updated_at":"2025-07-23T14:25:28.000Z","dependencies_parsed_at":"2025-08-04T09:32:44.344Z","dependency_job_id":null,"html_url":"https://github.com/xarlizard/responsive-panel","commit_stats":null,"previous_names":["xarlizard/responsive-panel"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/xarlizard/responsive-panel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xarlizard%2Fresponsive-panel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xarlizard%2Fresponsive-panel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xarlizard%2Fresponsive-panel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xarlizard%2Fresponsive-panel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xarlizard","download_url":"https://codeload.github.com/xarlizard/responsive-panel/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xarlizard%2Fresponsive-panel/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269227927,"owners_count":24381839,"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","status":"online","status_checked_at":"2025-08-07T02:00:09.698Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["breakpoints-plugin","npm-package"],"created_at":"2025-08-07T08:53:46.675Z","updated_at":"2025-08-07T08:53:47.499Z","avatar_url":"https://github.com/xarlizard.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Responsive Panel 🎯\n\n[![npm version](https://badge.fury.io/js/responsive-panel.svg?refresh=1)](https://badge.fury.io/js/responsive-panel)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)\n\nA powerful development tool that helps frontend developers visualize and test responsive design breakpoints in real-time. It provides a floating panel that shows your webpage across multiple viewport sizes simultaneously, with fullscreen mode for detailed testing.\n\n## 🚀 Features\n\n- **📱 Multi-viewport preview** - See your site across different breakpoints simultaneously\n- **🖱️ Fullscreen mode** - Click viewport headers for detailed breakpoint testing\n- **🎯 Smart trigger hiding** - No recursive panels in iframe views\n- **🔧 Draggable interface** - Move panel and floating button independently\n- **⚡ Live sync** - Synchronized scrolling and form inputs across viewports\n- **🎨 Theme support** - Light, dark, or auto themes\n- **🛡️ Dev-only** - Automatically disabled in production\n- **📦 Framework agnostic** - Works with React, Vue, Angular, vanilla JS\n\n## 📦 Installation\n\n```bash\nnpm install responsive-panel --save-dev\n```\n\n## 🎯 Quick Start\n\n### ES Modules\n\n```javascript\nimport { ResponsivePanel } from \"responsive-panel\";\n\nconst panel = new ResponsivePanel({\n  position: \"top-right\",\n  showLabels: true,\n  breakpoints: [320, 576, 768, 992, 1200, 1400],\n  labels: [\"Mobile\", \"Small\", \"Medium\", \"Large\", \"XL\", \"XXL\"],\n});\n```\n\n### Auto-injection\n\n```javascript\nimport { injectResponsivePanel } from \"responsive-panel\";\n\n// Simple injection with defaults\ninjectResponsivePanel();\n\n// With custom config\ninjectResponsivePanel({\n  position: \"bottom-left\",\n  theme: \"dark\",\n  liveSync: true,\n});\n```\n\n## ⚙️ Configuration\n\n| Option        | Type       | Default                       | Description                             |\n| ------------- | ---------- | ----------------------------- | --------------------------------------- |\n| `breakpoints` | `number[]` | `[320, 480, 768, 1024, 1280]` | Viewport widths in pixels               |\n| `labels`      | `string[]` | `[]`                          | Custom labels for breakpoints           |\n| `position`    | `string`   | `'bottom-right'`              | Position of floating button             |\n| `theme`       | `string`   | `'auto'`                      | UI theme: `'light'`, `'dark'`, `'auto'` |\n| `liveSync`    | `boolean`  | `false`                       | Sync interactions across viewports      |\n| `showLabels`  | `boolean`  | `true`                        | Show breakpoint labels                  |\n| `zIndex`      | `number`   | `10000`                       | Z-index for panel overlay               |\n\n## 🎮 Usage\n\n1. **Open Panel**: Click the floating button\n2. **Fullscreen Mode**: Click any viewport header for detailed view\n3. **Navigate Back**: Use \"Back to Dashboard\" button\n4. **Drag Panel**: Click and drag the panel header\n5. **Move Button**: Drag the floating button to reposition\n\n## 🔧 API Reference\n\n### Methods\n\n```javascript\nconst panel = new ResponsivePanel(config);\n\npanel.open(); // Open the panel\npanel.close(); // Close the panel\npanel.toggle(); // Toggle panel visibility\npanel.destroy(); // Clean up and remove panel\n\n// Event handling\npanel.on(\"open\", () =\u003e console.log(\"Panel opened\"));\npanel.on(\"enterFullscreen\", (event, viewport) =\u003e\n  console.log(\"Fullscreen:\", viewport)\n);\n```\n\n### Events\n\n- `open` - Panel opened\n- `close` - Panel closed\n- `enterFullscreen` - Entered fullscreen mode\n- `exitFullscreen` - Exited fullscreen mode\n- `drag` - Panel or button dragged\n\n## 🎨 Themes\n\nThe panel supports three themes:\n\n- **Light**: Clean light interface\n- **Dark**: Dark mode for night development\n- **Auto**: Follows system preference\n\n## 🛡️ Production Safety\n\nThe responsive panel automatically detects production environments and disables itself to prevent accidental inclusion in production builds.\n\n## 📄 License\n\nMIT © [Responsive Panel](LICENSE)\n\n## 🤝 Contributing\n\nContributions are welcome! Please read our [Code of Conduct](CODE_OF_CONDUCT.md) and check the [API documentation](API.md) for development guidelines.\n\n### pnpm\n\n```bash\npnpm add responsive-panel --save-dev\n```\n\n### GitHub Packages\n\n```bash\nnpm install @xarlizard/responsive-panel\n```\n\n\u003e **Note**: For GitHub Packages, you'll need to configure your `.npmrc` file. See [PUBLISHING.md](./PUBLISHING.md) for details.\n\n## 🚀 Quick Start\n\n### Basic Usage\n\n```javascript\n// index.js or main entry point\nimport { injectResponsivePanel } from \"responsive-panel\";\n\nif (process.env.NODE_ENV !== \"production\") {\n  injectResponsivePanel();\n}\n```\n\n### React Example\n\n```jsx\nimport React, { useEffect } from \"react\";\nimport { injectResponsivePanel } from \"responsive-panel\";\n\nfunction App() {\n  useEffect(() =\u003e {\n    if (process.env.NODE_ENV !== \"production\") {\n      const panel = injectResponsivePanel({\n        breakpoints: [320, 480, 768, 1024, 1280],\n        theme: \"auto\",\n        liveSync: true,\n      });\n\n      return () =\u003e panel?.destroy();\n    }\n  }, []);\n\n  return \u003cdiv\u003eYour app content\u003c/div\u003e;\n}\n```\n\n### Vue Example\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003eYour app content\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { injectResponsivePanel } from \"responsive-panel\";\n\nexport default {\n  mounted() {\n    if (process.env.NODE_ENV !== \"production\") {\n      this.panel = injectResponsivePanel();\n    }\n  },\n  beforeDestroy() {\n    this.panel?.destroy();\n  },\n};\n\u003c/script\u003e\n```\n\n### Script Tag Usage\n\n```html\n\u003cscript\n  src=\"https://unpkg.com/responsive-panel@latest/dist/index.esm.js\"\n  type=\"module\"\n  data-breakpoints=\"[320, 480, 768, 1024, 1280]\"\n  data-theme=\"dark\"\n  data-position=\"bottom-right\"\n\u003e\u003c/script\u003e\n```\n\n## 📚 Configuration\n\n```javascript\ninjectResponsivePanel({\n  // Array of breakpoint widths in pixels\n  breakpoints: [320, 480, 768, 1024, 1280],\n\n  // Position of the floating trigger button\n  position: \"bottom-right\", // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n\n  // Theme for the panel UI\n  theme: \"auto\", // 'light' | 'dark' | 'auto'\n\n  // Whether to enable live sync between viewports\n  liveSync: false,\n\n  // Custom CSS class for the panel container\n  className: \"my-custom-panel\",\n\n  // Whether to show labels for each breakpoint\n  showLabels: true,\n\n  // Custom labels for breakpoints\n  labels: [\"Mobile\", \"Tablet\", \"Desktop\"],\n\n  // Z-index for the panel overlay\n  zIndex: 999999,\n\n  // Whether the panel starts minimized\n  startMinimized: false,\n\n  // Custom breakpoint configurations\n  customBreakpoints: [\n    { width: 320, height: 568, label: \"iPhone SE\", enabled: true },\n    { width: 768, height: 1024, label: \"iPad\", enabled: true },\n    { width: 1440, height: 900, label: \"MacBook\", enabled: true },\n  ],\n});\n```\n\n## 📖 API Reference\n\n### `injectResponsivePanel(config?)`\n\nInjects the responsive panel into the current page.\n\n**Parameters:**\n\n- `config` (optional): Configuration object\n\n**Returns:** `ResponsivePanel` instance or `null` in production\n\n### `ResponsivePanel` Methods\n\n```javascript\nconst panel = injectResponsivePanel();\n\n// Control panel visibility\npanel.open();\npanel.close();\npanel.toggle();\n\n// Control panel state\npanel.minimize();\npanel.maximize();\n\n// Update configuration\npanel.updateConfig({ theme: \"dark\" });\n\n// Event listeners\npanel.on(\"open\", () =\u003e console.log(\"Panel opened\"));\npanel.on(\"close\", () =\u003e console.log(\"Panel closed\"));\npanel.off(\"open\", handler);\n\n// Cleanup\npanel.destroy();\n```\n\n### Events\n\n- `open`: Panel is opened\n- `close`: Panel is closed\n- `minimize`: Panel is minimized\n- `maximize`: Panel is maximized\n- `drag`: Panel is being dragged\n- `breakpointToggle`: Breakpoint visibility toggled\n\n## 🔧 Advanced Usage\n\n### Custom Breakpoints\n\n```javascript\ninjectResponsivePanel({\n  customBreakpoints: [\n    { width: 320, height: 568, label: \"iPhone SE\", enabled: true },\n    { width: 375, height: 667, label: \"iPhone 8\", enabled: true },\n    { width: 414, height: 896, label: \"iPhone 11\", enabled: true },\n    { width: 768, height: 1024, label: \"iPad\", enabled: true },\n    { width: 1024, height: 768, label: \"iPad Landscape\", enabled: false },\n    { width: 1440, height: 900, label: \"MacBook\", enabled: true },\n  ],\n});\n```\n\n### Programmatic Control\n\n```javascript\nconst panel = injectResponsivePanel();\n\n// Open panel programmatically\nsetTimeout(() =\u003e {\n  panel.open();\n}, 2000);\n\n// Listen for events\npanel.on(\"open\", () =\u003e {\n  console.log(\"Panel is now open\");\n});\n\npanel.on(\"breakpointToggle\", (data) =\u003e {\n  console.log(`Breakpoint ${data.width}px toggled`);\n});\n```\n\n### Integration with Build Tools\n\n#### Webpack\n\n```javascript\n// webpack.config.js\nmodule.exports = {\n  plugins: [\n    new webpack.DefinePlugin({\n      \"process.env.NODE_ENV\": JSON.stringify(\n        process.env.NODE_ENV || \"development\"\n      ),\n    }),\n  ],\n};\n```\n\n#### Vite\n\n```javascript\n// vite.config.js\nexport default defineConfig({\n  define: {\n    \"process.env.NODE_ENV\": JSON.stringify(\n      process.env.NODE_ENV || \"development\"\n    ),\n  },\n});\n```\n\n## 🤝 TypeScript Support\n\nThe package includes full TypeScript definitions:\n\n```typescript\nimport { ResponsivePanelConfig, ResponsivePanel } from \"responsive-panel\";\n\nconst config: ResponsivePanelConfig = {\n  breakpoints: [320, 768, 1024],\n  theme: \"dark\",\n  liveSync: true,\n};\n\nconst panel: ResponsivePanel | null = injectResponsivePanel(config);\n```\n\n## 🛠️ Requirements\n\n- **Node.js**: 14+ (for build tools)\n- **Browser**: Modern browsers with ES2018+ support\n- **Framework**: Works with any or no framework\n\n## 🎯 Use Cases\n\n- **QA Testing**: Visual layout testing across devices\n- **Development**: Real-time responsive design feedback\n- **Design Systems**: Building responsive UI components\n- **Client Demos**: Showcasing responsive behavior\n- **Debugging**: Identifying layout issues quickly\n\n## 📱 Browser Support\n\n- Chrome 63+\n- Firefox 67+\n- Safari 12+\n- Edge 79+\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- Inspired by browser developer tools\n- Built with modern web standards\n- Designed for developer productivity\n\n---\n\nMade with ❤️ by [Xarlizard](https://github.com/xarlizard)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxarlizard%2Fresponsive-panel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxarlizard%2Fresponsive-panel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxarlizard%2Fresponsive-panel/lists"}