B6+ Slide Editor
A WYSIWYG editor for HTML slide decks built with Electron and Squire RTE.
Features
- WYSIWYG editing: Edit slides visually using Squire rich text editor
- HTML source view: Toggle between visual and HTML source editing modes
- Speaker notes: Add speaker notes sections to slides
- External CSS: Link to external CSS stylesheets for slide styling
- Custom CSS: Add additional CSS rules to override or complement external styles
- Slide management: Add, delete, and navigate between slides easily
- File operations: Open, save, and create new slide decks
- Play mode: Preview slides in browser with b6+ presentation mode
- Thumbnail previews: Visual thumbnails of all slides in the sidebar
- Online slides: Edit slides directly on the web (requires a server with HTTP PUT)
Pre-built installers
Installation
If not using a pre-built binary, clone or fork the repository and then:
-
Make sure you have Node.js installed (version 16 or higher recommended)
- Navigate to the project directory:
- Install dependencies (this will also copy html2canvas.js and DOMPurify to the src directory):
Running the application
You can also open a file directly from the command line:
npm start path/to/slides.html
Or if you installed a pre-built binary:
b6plus-slide-editor path/to/slides.html
Opening files
There are several ways to open a slide deck:
- File menu – File → Open… (Cmd/Ctrl+O)
- Command line – Pass the file path as an argument when starting the app
- Drag and drop – Drag an HTML file onto the application window
- Double-click – Associate .html files with the app and double-click
Building for distribution
Installers will be in the dist/ directory.
To generate or update the installers:
# Build for your current platform
npm run dist
# Or build for specific platforms
npm run dist:mac # macOS
npm run dist:win # Windows
npm run dist:linux # Linux
Usage
Creating slides
- Click “➕ Add Slide” to add a new slide
- Click “📝 Add Notes” to add speaker notes for the current slide
- Use the WYSIWYG editor to format your content
- Click “🗑️ Delete” to remove the current slide
Editing content
- WYSIWYG Mode: Use the visual editor to format text, add lists, etc.
- HTML Mode: Click “🔄 HTML View” to edit raw HTML source
- Switch between modes as needed - content is preserved
Styling slides
- External CSS:
- Enter a CSS URL in the “CSS URL” field
- Or click “📁” to browse for a local CSS file
- Click “Apply” to apply the stylesheet
- Custom CSS:
- Click “✏️ Custom CSS” to open the CSS editor
- Add your custom CSS rules
- Click “Save” to apply
File operations
- New File: File → New (Ctrl/Cmd+N)
- Open File: File → Open (Ctrl/Cmd+O)
- Save: File → Save (Ctrl/Cmd+S)
- Save As: File → Save As (Ctrl/Cmd+Shift+S)
The editor creates HTML files with the following structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="path/to/styles.css">
<style>
/* Custom CSS rules */
</style>
</head>
<body>
<section class="slide">
<!-- Slide content -->
</section>
<section class="comment">
<!-- Speaker notes -->
</section>
<!-- More slides... -->
</body>
</html>
Slide types
<section class="slide">: Regular slide content<section class="comment">: Speaker notes associated with the previous slide
Keyboard shortcuts
- Ctrl/Cmd+N: New file
- Ctrl/Cmd+O: Open file
- Ctrl/Cmd+S: Save file
- Ctrl/Cmd+Shift+S: Save file as
- Ctrl/Cmd+Z: Undo (in editor)
- Ctrl/Cmd+Y or Ctrl/Cmd+Shift+Z: Redo (in editor)
Technical details
Built with
- Electron: Cross-platform desktop application framework
- Squire RTE: Rich text editor library
- html2canvas: For generating slide thumbnails
Architecture
- Main process (
main.js): Electron main process handling file I/O and menus
- Preload script (
preload.js): Secure IPC bridge between main and renderer
- Renderer process (
editor.js): Application logic and Squire integration
- Iframe isolation: Slides are edited inside an iframe to prevent style conflicts
Development
To open DevTools for debugging:
- View → Toggle DevTools (Ctrl/Cmd+Shift+I)
License
W3C