Reference

Configuration options and technical details of the extension.

Supported YAML Metadata

The quarto-gradio extension processes the following YAML metadata:

gradio:
    # @gradio/lite CDN base
    cdn: "https://cdn.jsdelivr.net/npm/\\@gradio/lite"
    
    # @gradio/lite version, optional, defaults to null
    version: "latest"                                
    
    # Deps to pass to <gradio-requirements/>
    requirements:                                    
        - plotly==5.24.0
    
    # List of attributes to pass to <gradio-lite/> tag
    attributes:              
        # Optional: "dark" or "light", defaults to "dark"
        theme: dark          
        
        # Optional: true or false, defaults to true
        shared-worker: true
        
        # Optional: true or false
        playground: false    
        
        # Optional: "horizontal" or "vertical"
        layout: horizontal

The extension is solely responsible for passing this metadata to appropriate HTML tags defined by @gradio/lite package. For a more detailed explanation of metadata semantics, please refer to the Gradio Lite documentation.

Supported Python Requirement Formats

You can consult the 📦 Customize Python Modules guide for an example of how to use the requirements metadata.

Format	Description	Example
Package name	Just the package name to install latest version	`plotly`
Package and version	Package with specific version or version range	`plotly==5.24.0`
URL	Remote wheel or source distribution	https://some.cdn.com/plotly-5.24.1-py3-none-any.whl

For a deep-dive into the details of Python packages in a browser environment, see the Pyodide documentation.

Document Processing Flow

The main idea behind this extension is to hook into the lifecycle of the Quarto document at the stage where it is represented as a Pandoc Abstract Syntax Tree (AST), collect all the source code from Python code blocks and dynamically construct the appropriate HTML tree by populating the <gradio-requirements/> and <gradio-lite/> tags.