{"id":23183637,"url":"https://github.com/svecosystem/paneforge","last_synced_at":"2025-05-14T15:05:57.969Z","repository":{"id":224113910,"uuid":"762063964","full_name":"svecosystem/paneforge","owner":"svecosystem","description":"Resizable pane components for Svelte.","archived":false,"fork":false,"pushed_at":"2025-04-02T14:42:18.000Z","size":2569,"stargazers_count":506,"open_issues_count":9,"forks_count":7,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-10T04:53:20.977Z","etag":null,"topics":["draggable","panel","panels","resizable","svelte","svelte-5","svelte-components","svelte5","sveltekit"],"latest_commit_sha":null,"homepage":"https://paneforge.com","language":"Svelte","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/svecosystem.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["huntabyte"],"patreon":null,"open_collective":null,"ko_fi":"huntabyte","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2024-02-23T02:27:46.000Z","updated_at":"2025-04-09T04:29:28.000Z","dependencies_parsed_at":"2024-03-10T17:24:14.671Z","dependency_job_id":"3054550e-4425-4fcb-8570-9675c44e311e","html_url":"https://github.com/svecosystem/paneforge","commit_stats":null,"previous_names":["svecosystem/paneforge"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svecosystem%2Fpaneforge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svecosystem%2Fpaneforge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svecosystem%2Fpaneforge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svecosystem%2Fpaneforge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svecosystem","download_url":"https://codeload.github.com/svecosystem/paneforge/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254169012,"owners_count":22026207,"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":["draggable","panel","panels","resizable","svelte","svelte-5","svelte-components","svelte5","sveltekit"],"created_at":"2024-12-18T09:13:49.423Z","updated_at":"2025-05-14T15:05:57.950Z","avatar_url":"https://github.com/svecosystem.png","language":"Svelte","funding_links":["https://github.com/sponsors/huntabyte","https://ko-fi.com/huntabyte"],"categories":["TypeScript"],"sub_categories":[],"readme":"# PaneForge\n\n\u003c!-- automd:badges license name=\"paneforge\" color=\"green\" github=\"svecosystem/paneforge\" --\u003e\n\n[![npm version](https://flat.badgen.net/npm/v/paneforge?color=green)](https://npmjs.com/package/paneforge)\n[![npm downloads](https://flat.badgen.net/npm/dm/paneforge?color=green)](https://npmjs.com/package/paneforge)\n[![license](https://flat.badgen.net/github/license/svecosystem/paneforge?color=green)](https://github.com/svecosystem/paneforge/blob/main/LICENSE)\n\n\u003c!-- /automd --\u003e\n\n[![](https://dcbadge.vercel.app/api/server/fdXy3Sk8Gq?style=flat)](https://discord.gg/fdXy3Sk8Gq)\n\nPaneForge provides components that make it easy to create resizable panes in your Svelte apps. It's designed to be simple to use, and to work well with other Svelte components and libraries. This project has taken a lot of inspiration and code from the work done by [Bryan Vaughn](https://github.com/bvaughn) and [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) and seeks to provide a similar experience for Svelte developers.\n\n## Features\n\n-   **Simple API**: PaneForge is designed to be easy to use. It provides a small set of components that can be combined to create complex layouts.\n-   **Resizable Panes**: Panes can be resized by dragging the resizer between them.\n-   **Nested Groups**: Groups of panes can be nested inside other groups to create complex layouts.\n-   **Customizable**: The appearance and behavior of the panes can be customized using CSS and Svelte props.\n-   **Persistent Layouts**: PaneForge can be used with LocalStorage or cookies to persist the layout of the panes between page loads.\n-   **Accessible**: PaneForge is designed to be accessible to all users, including those who use assistive technologies.\n-   **Community-driven**: PaneForge is an open-source project that welcomes contributions from the community. If you have an idea for a new feature or an improvement, we'd love to hear from you!\n\n## Installation\n\n```bash\nnpm install paneforge\n```\n\n## Basic Usage\n\nHere's a simple example of how to use Paneforge to create a horizontal pane group with two panes:\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { PaneGroup, Pane, PaneResizer } from \"paneforge\";\n\u003c/script\u003e\n\n\u003cPaneGroup direction=\"horizontal\"\u003e\n\t\u003cPane defaultSize={50}\u003ePane 1\u003c/Pane\u003e\n\t\u003cPaneResizer /\u003e\n\t\u003cPane defaultSize={50}\u003ePane 2\u003c/Pane\u003e\n\u003c/PaneGroup\u003e\n```\n\nThe `PaneGroup` component is used to initialize a pane group, and the `Pane` component is used to create a pane. The `PaneResizer` component is used to create a resizer that can be dragged to resize the panes.\n\nThe components ship only with the styles necessary to position the panes in the appropriate layout. The rest of the styling is up to you.\n\nFor more information, see the [Documentation](https://paneforge.com).\n\n## Sponsors\n\nThis project is supported by the following beautiful people/organizations:\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/sponsors/huntabyte\"\u003e\n    \u003cimg src='https://github.com/huntabyte/static/blob/main/sponsors.svg?raw=true' alt=\"Logos from Sponsors\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## License\n\n\u003c!-- automd:contributors license=MIT author=\"huntabyte\" --\u003e\n\nPublished under the [MIT](https://github.com/svecosystem/paneforge/blob/main/LICENSE) license.\nMade by [@huntabyte](https://github.com/huntabyte) and [community](https://github.com/svecosystem/paneforge/graphs/contributors) 💛\n\u003cbr\u003e\u003cbr\u003e\n\u003ca href=\"https://github.com/svecosystem/paneforge/graphs/contributors\"\u003e\n\u003cimg src=\"https://contrib.rocks/image?repo=svecosystem/paneforge\" /\u003e\n\u003c/a\u003e\n\n\u003c!-- /automd --\u003e\n\n## Community\n\nJoin the Discord server to ask questions, find collaborators, or just say hi!\n\n\u003ca href=\"https://discord.gg/fdXy3Sk8Gq\" alt=\"Svecosystem Discord community\"\u003e\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://invidget.switchblade.xyz/fdXy3Sk8Gq\"\u003e\n  \u003cimg alt=\"Svecosystem Discord community\" src=\"https://invidget.switchblade.xyz/fdXy3Sk8Gq?theme=light\"\u003e\n\u003c/picture\u003e\n\u003c/a\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvecosystem%2Fpaneforge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvecosystem%2Fpaneforge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvecosystem%2Fpaneforge/lists"}