Windows and the renderer
Build the notes interface
Create the semantic HTML shell for a note list, editor form, and status message in the renderer.
10 minute lesson
The renderer is a web page, so start with ordinary accessible HTML. Replace src/index.html with a small two-column interface:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self'"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Desktop Notes</title>
</head>
<body>
<main class="app-shell">
<aside>
<button id="new-note" type="button">New note</button>
<ul id="notes"></ul>
</aside>
<form id="editor">
<input id="title" aria-label="Title" required />
<textarea id="body" aria-label="Note" rows="16"></textarea>
<button type="submit">Save note</button>
</form>
</main>
<p id="status" role="status"></p>
</body>
</html>The Webpack template injects the renderer bundle, so keep the generated script integration instead if your current template includes an explicit entry.
The form works with a keyboard and the status message can announce save results. Add visible labels if the design later hides the purpose of either field; aria-label is not a substitute for clear visual text.
The content security policy allows only local scripts and styles. That means no inline <script>, inline event attribute, or remote stylesheet. Keep renderer code in the bundled entry instead of weakening script-src to fix an error.
At this point the interface has no desktop authority. Buttons can change DOM state, but they cannot read a file or open a native dialog. That is the boundary we want.
Use the keyboard to reach every control. Submit an empty title and confirm the browser’s required-field behavior appears before adding custom validation.
Lesson completed