Skip to content

asaboor-gh/ipyslides

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

IPySlides

DOI Binder PyPI version Downloads

IPySlides is a Python library for creating interactive presentations in Jupyter notebooks. It combines the power of Markdown, LaTeX, interactive widgets, and live variable updates in a single presentation framework.


Features

  • ๐Ÿ“Š Support for plots, widgets, and rich media
  • ๐ŸŽจ Customizable themes and layouts
  • ๐Ÿ“ฑ Responsive design for various screen sizes
  • ๐Ÿ“ค Export to HTML/PDF (limited content type)
  • ๐ŸŽฏ Frame-by-frame animations
  • ๐Ÿ“ Speaker notes support
  • ๐Ÿ”„ Markdown, citations and settings files synchronization
  • โœ๏ธ Drawing support during presentations

Quick Start

  1. Install:
pip install ipyslides        # Basic installation
pip install ipyslides[extra] # Full features
  1. Create Slides:
import ipyslides as isd
slides = isd.Slides()

# Add content programmatically
slides.build(-1, """
# My First Slide
- Point 1
- Point 2
$E = mc^2$
""")

# Or use cell magic
%%slide 0
# Title Slide
Welcome to IPySlides!
  1. Run Examples:
slides.docs()  # View documentation
slides.demo()  # See demo presentation

โœจ Try it in your browser โœจ

Jupyterlite Binder
Binder

Content Types

Support for various content types including:

  • ๐Ÿ“œ Extended Markdown, see slides.xmd_syntax
  • ๐Ÿ“Š Plots (Matplotlib, Plotly, Altair)
  • ๐Ÿ”ง Interactive Widgets
  • ๐Ÿ“ท Images and Media
  • โž— LaTeX Equations
  • ยฉ๏ธ Citations and References
  • ๐Ÿ’ป Auto update variables in markdown
  • ๐ŸŽฅ Videos (YouTube, local)
  • ๐ŸŽฎ Enhanced interactive widgets (with fullscreen support, thanks to anywidget)
import numpy as np
from ipywidgets import HTML

@slides.dl.interact(html = HTML(), amplitude= (0, 2),frequency=(0, 5))
def plot(html, amplitude, frequency):
    x = np.linspace(0, 2*np.pi, 100)
    y = amplitude * np.sin(frequency    * x)
    plt.plot(x, y)
    html.value = slides.plt2html(). value
  • For comprehensive dashbords, subclass DashboardBase or use Dashboard from ipyslides.dashlab:
import numpy as np
import matplotlib.pyplot as plt
from ipywidgets import HTML
from ipyslides.dashlab import Dashboard

dash = Dashboard(
    html = HTML(),
    amplitude = (0, 2),
    frequency = (0, 5),
)

@dash.callback
def plot(self, html, amplitude, frequency):
    x = np.linspace(0, 2*np.pi, 100)
    y = amplitude * np.sin(frequency * x)
    plt.plot(x, y)
    html.value = slides.plt2html().value # can be directly shown on out-main

@dash.callback('out-text')
def text(self, amplitude, frequency):
    print(f"Amplitude: {amplitude}\n Frequency: {frequency}")

dash.set_layout( 
    left_sidebar = ['*ctrl'], # all controls in left sidebar 
    center = ['html','out-.*'], # out-main, out-text collected in center
    pane_widths = [3,5,0]
)
dash.set_css(
    main = { # can also be set via post_init callback
        'grid-gap': '4px', 'margin': '8px',
        '.left-sidebar': {'background': '#eee','border-radius': '8px'},
    },
    center = { # can be set in main through '> .center' selector
        '> *': {'background-color': 'whitesmoke', 'border-radius': '8px','padding':'8px'},
        'grid-template-columns': '5fr 3fr', # side-by-side layout for outputs
        'grid-gap': '4px', # central grid gap
        '> *': {'background-color': 'whitesmoke', 'border-radius': '8px','padding':'8px'}
})
display(dash)

Dashboard Example See more examples in DashLab repository and try it out in

  • And much more!

Export Options

  • HTML Export
    Use slides.export_html to build static slides that you can print to PDF. Read export details in settings panel, where you can also export with a single click.

  • PDF Export Experimental support for direct PDF printing from slides using Ctrl + P or Ctrl + Alt + P (merged frames) is available. Use Save as PDF option and enable background graphics if necessary. If issues arise in direct printing, consider exporting to HTML first and printing from there.

Navigate to Documentation to see HTML slides which you can print to PDF.


Advanced Features

  • Custom Objects Serialization:

    • You can serialize custom objects to HTML using Slides.serializer API.
    • You can extend markdown syntax using Slides.extender API. See some good extensions to add from PyMdown.
  • Speaker Notes: Enable via Settings Panel โ†’ Show Notes and add notes via slides.notes.

  • Custom Styling:

slides.set_css({ # on all slides or slide[index,].set_css() per slide
    'p': {'font-size':'1.2em', 'line-height':'1.5em'}, # relaxed paragraph
}, bg1 = '#f0f0f0') # set theme color on this slide
  • File Sync: Live edit a linked markdown file that updates slides in real-time using slides.sync_with_file.

Caveats

  1. Markdown Cells:

    • Jupyter markdown cells are not processed by IPySlides
    • Instead, you can use %%slide number -m cell magic and link an external markdown file using slides.sync_with_file
  2. Slide Numbering:

    • Use -1 for automatic slide numbering
    • Manual numbering requires careful tracking to avoid overwriting slides
  3. Speaker Notes:

    • Experimental feature - use with caution

Development

git clone https://github.com/asaboor-gh/ipyslides.git
cd ipyslides
pip install -e .

Contributing

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


Documentation

Acknowledgements


Made with โค๏ธ by Abdul Saboor

About

Create Interactive Slides in Jupyter Notebook with all kind of rich content. https://asaboor-gh.github.io/ipyslides/

Resources

License

Stars

Watchers

Forks

Packages

No packages published