Welcome to the heart of your Electron application's visual presentation: HTML. Just as you've used HTML to structure web pages, you'll use it here to define the layout and content of your desktop application's windows. Electron's renderer process leverages standard web technologies, meaning your existing HTML knowledge is directly applicable. We'll explore how to create basic HTML structures and integrate them seamlessly into your Electron apps.
Think of your Electron window's HTML file as the blueprint for its appearance. It dictates where elements like buttons, text fields, images, and other interactive components will be placed. The browser engine within Electron (Chromium) interprets this HTML to render the user interface.
Let's start with a very basic HTML structure. This is similar to what you'd find in any standard HTML document. We'll include the essential elements like <!DOCTYPE>, <html>, <head>, and <body>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Electron App</title>
</head>
<body>
<h1>Hello, Electron!</h1>
<p>This is a simple desktop application.</p>
</body>
</html>In this simple example:
<!DOCTYPE html>: Declares the document type and version of HTML.<html lang="en">: The root element of the HTML page, specifying the language.<head>: Contains meta-information about the HTML document, such as character set, viewport settings, and the title that appears in the browser tab (or in this case, the window title bar if configured).<body>: Contains the visible page content, including headings, paragraphs, and any other elements you want to display to the user.
When building an Electron app, you'll typically have a main process that handles the application's lifecycle and native interactions, and one or more renderer processes that are essentially web pages running within the app. Each renderer process will load an HTML file to display its UI.
graph TD
A[Main Process] --> B(Create BrowserWindow)
B --> C{BrowserWindow Instance}
C --> D(Load HTML File)