Menu
I'm trying to create an Electron app that has multiple "pages".
In my case, I'm trying to make an app with a sidebar that has different sections. Once a section is clicked, the main window's content changes to render the appropriate content for the section.
I'm new to JS so sorry if this is a dumb question, but as of now, whenever I try to go to a section of the app, I get a white-flash screen for a second before everything loads again.
Example: https://i.sstatic.net/weWWA.gif
I know this has to do with Electron reloading the Chrome engine, but how can I make it so when a section is clicked, the content is displayed automatically without any "flashes" or weird things?
Basically: how can I build a GUI with lots of components using Electron?
My code for my index.html is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Rupture Tools</title>
<link rel="stylesheet" href="./photon/css/photon.min.css">
</head>
<body>
<div class="window">
<div class="window-content">
<div class="pane-group">
<div class="pane-sm sidebar">
<nav class="nav-group">
<h5 class="nav-group-title">1 Click Generator</h5>
<a class="nav-group-item active">
<span class="icon icon-home"></span>
Dashboard
</a>
<a href="accounts.html">
<span class="nav-group-item">
<span class="icon icon-user-add"></span>
Accounts
</span>
</a>
<span class="nav-group-item">
<span class="icon icon-cloud-thunder"></span>
Activity
</span>
<span class="nav-group-item">
<span class="icon icon-check"></span>
Check Scores
</span>
<span class="nav-group-item">
<span class="icon icon-cog"></span>
Settings
</span>
<span class="nav-group-item">
<span class="icon icon-help-circled"></span>
Help/FAQ
</span>
</nav>
</div>
<div class="pane">Home</div>
</div>
</div>
</div>
</body>
</html>Please help! I'm clueless at this, been searching everywhere. I come from Python where there isn't much of any front-end development or GUI designing. Thanks!
There is "sort of" a solution here, but it uses something called Sass and as far as I know using something like React or Angular is better. I've never used either of those.
444
asked Dec 30 '25 18:12
Electron apps are very similar to web apps. The traditional way of navigating between HTML documents doesn't work well for apps as you noticed. That's why web apps are developed as single-page applications (SPA) nowadays. It simply means loading and replacing parts of the page manually using JavaScript when the user navigates. There are several ways to implement this, but here's an example how it could be done for your code:
// Get all the navigation links to an array
const naviLinks = Array.from(document.getElementsByClassName("nav-group-item"));
const contentEl = document.getElementsByClassName("pane")[0];
naviLinks.forEach((linkEl) => {
// Listen click event for the navigation link
linkEl.addEventListener("click", e => {
// Prevent default behavior for the click-event
e.preventDefault();
// Get the path to page content file
const href = linkEl.getAttribute("href");
if (href) {
// Use node.js fs-module to read the file
const fs = require("fs");
fs.readFile(href, (err, data) => {
if (err) {
throw err;
}
// show the selected page
contentEl.innerHTML = "";
contentEl.insertAdjacentHTML("beforeend", data);
})
}
})
})
Note that the page content HTML files (accounts.html etc.) should only have the content for the "pane" div. You also need to pass nodeIntegration:true when creating your BrowserWindow-object in the main-process, so you can use require to load the fs-module:
new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
}
If the page content files are large, navigation may seem slow, because files are read and pages are rendered on every click. One optimization to help with that is to read files and create page elements off-screen already at page load and then just swap the elements on click-events. Alternatively you could put the page contents in <template>-elements and swap them. I'll leave these for you to try out by yourself, if you're interested.
There are loads of JavaScript frameworks that can help you with creating SPAs. Some popular ones at the moment are React, Angular and Vue. "How can I build a GUI with lots of components?" is one of the questions front-end JavaScript frameworks can answer, but there's of course a learning curve. When you feel the need to start splitting your GUI into reusable or hierarchical components, it's probably a good idea to look into those JavaScript frameworks.
109
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
