Different layout?


Are there any plans for different layouts? I personally find the current layout to be very limiting and confusing, it constantly compresses the look and the pages, not literally but visually.

I do not have anything in mind but I am wondering what the alternatives could be? Maybe a mix of horizontal and vertical panes can be a better soltuion.

One other issue is that the panes are not resizable and moveable. I wish I could rearrange the layout look a abit.


I also find it confusing. The Note book and Notes panels take way too much screen space

Yes, making the panels resizable is planned.

1 Like

I think a simple reorganising would at least be a beginning. In the mock-up I have got rid off the two left-most panels and piled them vertically:

Now I can see everything, when the window is sized to A4, and yet have workspace for the text.

Hi everybody,

I'm just in the process of switching from Evernote to Joplin and I feel like I'm here to stay :slight_smile: awesome product so far. I agree that it would be awesome to have a layout like in the mock-up of @J-Metsis, or at least something similar like a fullscreen composer, as in discourse.

As it's already possible to switch views and hide either the editing or the viewing panel, I was wondering how much work it would be to also just hide the two panels on the left?

As I plan to stay here, I'd also like to contribute somehow, but I'm also very new to coding and won't be able to make any substantial contribution as of yet. I've only played around with customizing the Slack desktop client, using CSS in one of the .js files to give it a dark theme look (as described here e.g. --text only seems to apply to navigation · Issue #39 · widget-/slack-black-theme · GitHub).

So from my so far limited understanding, it might be possible to also hide the two panels by using CSS?
Could something similar be done with Joplin? I had a look at the repository and had no clue where I would even be starting to look for a place where I could experiment with that a bit more.

Anybody has any ideas and suggestions, or if it's even possible at all?

All the best and thanks again for the great app :heart:
Stefan :slightly_smiling_face:

1 Like

Hi @SHilser and welcome here!

Hiding the two panels on the left will be more complicated than just changing the CSS because it would need to be done in a dynamic way.

If you wanted to take a look at it, the first step would be to check the “Toggle sidebar” button (basically search for this string in the code) as it almost does what you want. Instead of just hiding the sidebar, you would tweak it to hide the note list too. I suppose you could simply copy and tweak the logic of this button to create a new button “Toggle note list” next to it.

The difficulty might be that you need to make yourself familiar with React and Redux to make sense of it. In particular you’ll see that this button dispatches an action. That action is then received by the reducer, which uses this to change the application state. The application state is then read by React to update its components. It’s basically a one way flow: Action -> Reducer -> View (React)

And of course you’ll also need to build the app (check BUILD.md for this). I’m not sure if what you want to do is the easiest but if you give it a try and get stuck feel free to ask here.

1 Like

Ok sounds more difficult than what I imagined and a bit intimidating at first :sweat_smile:
I started searching for "toggle sidebar" it in the code. Am I seeing this correct, that I would only have to tinker with two files then?

  • joplin/ElectronClient/app/gui/MainScreen.jsx and
  • joplin/ElectronClient/app/app.js

If that's the case, I might give it a try at some point and see what happens. I'll probably come back to you on how the building process (Windows) actually works, as I didn't quite understand this yet.

And thanks for the quick answer

I had a quick look and it's a lot more than two files. You basically need to follow the flow I mentioned, but indeed that might be too complicated to start with that.

Ok, thanks again for the effort. In this case, this will probably become a mid to long term thing that I might come back to at some point in the future.

Wanted to bump this up. Let me know if I’m missing something in the configuration, but it would be great to have the notebooks and notes be a dropdown menu that was dynamic. I take notes in zoom sessions and while watching recorded videos. So I squeeze the size of the note window down to 1/4 or 1/5 of the screen width, and keep it on the right side of the screen. This allows me to take notes and not miss anything in the video. But when I need to change notes, I need to widen the Joplin window, then toggle the notebooks and notes section, select the note, then collapse them again, then resize the window again. The search capability is great. But it doesn’t always pull up the correct note. So having a dropdown notebook and note finder would be a game changer.

Even better would be keeping Joplin as a tab on the right or left of the screen, then when mouse over the tab, Joplin expands out for quick note taking. That, and dynamic dropdown of notebook and notes would make Joplin always on, always available, but never in the way.

If someone knows of a way to accomplish this functionality at present, please let me know. Otherwise, it’s a humble feature request from a grateful user.

An intermediary step to dynamic dropdown menu of notebooks and notes, is to expand the window when toggling notebooks and notes, thus keeping the actual code view note pane the same size. Then you can toggle to open and find a new note, then toggle to close without having to resize the code view window.