{"id":22843398,"url":"https://github.com/milahu/svelte-layout-resizable","last_synced_at":"2025-08-24T09:16:59.895Z","repository":{"id":109861429,"uuid":"291003924","full_name":"milahu/svelte-layout-resizable","owner":"milahu","description":"resizable layout component for svelte","archived":false,"fork":false,"pushed_at":"2022-11-06T10:32:51.000Z","size":55,"stargazers_count":28,"open_issues_count":4,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-10T00:18:52.331Z","etag":null,"topics":["layout","splitter","svelte","svelte-component","svelte-components","sveltejs","vanillajs"],"latest_commit_sha":null,"homepage":"https://milahu.github.io/svelte-layout-resizable/demo/demo.html","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/milahu.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}},"created_at":"2020-08-28T09:17:11.000Z","updated_at":"2024-11-14T21:49:47.000Z","dependencies_parsed_at":"2023-06-12T08:15:38.417Z","dependency_job_id":null,"html_url":"https://github.com/milahu/svelte-layout-resizable","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/milahu/svelte-layout-resizable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/milahu%2Fsvelte-layout-resizable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/milahu%2Fsvelte-layout-resizable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/milahu%2Fsvelte-layout-resizable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/milahu%2Fsvelte-layout-resizable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/milahu","download_url":"https://codeload.github.com/milahu/svelte-layout-resizable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/milahu%2Fsvelte-layout-resizable/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271833840,"owners_count":24830657,"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-24T02:00:11.135Z","response_time":111,"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":["layout","splitter","svelte","svelte-component","svelte-components","sveltejs","vanillajs"],"created_at":"2024-12-13T02:14:34.468Z","updated_at":"2025-08-24T09:16:59.883Z","avatar_url":"https://github.com/milahu.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-layout-resizable\n\nresizable layout component for svelte\n\n[live demo](https://milahu.github.io/svelte-layout-resizable/demo/demo.html)\n\n## status\n\n:warning: deprecated in favor of\n\n- [split](https://github.com/nathancahill/split) - utilities for resizeable split views\n- [areas](https://github.com/bimdata/areas) - A Vue.js Blender style area manager to create custom layouts\n\n## usage\n\nin your `App.svelte` add\n\n```html\n\u003cscript\u003e\n  import L from 'svelte-layout-resizable';\n\u003c/script\u003e\n\u003cL row\u003e\n  \u003cL\u003ecell 1 in row\u003c/L\u003e\n  \u003cL column\u003e\n    \u003cL\u003ecell 2.1 in column\u003c/L\u003e\n    \u003cL\u003ecell 2.2 in column\u003c/L\u003e\n    \u003cL\u003ecell 2.3 in column\u003c/L\u003e\n  \u003c/L\u003e\n  \u003cL\u003ecell 3 in row\u003c/L\u003e\n\u003c/L\u003e\n```\n\nresult:\n\n![screenshot of svelte-layout-resizable demo](demo/screenshot.webp)\n\n`\u003cL row\u003e` is a broad container with css `flex-direction: row`\n\n`\u003cL column\u003e` is a tall container with css `flex-direction: column`\n\nif you dont like the `\u003cL\u003e` syntax  \nyou can do `import Layout from 'svelte-layout-resizable';`  \nand use `\u003cLayout\u003ecell\u003c/Layout\u003e`\n\n## style\n\nthe component defines only a minimal style  \nto implement containers and resize-handles\n\nmost users want to add style to their `App.svelte`, like\n\n```html\n\u003cstyle\u003e\n  /* layout */\n  :global(body) {\n    /* use full window size */\n    padding: 0;\n  }\n  :global(.layout-cell\u003e.middle\u003e.center) {\n    /* content cell: add scrollbars when needed */\n    overflow: auto;\n  }\n  :global(.layout-cell\u003e*\u003e.frame) {\n    /* frame color and border */\n    /*background-color: #f4f4f4;*/\n    border: solid 0.5px #a8a8a8;\n  }\n  :global(.layout-cell\u003e*, .layout-cell\u003e*\u003e.frame) {\n    /* frame size\n       larger frames are better acccessible (touchscreen) */\n    flex-basis: 2.5px !important;\n  }\n  /* use css classes on cells like\n     \u003cL class=\"overflow-hidden\"\u003e....\u003c/L\u003e */\n  :global(.layout-cell\u003e.middle\u003e.center.overflow-hidden) {\n    overflow: hidden !important;\n  }\n  /* use css classes on containers like\n     \u003cL row class=\"custom-row-container\"\u003e....\u003c/L\u003e */\n  :global(.layout-row.custom-row-container) {\n    color: orange;\n  }\n\u003c/style\u003e\n```\n\n## related\n\n* [goldenlayout.js](https://golden-layout.com/) (RIP jQuery)\n* [svelte-subdivide](https://github.com/sveltejs/svelte-subdivide) [[v3](https://github.com/saabi/svelte-subdivide/tree/v3)]\n* [svelte-grid](https://github.com/vaheqelyan/svelte-grid)\n* [other svelte layout components](https://sveltesociety.dev/components/) in sveltesociety \u0026rarr; tag: layout and structure\n* [solidjs-resizable-splitter-component](https://github.com/milahu/solidjs-resizable-splitter-component) port of this library for the solidjs framework\n\n## todo\n\n* avoid changing body style?  \n  only 'stop selecting text' in layout containers?\n\n* fix resize bug with many cells  \n  like a 3x3 layout  \n  in the center container\n\n*  fix newStyle.marginLeft and newStyle.marginTop\n\n* allow to hide/deactivate resize handles  \n  on the outside of a class=\"root\" container\n  (better: find root container automatically)\n\n* allow resize from corner handles?\n\n* imitate goldenlayout.js and [qt dockable widgets](https://doc.qt.io/qt-5/qtwidgets-mainwindows-dockwidgets-example.html)  \n  maybe as a separate node package, keep it small\n\n  * allow to drag/move and dock cells to other containers\n\n  * allow to expand one cell over the root layout\n\n* add a tab widget? out of scope?  \n  we already have [svelte-tabs](https://github.com/joeattardi/svelte-tabs)\n\n* support 'live resize' of layout  \n  con: need more CPU/GPU = debounce to like 10 FPS\n\n* beforeUpdate or onMount  \n  calculate sizes of all cells  \n  so when we have\n  ```\n  \u003cL\u003e\n    \u003cL s=\"0.6\"\u003e1\u003c/L\u003e\n    \u003cL\u003e2\u003c/L\u003e\n  \u003c/L\u003e\n  ```\n  then cell 2 should have size 0.4  \n  and not what css-flex suggests  \n  based on content size  \n  or did we use flex wrong?\n\n* check bounds on resize  \n  eventually shrink more cells\n\n* verify overflow on resize  \n  avoid unnecessary scrollbars\n\n## license\n\n[license](LICENSE) is creative commons zero 1.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmilahu%2Fsvelte-layout-resizable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmilahu%2Fsvelte-layout-resizable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmilahu%2Fsvelte-layout-resizable/lists"}