Random Slides
A minimalist, browser-based slideshow application that allows you to create, edit, and play Markdown-based slides. It runs entirely in your browser with no backend required and persists your data locally.
Features
- Markdown Support: Write your slides using standard Markdown syntax.
- No Setup: Runs directly in the browser using modern web standardsβno build steps or installation required.
- Local Persistence: Your slides are automatically saved to your browser's local storage.
- Drag-and-Drop Reordering: Easily rearrange your slides by dragging the slide headers.
- Customizable Font Size: Set a base font size for the presentation mode (defaults to 256px for high visibility).
- Shuffle Mode: Present your slides in a randomized order for study or brainstorming.
- Keyboard Navigation: Simple controls for a focused presentation experience.
Quick Start
Running Locally
Since the app uses ES Modules, it needs to be served via a web server (rather than opened as a local file).
- Navigate to the project directory in your terminal.
-
Start a simple local server:
```bash
# If you have Python installed:
python3 -m http.server
Or if you have Node.js/npx:
npx serve .
``
3. Open your browser tohttp://localhost:8000` (or the port provided by your server).
How to Use
Edit Mode
- Adding Slides: Click the "+ Add Slide" button at the bottom.
- Editing Content: Type directly into the text boxes using Markdown.
- Reordering: Click and hold the header of a slide (where it says "Slide X") and drag it to a new position.
- Deleting: Click the "Delete" button on any slide card.
- Settings: Adjust the "Font Size" in the top header to change how large the text appears in Play Mode.
Play Mode
- Start Playing: Click "Play" for the standard order or "Shuffle Play" for a randomized order.
- Navigation:
- Click the mouse or press any key (except ESC) to advance to the next slide.
- Press ESC to exit Play Mode and return to the editor.
- Layout: Text is automatically centered both horizontally and vertically.
Technologies Used
- Preact (Lightweight React alternative)
- htm (JSX-like syntax for standard JavaScript)
- Marked (Markdown parsing)
- Standard Browser APIs (LocalStorage, Drag and Drop API, ES Modules)
License
MIT