12 ms·

Vue Window Layout Manager (Tabs, Floating, Popouts)

334 points by mathuo 2y ago

therein 2y ago
Really nice. SolidJS support would be nice too. I lately have no preference between React and Solid but I have some projects that could use this that happens to be in SolidJS.
- AlexErrant 2y ago
  This exists https://github.com/lyonbot/solid-dockview https://github.com/lyonbot/solid-dockview
bossyTeacher 2y ago
This is really impressive. Can I also give you major props for the following: - Zero dependencies: wow, this is really good for a js package. - Documentation: nice, clear and with examples - Transparent builds: this should be a standard I wish more js packages were like yours
- herpdyderp 2y ago
  > - Transparent builds: this should be a standard Can you explain what "Transparent builds" means in this context? From my understanding after a quick search, it is the standard. If any package requires me to figure out a manual build process after installing it, to get it to work, I simply do not use it.
  - mathuo 2y ago
    This is in related to the publication of the package to npm. All of the publications are verified with provenance statements as supported by NPM directly; it's something I believe all NPM packages should be required to use but as of now it's optional; it simply provided verifiable signatures as to what was built and how it was built. https://docs.npmjs.com/generating-provenance-statements https://docs.npmjs.com/generating-provenance-statements https://www.npmjs.com/package/dockview#provenance https://www.npmjs.com/package/dockview#provenance
    - fc417fc802 2y ago
      [dead]
  - itsafarqueue 2y ago
    Attestation
cyanydeez 2y ago
Neat. Any mobile touch plans?
- mathuo 2y ago
  Yes, it's something that is planned. Currently some features work with touch inputs but not all of them. - https://github.com/mathuo/dockview/issues/696 https://github.com/mathuo/dockview/issues/696
rk06 2y ago
it is great to say support for vanilla js & vue in addition to react, for other js framework to consume
garbagepatch 2y ago
Does this use the new moveBefore API to move DOM elements while preserving their state? Or is it going to recreate the elements eitherway due to React/Vue?
- lolinder 2y ago
  I'd be surprised if it uses moveBefore for something that seems to have put so much thought into being portable. moveBefore doesn't even have an entry in MDN yet, the only references I can find to it suggest it's still only available behind a flag in Chrome canary.
  - samhh 2y ago
    It could support it as a progressive enhancement.
    - lolinder 2y ago
      I personally wouldn't even bother with that yet. Once it's available in even one browser not behind a flag, sure, but while it's still entirely undocumented and only available to people who both use Chrome Canary and know to go turn on a specific flag?
- mathuo 2y ago
  There are multiple ways in which you can specify how the panel renders. https://dockview.dev/docs/core/panels/rendering https://dockview.dev/docs/core/panels/rendering Options exist for multiple cases: 1. Where you never want the elements DOM position to move (`always` rendering mode) and the HTMLElement is simply hidden (display: none) when not visible. 2. Where you only want the DOM element to exist when the panel is visible (`onlyWhenVisible` mode) In the case of React the React Tree is always maintained in either mode.
- deleted 2y ago
  [deleted]
karol 2y ago
Nice project. I would appreciate putting some common content in the demo, such as videos, dropdowns, large amount of text and large size text to show how they can be handled. Also is there a version without window chrome, just panes?
- mlajtos 2y ago
  Instead of content, put there webview/iframe – https://github.com/mlajtos/mosaic https://github.com/mlajtos/mosaic
  - crooked-v 2y ago
    After tinking with some similar toy projects, I feel like iframes with a well-defined APi to use with postMessage() (and maybe a small library to provide frame-internal matching toolbars/controls) are definitely the way to go here, since they remove the need to tightly couple your "OS" with your "apps".
    - mlajtos 2y ago
      What kind of apps?
samradelie 2y ago
Wow. Stellar work. The TS looks really proper on first glance. I think you're right on zeitgeist -- we're going to need a lot more fundamental tools like this to build AI apps. Technically speaking, I've long wondered about mount/unmount of components as panels are dragged about and their visibility changed. Sometimes it's more costly to mount/unmount than to display:none. Second, you have basically a declarative structure for these panels, are there plans to expose a Vite plugin for example that could export saved TS layouts, where functions (ie: TS imports) map to the panel contents? (trying to think outside of JSX and more vanilla TS) Fantastic work!
- mathuo 2y ago
  In terms of rendering modes both approaches are supported https://dockview.dev/docs/core/panels/rendering https://dockview.dev/docs/core/panels/rendering There are options to maintain the panels content within the DOM at all times (using an approach like you mentioned with display: none) and options to remove content from the DOM. In terms of vanilla TS the library is almost entire written in vanilla TS with small wrapper libraries for Vue and React. In theory wrappers could be written for other frameworks such as Angular (which is something I would like to get done this year) Loading and saving state is supported though https://dockview.dev/docs/core/state/save https://dockview.dev/docs/core/state/save Let me know if that answers the question
- achierius 2y ago
  I might have missed something -- how do AI apps come into this? Was this application written with AI, or for AI applications in particular? (I don't imagine it uses AI for the actual layout management or anything like that)
  - v3ss0n 2y ago
    That's I am wondering too.. may be commenter itself is an AI?
  - mathuo 2y ago
    no ai :) just a vanilla layout manager. I assume the above comment is by somebody building an ai project that could use a layout manager
diob 2y ago
How does this compare to golden layout? Inspired by it? I really enjoyed that project back in the day, but unfortunately support completely stopped (it had some folks take over, but I didn't see a real feasible upgrade path despite their passionate work on updating it). This looks great! I'd be interested in giving it a try.
- mathuo 2y ago
  golden layout is the OG JavaScript layout manager, used it for many years beforehand. Orginally yes it was inspired by some of the other layout managers, include golden layout. The main goal here was to have zero depenedencies and to be written in Vanilla TypeScript with wrapper libraries for frameworks such as Vue and React. Any feedback is appreicated, the website demo shows most of the current capabilities and there are many more planned in the Issues list.
- joshribakoff 2y ago
  I just tried using golden layout the other day. The demo on their website with react support is v1 and when I installed it, I got v2 which apparently drops react support and has no documentation or examples on the website. With v1, it only supported class based components. While in theory you could maintain your own adapter logic for golden layout, it seems somewhat defunct, there are other newer libs that may even have better feeling drag and drop like this one. I also recall about six years ago when I went to use Golden layout on another project I ended up implementing my own with vanilla type script because of some (perceived) issues with it. My experiences have always been that although it is ubiquitous it’s not that great.
peppertree 2y ago
Demo doesn't load in macOS Safari.
- andix 2y ago
  Same issue on iPadOS (18.3) Safari.
  - mathuo 2y ago
    will take a look https://github.com/mathuo/dockview/issues/826 https://github.com/mathuo/dockview/issues/826
    - andix 2y ago
      Great. Sadly I can't provide any more details, I have no debugger connected to the iPad to investigate the issue, it's a bit tricky without a Mac.
      - ukuina 2y ago
        Try this? https://apps.apple.com/us/app/inspect-browser/id1203594958 https://apps.apple.com/us/app/inspect-browser/id1203594958
        andix 2y ago
        I think there are also open source tools to get a Safari remote debugger working on Linux and Windows. I would prefer that over an app on the tiny iPad screen.
  - mathuo 2y ago
    demo fixed on Safari. There is touch support for some the core features. https://dockview.dev/demo/ https://dockview.dev/demo/
- mathuo 2y ago
  demo fixed on Safari https://dockview.dev/demo/ https://dockview.dev/demo/
toastercat 2y ago
SEXY!
dahdum 2y ago
Kept getting this error when navigating: This page crashed Try again Right side of assignment cannot be destructured The video looks awesome, but I couldn’t get the demo to work using an iPad, so I assume mobile isn’t supported fully? I’d use it for my personal dashboard and for organizing llama.cpp chats if I could.
- mathuo 2y ago
  Most likely, touch devices are not officially supported however support is planed. Also the demo has some issues running on Safari which will be fixed.
Jonovono 2y ago
Looks awesome! I want something like this for managing Electron base windows & Web contents views :)
Onavo 2y ago
Do you plan to add touch device support? It doesn't work well on tablets and phones.
- mathuo 2y ago
  Yes, it's something that is planned. Currently some features work with touch inputs but not all of them. - https://github.com/mathuo/dockview/issues/696 https://github.com/mathuo/dockview/issues/696
mlajtos 2y ago
Safari can't handle the demo. https://dockview.dev/demo https://dockview.dev/demo
- mathuo 2y ago
  will take a look https://github.com/mathuo/dockview/issues/826 https://github.com/mathuo/dockview/issues/826
- mathuo 2y ago
  demo fixed on Safari https://dockview.dev/demo/ https://dockview.dev/demo/
mlajtos 2y ago
Time to rebuild Mosaic. https://github.com/mlajtos/mosaic https://github.com/mlajtos/mosaic
- ofrzeta 2y ago
  Did you never come across https://de.wikipedia.org/wiki/NCSA_Mosaic https://de.wikipedia.org/wiki/NCSA_Mosaic ? :)
  - mlajtos 2y ago
    Never used it. https://github.com/mlajtos/mosaic/blob/master/DesignDecisions.md#mosaic https://github.com/mlajtos/mosaic/blob/master/DesignDecision...
bsnnkv 2y ago
I maintain a tiling wm written in Rust, and I just cannot imagine having the patience to do this kind of work in JS/TS. My respect to mathuo! One of the coolest things I've seen on HN recently.
- mathuo 2y ago
  Appreciated :)
low_tech_punk 2y ago
Looks like a very high quality library, great work! I wonder if it will eventually support auto truncating tab titles when the tabs fill up the horizontal space, just like how chrome display large number of tabs.
pdyc 2y ago
wow, very well thought out layout manager. I want to start a project just to use it :-) Is there a way to add gaps between the elements so it looks like a dashboard rather than panel?
mattlondon 2y ago
Brilliant. Is anyone aware of any sort of similar sort of zero-dep vanilla libraries for common desktop controls beyond what HTML offers? E.g. menus etc?
- chris_st 2y ago
  I use DaisyUI [0] for all kinds of controls; it's CSS only. 0: https://daisyui.com https://daisyui.com
- f0ur 2y ago
  another: https://bulma.io https://bulma.io
mathuo 2y ago
small issue on website preventing demo working on Safari browsers is now fixed. https://dockview.dev/demo/ https://dockview.dev/demo/
somytomy 2y ago
I literally have been working on something like this for a spare-time project, and am so glad to find this. Now I can throw out my code and move to the next stage of the project.
alluro2 2y ago
Dockview is phenomenal, and congrats to @mathuo on a great project - I've recently thoroughly tested 6-7 available libraries in this category, and dockview is certainly in the top. GH is also very active and well maintained. The only reason I in the end went with FlexLayout (https://github.com/caplin/FlexLayout https://github.com/caplin/FlexLayout) for a recent project was lack of support for predefined/restricted dimensions, - which was since added in a very good way - and that I really liked how FL handles side panels, with vertical tabs, and their predefined behavior. Looking very much forward to using Dockview in one of the next projects.
- popcorncowboy 2y ago
  Both look great. The aesthetics of FlexLayout's drag box are _really_ nice, and the vertical tab handling is such a good touch. Dockview looks like a strong contender though, and the HN effect on stars may well give it momentum to integrate the relatively small edges that FlexLayout enjoys.
urronglol 2y ago
[dead]
todotask 2y ago
I have a look at SonarSource website, their homepage looks awful.
qwertox 2y ago
Absolutely incredible! Everything is perfect. All dragging, resizing, moving, everything works without errors. Even nested panels...
T3RMINATED 2y ago
[dead]
MortyWaves 2y ago
Does this support disabling the ability to have floating popout windows?
gavmor 2y ago
Oh hell yeah, dude!
scrivna 2y ago
for people looking for a quick getting started to using dockview-core with vanilla javascript on a web page, see here... https://gist.github.com/scrivna/3186d73bc2680088748d752a9c9144cb https://gist.github.com/scrivna/3186d73bc2680088748d752a9c91...

334 points by mathuo 2y ago

Really nice. SolidJS support would be nice too. I lately have no preference between React and Solid but I have some projects that could use this that happens to be in SolidJS.

AlexErrant 2y ago
This exists https://github.com/lyonbot/solid-dockview https://github.com/lyonbot/solid-dockview

bossyTeacher 2y ago

This is really impressive. Can I also give you major props for the following: - Zero dependencies: wow, this is really good for a js package. - Documentation: nice, clear and with examples - Transparent builds: this should be a standard I wish more js packages were like yours

herpdyderp 2y ago
> - Transparent builds: this should be a standard Can you explain what "Transparent builds" means in this context? From my understanding after a quick search, it is the standard. If any package requires me to figure out a manual build process after installing it, to get it to work, I simply do not use it.
- mathuo 2y ago
  This is in related to the publication of the package to npm. All of the publications are verified with provenance statements as supported by NPM directly; it's something I believe all NPM packages should be required to use but as of now it's optional; it simply provided verifiable signatures as to what was built and how it was built. https://docs.npmjs.com/generating-provenance-statements https://docs.npmjs.com/generating-provenance-statements https://www.npmjs.com/package/dockview#provenance https://www.npmjs.com/package/dockview#provenance
  - fc417fc802 2y ago
    [dead]
- itsafarqueue 2y ago
  Attestation

cyanydeez 2y ago

Neat. Any mobile touch plans?

mathuo 2y ago
Yes, it's something that is planned. Currently some features work with touch inputs but not all of them. - https://github.com/mathuo/dockview/issues/696 https://github.com/mathuo/dockview/issues/696

rk06 2y ago

it is great to say support for vanilla js & vue in addition to react, for other js framework to consume

garbagepatch 2y ago

Does this use the new moveBefore API to move DOM elements while preserving their state? Or is it going to recreate the elements eitherway due to React/Vue?

lolinder 2y ago
I'd be surprised if it uses moveBefore for something that seems to have put so much thought into being portable. moveBefore doesn't even have an entry in MDN yet, the only references I can find to it suggest it's still only available behind a flag in Chrome canary.
- samhh 2y ago
  It could support it as a progressive enhancement.
  - lolinder 2y ago
    I personally wouldn't even bother with that yet. Once it's available in even one browser not behind a flag, sure, but while it's still entirely undocumented and only available to people who both use Chrome Canary and know to go turn on a specific flag?
mathuo 2y ago
There are multiple ways in which you can specify how the panel renders. https://dockview.dev/docs/core/panels/rendering https://dockview.dev/docs/core/panels/rendering Options exist for multiple cases: 1. Where you never want the elements DOM position to move (`always` rendering mode) and the HTMLElement is simply hidden (display: none) when not visible. 2. Where you only want the DOM element to exist when the panel is visible (`onlyWhenVisible` mode) In the case of React the React Tree is always maintained in either mode.
deleted 2y ago
[deleted]

karol 2y ago

Nice project. I would appreciate putting some common content in the demo, such as videos, dropdowns, large amount of text and large size text to show how they can be handled. Also is there a version without window chrome, just panes?

mlajtos 2y ago
Instead of content, put there webview/iframe – https://github.com/mlajtos/mosaic https://github.com/mlajtos/mosaic
- crooked-v 2y ago
  After tinking with some similar toy projects, I feel like iframes with a well-defined APi to use with postMessage() (and maybe a small library to provide frame-internal matching toolbars/controls) are definitely the way to go here, since they remove the need to tightly couple your "OS" with your "apps".
  - mlajtos 2y ago
    What kind of apps?

samradelie 2y ago

Wow. Stellar work. The TS looks really proper on first glance. I think you're right on zeitgeist -- we're going to need a lot more fundamental tools like this to build AI apps. Technically speaking, I've long wondered about mount/unmount of components as panels are dragged about and their visibility changed. Sometimes it's more costly to mount/unmount than to display:none. Second, you have basically a declarative structure for these panels, are there plans to expose a Vite plugin for example that could export saved TS layouts, where functions (ie: TS imports) map to the panel contents? (trying to think outside of JSX and more vanilla TS) Fantastic work!

mathuo 2y ago
In terms of rendering modes both approaches are supported https://dockview.dev/docs/core/panels/rendering https://dockview.dev/docs/core/panels/rendering There are options to maintain the panels content within the DOM at all times (using an approach like you mentioned with display: none) and options to remove content from the DOM. In terms of vanilla TS the library is almost entire written in vanilla TS with small wrapper libraries for Vue and React. In theory wrappers could be written for other frameworks such as Angular (which is something I would like to get done this year) Loading and saving state is supported though https://dockview.dev/docs/core/state/save https://dockview.dev/docs/core/state/save Let me know if that answers the question
achierius 2y ago
I might have missed something -- how do AI apps come into this? Was this application written with AI, or for AI applications in particular? (I don't imagine it uses AI for the actual layout management or anything like that)
- v3ss0n 2y ago
  That's I am wondering too.. may be commenter itself is an AI?
- mathuo 2y ago
  no ai :) just a vanilla layout manager. I assume the above comment is by somebody building an ai project that could use a layout manager

diob 2y ago

How does this compare to golden layout? Inspired by it? I really enjoyed that project back in the day, but unfortunately support completely stopped (it had some folks take over, but I didn't see a real feasible upgrade path despite their passionate work on updating it). This looks great! I'd be interested in giving it a try.

mathuo 2y ago
golden layout is the OG JavaScript layout manager, used it for many years beforehand. Orginally yes it was inspired by some of the other layout managers, include golden layout. The main goal here was to have zero depenedencies and to be written in Vanilla TypeScript with wrapper libraries for frameworks such as Vue and React. Any feedback is appreicated, the website demo shows most of the current capabilities and there are many more planned in the Issues list.
joshribakoff 2y ago
I just tried using golden layout the other day. The demo on their website with react support is v1 and when I installed it, I got v2 which apparently drops react support and has no documentation or examples on the website. With v1, it only supported class based components. While in theory you could maintain your own adapter logic for golden layout, it seems somewhat defunct, there are other newer libs that may even have better feeling drag and drop like this one. I also recall about six years ago when I went to use Golden layout on another project I ended up implementing my own with vanilla type script because of some (perceived) issues with it. My experiences have always been that although it is ubiquitous it’s not that great.

peppertree 2y ago

Demo doesn't load in macOS Safari.

andix 2y ago
Same issue on iPadOS (18.3) Safari.
- mathuo 2y ago
  will take a look https://github.com/mathuo/dockview/issues/826 https://github.com/mathuo/dockview/issues/826
  - andix 2y ago
    Great. Sadly I can't provide any more details, I have no debugger connected to the iPad to investigate the issue, it's a bit tricky without a Mac.
    - ukuina 2y ago
      Try this? https://apps.apple.com/us/app/inspect-browser/id1203594958 https://apps.apple.com/us/app/inspect-browser/id1203594958
      - andix 2y ago
        I think there are also open source tools to get a Safari remote debugger working on Linux and Windows. I would prefer that over an app on the tiny iPad screen.
- mathuo 2y ago
  demo fixed on Safari. There is touch support for some the core features. https://dockview.dev/demo/ https://dockview.dev/demo/
mathuo 2y ago
demo fixed on Safari https://dockview.dev/demo/ https://dockview.dev/demo/

toastercat 2y ago

SEXY!

dahdum 2y ago

Kept getting this error when navigating: This page crashed Try again Right side of assignment cannot be destructured The video looks awesome, but I couldn’t get the demo to work using an iPad, so I assume mobile isn’t supported fully? I’d use it for my personal dashboard and for organizing llama.cpp chats if I could.

mathuo 2y ago
Most likely, touch devices are not officially supported however support is planed. Also the demo has some issues running on Safari which will be fixed.

Jonovono 2y ago

Looks awesome! I want something like this for managing Electron base windows & Web contents views :)

Onavo 2y ago

Do you plan to add touch device support? It doesn't work well on tablets and phones.

mathuo 2y ago
Yes, it's something that is planned. Currently some features work with touch inputs but not all of them. - https://github.com/mathuo/dockview/issues/696 https://github.com/mathuo/dockview/issues/696

mlajtos 2y ago

Safari can't handle the demo. https://dockview.dev/demo https://dockview.dev/demo

mathuo 2y ago
will take a look https://github.com/mathuo/dockview/issues/826 https://github.com/mathuo/dockview/issues/826
mathuo 2y ago
demo fixed on Safari https://dockview.dev/demo/ https://dockview.dev/demo/

mlajtos 2y ago

Time to rebuild Mosaic. https://github.com/mlajtos/mosaic https://github.com/mlajtos/mosaic

ofrzeta 2y ago
Did you never come across https://de.wikipedia.org/wiki/NCSA_Mosaic https://de.wikipedia.org/wiki/NCSA_Mosaic ? :)
- mlajtos 2y ago
  Never used it. https://github.com/mlajtos/mosaic/blob/master/DesignDecisions.md#mosaic https://github.com/mlajtos/mosaic/blob/master/DesignDecision...

bsnnkv 2y ago

I maintain a tiling wm written in Rust, and I just cannot imagine having the patience to do this kind of work in JS/TS. My respect to mathuo! One of the coolest things I've seen on HN recently.

mathuo 2y ago
Appreciated :)

low_tech_punk 2y ago

Looks like a very high quality library, great work! I wonder if it will eventually support auto truncating tab titles when the tabs fill up the horizontal space, just like how chrome display large number of tabs.

pdyc 2y ago

wow, very well thought out layout manager. I want to start a project just to use it :-) Is there a way to add gaps between the elements so it looks like a dashboard rather than panel?

mattlondon 2y ago

Brilliant. Is anyone aware of any sort of similar sort of zero-dep vanilla libraries for common desktop controls beyond what HTML offers? E.g. menus etc?

chris_st 2y ago
I use DaisyUI [0] for all kinds of controls; it's CSS only. 0: https://daisyui.com https://daisyui.com
f0ur 2y ago
another: https://bulma.io https://bulma.io

mathuo 2y ago

small issue on website preventing demo working on Safari browsers is now fixed. https://dockview.dev/demo/ https://dockview.dev/demo/

somytomy 2y ago

I literally have been working on something like this for a spare-time project, and am so glad to find this. Now I can throw out my code and move to the next stage of the project.

alluro2 2y ago

Dockview is phenomenal, and congrats to @mathuo on a great project - I've recently thoroughly tested 6-7 available libraries in this category, and dockview is certainly in the top. GH is also very active and well maintained. The only reason I in the end went with FlexLayout (https://github.com/caplin/FlexLayout https://github.com/caplin/FlexLayout) for a recent project was lack of support for predefined/restricted dimensions, - which was since added in a very good way - and that I really liked how FL handles side panels, with vertical tabs, and their predefined behavior. Looking very much forward to using Dockview in one of the next projects.

popcorncowboy 2y ago
Both look great. The aesthetics of FlexLayout's drag box are _really_ nice, and the vertical tab handling is such a good touch. Dockview looks like a strong contender though, and the HN effect on stars may well give it momentum to integrate the relatively small edges that FlexLayout enjoys.

urronglol 2y ago

[dead]

todotask 2y ago

I have a look at SonarSource website, their homepage looks awful.

qwertox 2y ago

Absolutely incredible! Everything is perfect. All dragging, resizing, moving, everything works without errors. Even nested panels...

T3RMINATED 2y ago

[dead]

MortyWaves 2y ago

Does this support disabling the ability to have floating popout windows?

gavmor 2y ago

Oh hell yeah, dude!

scrivna 2y ago

for people looking for a quick getting started to using dockview-core with vanilla javascript on a web page, see here... https://gist.github.com/scrivna/3186d73bc2680088748d752a9c9144cb https://gist.github.com/scrivna/3186d73bc2680088748d752a9c91...