Masayo

A modern, minimalist slide presentation tool powered by simple configuration files.

Features

• Config-driven: Define your entire presentation in a simple JavaScript/JSON configuration
• Flexible layouts: Single-content slides or split layouts (horizontal/vertical)
• Multiple split ratios: 50/50, 25/75, or 75/25 splits
• Text and images: Support for both text content and images
• Presenter notes: Console-based hints and notes system
• Keyboard navigation: Arrow keys, spacebar, Home/End support
• Smooth animations: Modern CSS transitions between slides
• Responsive design: Works on different screen sizes
• Accessible: ARIA labels and keyboard-friendly
• Modern tech stack: ES6+ modules, Vite build system, CSS variables

Quick Start

Installation

# Clone the repository
git clone https://github.com/faso/masayo.git
cd masayo

# Install dependencies
npm install

# Start development server
npm run dev

Building for Production

npm run build

The optimized files will be in the dist/ directory.

Usage

Configuring Your Presentation

Edit src/config.js to define your slides:

export const config = [
    {
        type: 'single',
        content: {
            type: 'text',
            value: 'Your slide content here'
        }
    },
    {
        type: 'split',
        orientation: 'horizontal',
        split: '50/50',
        content: [
            {
                type: 'text',
                value: 'Left side'
            },
            {
                type: 'image',
                value: '/your-image.jpg'
            }
        ]
    }
];

Slide Configuration Options

Slide Types

• single: Full-width content
• split: Split into two sections

Content Types

• text: Text content

  { type: 'text', value: 'Your text here' }

• image: Image from the public folder

  { type: 'image', value: '/image.jpg', alt: 'Optional description' }

Split Options

When using type: 'split', you can specify:

• orientation: 'horizontal' or 'vertical'
• split: '50/50', '25/75', or '75/25'

Presenter Hints

Add a hint property to any slide for presenter notes:

{
    type: 'single',
    content: { type: 'text', value: 'Slide content' },
    hint: 'Remember to mention the key points here!'
}

Hints appear in the browser console (F12) during your presentation.

Keyboard Controls

• Arrow Left/Up: Previous slide
• Arrow Right/Down: Next slide
• Spacebar: Next slide
• Home: First slide
• End: Last slide

Adding Images

Place your images in the public/ folder and reference them with a leading slash:

{
    type: 'image',
    value: '/my-image.jpg'
}

Project Structure

masayo/
├── public/              # Static assets (images, etc.)
├── src/
│   ├── config.js       # Your presentation configuration
│   ├── main.js         # Application entry point
│   ├── slideNavigation.js  # Navigation logic
│   ├── slideRenderer.js    # Slide rendering
│   └── styles.css      # Styles
├── index.html          # HTML template
├── package.json        # Dependencies and scripts
└── README.md          # This file

Customization

Theming

Edit CSS variables in src/styles.css:

:root {
    --font-family: 'Jost', sans-serif;
    --font-size-base: clamp(1.5rem, 4vw, 3rem);
    --slide-bg: #ffffff;
    --text-color: #000000;
    --transition-speed: 0.3s;
}

Loading External Configs

You can load configurations from external JSON files:

// In src/main.js, replace the import with:
const response = await fetch('/presentation.json');
const config = await response.json();

Tips for Presenting

1. Dual Screen Setup:

   • Open your presentation on the main screen
   • Detach the browser console (F12) and move it to a secondary screen
   • You'll see presenter notes and the next slide preview

2. Fullscreen Mode: Press F11 for fullscreen presentation

3. Practice Mode: Navigate through your presentation with the console open to see all hints

Browser Support

Masayo works in all modern browsers that support:

• ES6 modules
• CSS Grid and Flexbox
• CSS custom properties (variables)

Migration from v1.x

The original Reader/index.html has been modernized with:

• Separate module files for better organization
• Modern ES6+ syntax
• Improved accessibility
• CSS variables for easy theming
• Better keyboard navigation (added spacebar, Home, End)
• Smooth animations
• Development server with hot reload

Your old configs can be migrated by copying the config array to src/config.js.

Development

# Start dev server with hot reload
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Credits

Created by faso