Interactive Slides in IPython Notebook. Only one instance can exist. settings are passed to Slides.settings() if you like to set during initialization. You can also edit file .ipyslides-assets/settings.json to make settings persistent across sessions and load/sync them via GUI in sidepanel.

To suppress unwanted print from other libraries/functions, use:

with slides.suppress_stdout():
    some_function_that_prints() # This will not be printed
    print('This will not be printed either')
    display('Something') # This will be printed
        

Create a link to jump to another slide. Use label for link text and back_label for the optional text on the target slide if need to jump back.

• Use link.origin to create a link to jump to target slide where link.target is placed.
• If back_label was provided, link.target will be able to jump back to the link.origin.
• In makdown, you can use created link as variables like %{link.origin} and %{link.target} to display links.
• Use similar links in markdown as <link:[unique id here]:origin label> and <link:[unique id here same as origin]:target [back_label,optional]>.
• In markdown, icons can be passed in label as "fa`arrow` label text".

Build slides with a single unified command in three ways:

1. slides.build(number, callable) to create a slide from a callable(slide) immediately, e.g. lambda s: slides.write(1,2,3) or as a decorator.
   • Docstring of callable (if any) is parsed as markdown before calling function.
2. with slides.build(number): creates single slide. Equivalent to %%slide number magic.
   • Use fsep() from top import or Slides.fsep() to split content into frames.
   • Use for item in fsep.iter(iterable): block to automatically add frame separator.
   • Use fsep(True) / fsep.iter(...,stack=True) to join content of frames incrementally.
3. slides.build(number, str | fmt) creates many slides with markdown content. Equivalent to %%slide number -m magic in case of one slide.
   • Frames separator is double dashes -- and slides separator is triple dashes ---. Same applies to Slides.sync_with_file too.
   • Use %++ to join content of frames incrementally.
   • Markdown multicol before -- creates incremental columns if %++ is provided.
   • See slides.xmd.syntax for extended markdown usage.
   • To debug markdown content, use EOF on its own line to keep editing and clearing errors. Same applies to Slides.sync_with_file too.
   • In case of str input, varaiables such as %{var} can be updated by creating/updating var in notebook.
   • In case of fmt(str, **kwargs), varaiables are picked from kwargs or local scope and can't be changed later. Useful in python scripts.

Auto update slides when content of markdown file changes. You can stop syncing using Slides.unsync function. interval is in milliseconds, 500 ms default. Read Slides.build docs about content of file.

The variables inserted in file content are used from top scope.

You can add files inside linked file using include\`file_path.md\` syntax, which are also watched for changes. This helps modularity of content, and even you can link a citation file in markdown format as shown below. Read more in Slides.xmd.syntax about it.

```citations footnote
@key1: Saboor et. al., 2025
@key2: A citations can span multiple lines, but key should start on new line
<!-- Or put this content in a file 'bib.md' and then inside citations block use include`bib.md` -->
```
        

Set yoffset (in percent) for frames to have equal height in incremental content. Set global yoffset in layout settings.

Set animation of this slide. Provide None if need to stop animation. Use main and frame to set animation to all slides.

Adds background image to this slide. src can be a url or a local image path or an svg str. filter is a CSS filter like blur(5px), grayscale() etc.

Update display of this slides including reloading citations, widgets etc.

Return source code of this slide, markdwon or python or None if no source exists. kwargs are passed to Slides.code.from_string.

Show this slide in cell.

Attributes at the root level of the dictionary are only picked if they are related to background. Each call will reset previous call if props given explicitly, otherwise not.

Add notes to current slide. Content could be any object except javascript and interactive widgets.

Create highlighted source code object from text, file or callable.

Use code(obj) or code.cast(obj) to get source code from any object that has a source or str of code.

Explicitly use:

• code.from_file(filename) to get a source object from a file or file-like object.
• code.from_string(string) to get a source object from a string.
• code.from_source(obj) to get a source object from a python object (class, function, module, method etc.).

Returns: SourceCode object with show_lines and focus_lines methods to show selective lines, as well as .inline property.

Execute and displays source code in the context manager. kwargs are passed to Slides.code function. Useful when source is written inside context manager itself. If returns is False (by default), then source is displayed before the output of code. Otherwise you can assign the source to a variable and display it later anywhere.

Usage:

with source.context(returns = True) as s: 
    do_something()
    write(s) # or s.display(), write(s)

#s.raw, s.value are accesible attributes.
#s.focus_lines, s.show_lines are methods that are used to show selective lines.
        

Returns source object with show_lines and focus_lines methods. name is alternate used name for language.
kwargs are passed to Slides.code.

It tries to auto detect lanaguage from filename extension, if language is not given.

Returns source code from a given obj [class,function,module,method etc.] with show_lines and focus_lines methods. kwargs are passed to Slides.code

Creates source object from string. name is alternate used name for language. kwargs are passed to Slides.code.

Apply settings to slides programatically. Fewer settings are available as widgets.

Settings can be nested or individual attributes as set as well. For example:

Slides.settings(layout = {"aspect": 16/10}) # Top 
Slides.settings.layout(aspect = 16/10) # Individual
Slides.settings.layout.aspect = 16/10  # Attribute
        

All settings calls including top level returns settings instance to apply method chaining. e.g. Slides.settings.layout(aspect = 16/10).footer(text="ABC").logo(...).

Set code block styles. background and color may be needed for some styles.

Dump the settings state to a json file. Use it once you have finalized a settings setup of slides.

Set fonts of text and code and size.

Set footer attributes of slides.

Set layout of slides.

Load settings from a json file. You may need to dump settings and then edit for correct usage.

Set logo for all slides. left and bottom take precedence over right and top respectively.

Set theme value. colors and code have their own nested traits.

Toggle ON/OFF checks in settings panel.

Display obj for slides and output of exportable_data will be and displayed only in exported formats as HTML.

• exportable_data should be an html str or a callable to receive obj as its only argument.
  • A callable will give the latest representation of widget in exported slides and runtime representation of any other obj.
  • An html str, it will export the runtime representation of obj.

import ipywidgets as ipw
slides.alt(lambda w: f'<input type="range" min="{w.min}" max="{w.max}" value="{w.value}">', ipw.IntSlider()).display()
        

This is a simple slider widget that can be used to control the animation with an observer function.

You need to provide parameters like nframes and interval (milliseconds) to control the animation. The value trait can be observed to get the current frame index. The cyclic trait can be set to True to make the animation cyclic and only works when loop mode is ON.

from plotly.graph_objects import FigureWidget

fig = FigureWidget()
fig.add_scatter(y=[1, 2, 3, 4, 5])
widget = slides.AnimationSlider() # assuming slides is the instance of Slides app

def on_change(change):
    value = change['new']
    fig.data[0].color = f'rgb({int(value/widget.nframes*100)}, 100, 100)' # change color based on frame index

widget.observe(on_change, names='value')
display(widget, fig) # display it in the notebook
        

This widget can be passed to ipywidgets.interactive as keyword argument to create a dynamic control for the animation.

from ipywidgets import interact

@interact(frame=widget)
def show_frame(frame):
    print(frame)
        

Alerts text!

Write bokeh figure as HTML string to use in ipyslide.utils.write. Parameters

• bokeh_fig : Bokeh figure instance.
• title : Title for figure.

A powerful bullet list. iterable could be list of anything that you can pass to write command.
marker could be a unicode charcter or string, only effects unordered list.

Colors text, fg and bg should be valid CSS colors

Show/Hide Content in collapsed html.

Returns documentation of an obj. You can prepend a class/module name. members is True/List of attributes to show doc of.

Add error without breaking execution.

Markdown string wrapper that will be parsed with given kwargs lazily. If markdown contains variables not in kwargs, it will try to resolve them from local/global namespace and raise error if name is nowhere. Use inside python scripts when creating slides. In notebook, variables are automatically resolved, although you can still use it there.

Being as last expression of notebook cell or using self.parse() will parse markdown content.

Display object as it it and export metadata if not str. A frozen object may not appear in exported html if metadata is not given.

Returned object has a display method, or can be directly passed to display/write commands.

Returns html node with given children and node attributes like style, id etc. If an ttribute needs '-' in its name, replace it with '_'.
tag can be any valid html tag name. A tag that ends with / will be self closing e.g. hr/ will be <hr/>. Empty tag gives unwrapped children. children expects:

• If None, returns node such as html('image',alt='Image') → <img alt='Image'></img> and html('image/',alt='Image') → <img alt='Image' />
• str: A string to be added as node's text content.
• list/tuple of [objects]: A list of objects that will be parsed and added as child nodes. Widgets are not supported.
• dict if tag is 'style', this will only be exported to HTML if called under slide builder, use slides[number,].set_css otherwise. See Slides.css_syntax to learn about requirements of styles in dict.

Example:

html('img',src='ir_uv.jpg') #Returns IPython.display.HTML("<img src='ir_uv.jpg'></img>") and displas image if last line in notebook's cell.
        

Display src in an iframe. kwrags are passed to IPython.display.IFrame

Displays PNG/JPEG files or image data etc, kwrags are passed to IPython.display.Image. crop is a tuple of (left, top, right, bottom) in percentage of image size to crop the image. css_props are applied to figure element, so you can control top layout and nested img tag. You can provide following to data parameter:

• An opened PIL image. Useful for image operations and then direct writing to slides.
• A file path to image file.
• A url to image file.
• A str/bytes object containing image data.
• A str like "clip:image.png" will load an image saved in clips directory.
• A filename like "image.png" will look for the file in current directory and then in Slides.clips_dir if not found. Use 'clip:image.png' to pick image from Slides.clips_dir directly if another file 'image.png' also exists in current directory.

Returns an IMG object which can be exported to other formats (if possible):

• IMG.to_pil() returns PIL.Image or None.
• IMG.to_numpy() returns image data as numpy array for use in plotting libraries or None.

Send inside notifications for user to know whats happened on some button click. Send 'x' in content to clear previous notification immediately.

Write matplotib figure as HTML string to use in ipyslide.utils.write. Parameters

• plt_fig : Matplotlib's figure instance, auto picks as well.
• transparent: True of False for fig background.
• width : CSS style width. Default is figsize.
• caption : Caption for figure.
• crop : Crop SVG to given box in fraction 0-1 as tuple of (left, top, right, bottom).

Keep shape of text as it is (but apply dedent), preserving whitespaces as well.

Context manager to set working directory to given path and return to previous working directory when done.

Returns signature of a callable. You can prepend a class/module name.

Stacks given objects in a column or row with given sizes.

• objs: list/tuple of objects or a markdown string with '||' as separator.
• sizes: list/tuple of sizes(int, float) for each object, if not given, all objects will have equal size.
• vertical: bool, to stack objects vertically or horizontally, default is horizontal.
• css_class: str, to add a class to the container div.
• css_props: dict, applied to the container div, so you can control top layout.

Add a class to a given object, whether a widget or html/IPYthon object. CSS inline style properties should be given with names including '-' replaced with '_' but values should not. Only a subset of inline properties take effect if obj is a widget.

Suppress output of a block of code. If stdout is False, only display data is suppressed.

Suppress stdout in a block of code, especially unwanted print from functions in other modules.

Display svg file or svg string/bytes with additional customizations. crop is a tuple of (left, top, right, bottom) in percentage of image size to crop the image. css_props are applied to figure element, so you can control top layout and nested svg tag. kwrags are passed to IPython.display.SVG. You can provide url/string/bytes/filepath for svg.

Creates a table of given data like DataFrame, but with rich elements. data should be a 2D matrix-like. headers is a list of column names. widths is a list of widths for each column.

Example:

import pandas as pd
df = pd.DataFrame({'A': [1,2,3], 'B': [4,5,6]})
slides.table(df.values, headers=df.columns, widths=[1,2])

slides.table([[1,2,3],[4,5,6]], headers=['A','B','C'], widths=[1,2,3])
        

Formats text in a box for writing e.g. inline refrences. css_props are applied to box and - should be _ like font-size → font_size. text is not parsed to general markdown i.e. only bold italic etc. applied, so if need markdown, parse it to html before. You can have common CSS for all textboxes using class text-box.

Returns today's date in given format.

Returns html node with given height in em.

Wraps a given obj in a parent with 'zoom-child' class or add 'zoom-self' to widget, whether a widget or html/IPYthon object

Set citations from dictionary or string with content like @key: citation value on their own lines, key should be cited in markdown as cite`key` / @key, optionally comma separated keys. mode for citations should be one of ['inline', 'footnote']. Number of columns in citations are determined by Slides.settings.layout(..., ncol_refs=N).

set_citations({"key1":"value1","key2":"value2"})

set_citations('''
@key1: citation for key1
@key2: citation for key2
''')

with open("citations_file.md","r") as f:
    set_citations(f.read()) # same content as string above

with open("citations_file.json","r") as f:
    set_citations(json.load(f))
        

Auto update slides when content of markdown file changes. You can stop syncing using Slides.unsync function. interval is in milliseconds, 500 ms default. Read Slides.build docs about content of file.

The variables inserted in file content are used from top scope.

You can add files inside linked file using include\`file_path.md\` syntax, which are also watched for changes. This helps modularity of content, and even you can link a citation file in markdown format as shown below. Read more in Slides.xmd.syntax about it.

```citations footnote
@key1: Saboor et. al., 2025
@key2: A citations can span multiple lines, but key should start on new line
<!-- Or put this content in a file 'bib.md' and then inside citations block use include`bib.md` -->
```
        

Demo slides with a variety of content.

Create presentation from docs of IPySlides.

Build html slides that you can print.

• Use 'overrides.css' file in same folder to override CSS styles.
• If a slide has only widgets or does not have single object with HTML representation, it will be skipped.
• You can take screenshot (using system's tool) of a widget, save it using Clips GUI in side panel and laod as image to keep PNG view of a widget.
• If progressbar is set to True, 'bottom' or 'top', a progressbar while shown accordingly. True → 'bottom'.

Get serializer function for a type. Returns None if not found.

Get html str of a registerd obj_type.

Get metadata for a type to use in display(obj, metadata) for export purpose. This take precedence over object's own html representation. Returns {} if not found.

Decorator to register html serializer for an object type.

• Decoracted function accepts one argument that will take obj_type and should return HTML string.
• This definition will take precedence over any other in the module.
• All regeisted serializers only exist for the lifetime of the module in a namespace.
• Only a single serializer can be registered for an object type.

Usage

class MyObject:
    def __repr__(self):
        return 'My object is awesome'

slides = ipyslides.Slides()
@slides.serializer.register(MyObject)
def make_h1(obj):
    return f'<h1>{obj!r}</h1>'

my_object = MyObject()
slides.write(my_object) #This will write "My object is awesome" as main heading
make_h1(my_object) #This will return "<h1>My object is awesome</h1>"

#This is equivalent to above for custom objects(builtin objects can't be modified)
class MyObject:
    def _repr_html_(self):
        return '<h1>My object is awesome</h1>'

my_object = MyObject()
slides.write(my_object)
        

Unregister all serializer handlers for a type.

Unregister all serializer handlers.

Clear all extensions and their configurations added by user.

Add configurations to the Markdown extensions. configs_dict is a dictionary like {'extension_name': config_dict}

Add list of extensions to the Markdown parser.