TUTORIAL - Electron JS - Custom Title Bar / Frameless Window - IPC Main/IPC Renderer - MODERN GUI
Вставка
- Опубліковано 9 лют 2025
- Hi guys,
After many requests on how to create a custom title bar for Electron JS here on the channel I decided to record for you.
This video focused on the logical part, the HTML and CSS interface part will not be aborted, because have a large amount of content that exists on the internet on this subject. Another problem is that for CSS and HTML it is necessary to write a lot of code, which makes the tutuorial have more than an hour.
I am using FLEX CSS to align the interface.
SOURCE CODE:
The source code for this project is available to Patreon supporters:
🔗 Patreon: N/A
TOOLS:
Electron JS with Node JS
Visual Studio Code and Inkscape for drawing icons.
-----
//// DONATE ////
🔗 Donate (Gumroad): gum.co/mHsRC
//// PATREON ////
🔗 Patreon: / wandersonismyname
//// DISCORD ////
🔗 Discord: / discord
Subscribe to not miss any news from the channel.
See you in the next videos.
-----------------------------
Feather by Waywell / waywell
Creative Commons - Attribution-ShareAlike 3.0 Unported - CC BY-SA 3.0
Free Download / Stream: bit.ly/_feather
Music promoted by Audio Library • Feather - Waywell (No ...
-----------------------------
It's worth pointing out (so others don't struggle like me) that the region where "-webkit-app-region: drag;" is applied will have its mouse events disabled. So if you have CSS for some hover effect in that region - the hover effect won't trigger
So minimize, maximize and close button (child elements) should get "-webkit-app-region: no-drag;"
so you editing code for electron by using vscode made by electron
who was first electron or vscode?
@@Roommate6 vscode was made in electron
@@Roommate6atom
Goood Thank you! I allready give up with IPC and do it on another way but know i need IPC again and i found your video and know it works.
Your tutorials help my life. Thank you so much!
Best teacher in this world 🔥🔥🔥
Thank you very much for this, worked first time! Saved me a lot of hassle
you are the gui king
Please add more content of Electron JS. The best channel! thank you
Quando vi a notificação em portugues pensei:
"Algo de errado não está certo" kkkkk
Thank u for this great video. Lot of useful stuff really needed it
This is massive. Thanks. You are master of desktop development :)
Please make a video about how you record this video. What tools, setup, apps, mic, recorders you use? Pls, include all of them.
great work! we need more electron js content
Setting contextIsolation to false is a security risk. So is setting nodeIntegration to true. If you're only loading local content, it's no problem, but if you load any remote content, you're asking for trouble.
The issue with this is that context isolation set to false is not a recommended approach.
I have a job interview coming up soon that needs me to create a mock-up, I'll let you know what happens!
wow, sangat jelas. video yang ditampilkan. terimakasih banyak
this is the best tutorial,, I have learned something
How to get the 3 Icons (close, maximize, minimize?)
Hi. Great video! One question: Why "-webkit-app-region: drag;" is not showing to me when I type?
When i remove frame i can no longer move the GUI whats the issue? i may havemissed the fix?
so I'm getting this error:
Uncaught error require is not defined
so appearently you can't the browser can't require modules but node.js can do that
which step did i miss?
Thank's you so much!
Thank you very much! I have entered afternoon looking how can I do a customized window in electron!, Thank you very much again
How make circular bar? Thank you so much.
This is awesome!
Hi there. Any ideas on how to fix the window not resizing? Been bugging me for ages, and can't find a fix anywhere.
thank you so much ❤️
este tutorial vale oro
Is there a way I can make the app Electron JS examination App. That prevents users from opening any other window while the online examination process is going on.The user is allowed to access only the examination window?
Works fine
Glad to hear this technique is still working in 2022
thank you bro
So you explicitly go against the security recommendation of nodeIntegration: false and contextIsolation: true? God I wish there were something better....
browser preview doesn't work for me just because i have so many extensions
Thank you for this wonderful video! Question though, how would I add content (i.e links) into the sidebar? (left menu one)
I suppose it would be in the index.html file. It would be just like a regular web app (i,e using nav, ul and li elements). If you want to load different views on click of it. Consider adding routes just like a regular web application, as a end user it would not be visible but the web container keeps track of this and loads different views
já tentei procurar bastante até em cursos pagos e nao encontro como deixar a area clara (do lado da barra lateral) a ser a app principal, ou seja a app principal a rodar toda na area clara e mantendo a barra de titulo e barra lateral sem carregar novamente
Estou me matando tentando encontrar uma forma de conseguir fazer isso haha. Já se passou 1 ano, vc desistiu ou conseguiu resolver? Como?
Great content! Do you think you could make a video on how to do this with an already existing website? (Using LoadURL instead of loading files locally?)
Hey! Could you make a video explaining preload.js functionality? Tried to read the docs but it wasn't so clear for me.
There's not enough info about it!
Thanks for the content!
Thank you so match my friend this help me a lot
like and subscribe for you
Thank you very much 😀
Thanks
Como se tornou fluente em se comunicar em inglês? foi devido a algum curso ou foi sozinho?
Fala Anderson, infelizmente eu não sou fluente ainda e preciso melhorar muito. Essa voz é de uma API da Microsoft do qual fiz um APP para traduzir os textos em voz. Meu inglês infeliz ainda precisa melhorar muito.
@@WandersonItsMe que maneiro ficou isso, poderia fazer um conteúdo sobre isso, seria muito legal, possuo um canal que foco em gerar conteúdo também em inglês geralmente sobre HTML, CSS, JS, porém os vídeos tem apenas músicas de fundo pois não sei conversar em inglês ainda, isso me ajudaria bastante hahaha
Still good in 2024
which do you think is better for desktop GUI, python + qt or electron.js?
Electron ++++, haha. Python is not very stable for Qt 😢, but with C++ is a good option. Electron have, Discord, VS Code, Skype, Atom and much more another moderns apps.
@@WandersonItsMe ohh, What exactly do you mean, it's not very stable? don't you recommend python + qt (pyside + qwidgets or pyside + qml)?
Any plans on a python with react app tutorial?
Not at the moment, I haven't studied React yet
great tutorial, but would be better without the music, i have my own playlist
Ok
Any video just to explain link between python and qt quick, pyside, to explain it more please because I couldn't go forward using python wit qt
See this videos(10, 11 and 12): ua-cam.com/video/BSMm2_2COT4/v-deo.html
ua-cam.com/video/DYvS4m25-wU/v-deo.html
@@WandersonItsMe I don't know how to thank you, your efforts are appreciated ❤️🌹🌹🌹
Do you make the music by yourself? I all ways hear the tune. Good music tho
It wasn't me, it has the credits in the video description 😁
Nice
PLEASE, make these kind of cool videos in Qt Designer, i really want them, there is no one that makes videos about PyQt5 like yours, so please, make some...
tem versão em português?
anyone else watch this and go F it, I'm shipping my product with the fugly default bar lol 😆
Great, but if I already had configured my own menubar, then how do I maintain accessibility to it?? :-s No custom-titlebar tutorial explains this ;-(
9:17
The audio is so incredibly tacky.
💩
Npm extension didn't make a "npm scripts" tab :
you need to enable it by clicking on the three dots button next to explorer
Machine voice?
Microsoft Azure Text To Speech API
@@WandersonItsMe👍
Nuce
Thank you. But make it free (:
like
Your music is very very annoying... its just not needed
Ok 😅🤣
@@WandersonItsMe I love the song, surely pump me up to keep going, nice tutorial please mooore!!! Thanks so much.
By the way I could not manage to get the side menu to appear, for some reason the BG collor only pops up when I put some content on it. Looking around to see if I can figure it ou, so far code is the same as yours.
Nice