Skip to main content
Gradio Lite (@gradio/lite) allows you to run Gradio applications entirely in the browser using WebAssembly and Pyodide. This means you can create interactive machine learning demos without any server infrastructure.

​
Overview

Gradio Lite runs Python code directly in the browser using Pyodide, a Python distribution compiled to WebAssembly. This enables:
  • Serverless demos: No backend infrastructure needed
  • Static hosting: Deploy to GitHub Pages, Netlify, or any static host
  • Privacy: All computation happens client-side
  • Instant loading: No server cold starts
Gradio Lite is ideal for lightweight demos and educational content. For production apps with heavy computation or external dependencies, consider regular Gradio deployed to Hugging Face Spaces.

​
Quick start

Create an HTML file with your Gradio app embedded: 
<!DOCTYPE html>
<html>
<head>
  <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
  <link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
</head>
<body>
  <gradio-lite>
import gradio as gr

def greet(name):
    return f"Hello {name}!"

gr.Interface(
    fn=greet,
    inputs=gr.Textbox(label="Name"),
    outputs=gr.Textbox(label="Greeting")
).launch()
  </gradio-lite>
</body>
</html>
That’s it! Open this HTML file in a browser to see your Gradio app running entirely client-side.

​
Installation

Include Gradio Lite from a CDN: 
<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
<link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />

​
Via npm

For bundled applications: 
npm install @gradio/lite

​
Writing Gradio Lite apps

​
Basic structure

Write your Gradio Python code inside <gradio-lite> tags: 
<gradio-lite>
import gradio as gr

def double(x):
    return x * 2

gr.Interface(
    fn=double,
    inputs=gr.Number(label="Input"),
    outputs=gr.Number(label="Output")
).launch()
</gradio-lite>

​
Multiple files

Organize code across multiple files using <gradio-file> tags: 
<gradio-lite>
<gradio-file name="app.py">
import gradio as gr
from utils import process_data

def greet(name):
    return process_data(name)

gr.Interface(
    fn=greet,
    inputs="text",
    outputs="text"
).launch()
</gradio-file>

<gradio-file name="utils.py">
def process_data(text):
    return f"Processed: {text.upper()}"
</gradio-file>
</gradio-lite>

​
Install dependencies

Specify Python packages to install: 
<gradio-lite>
<gradio-requirements>
numpy
pandas
matplotlib
</gradio-requirements>

<gradio-file name="app.py">
import gradio as gr
import numpy as np
import pandas as pd

def analyze(data):
    df = pd.DataFrame(data)
    return df.describe()

gr.Interface(
    fn=analyze,
    inputs=gr.Dataframe(),
    outputs=gr.Dataframe()
).launch()
</gradio-file>
</gradio-lite>
Only packages available in Pyodide can be installed. Check the Pyodide package list for available packages.

​
Examples

​
Image processing

<!DOCTYPE html>
<html>
<head>
  <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
  <link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
</head>
<body>
  <gradio-lite>
<gradio-requirements>
pillow
numpy
</gradio-requirements>

import gradio as gr
from PIL import Image, ImageFilter
import numpy as np

def blur_image(image):
    img = Image.fromarray(image)
    blurred = img.filter(ImageFilter.GaussianBlur(radius=5))
    return np.array(blurred)

gr.Interface(
    fn=blur_image,
    inputs=gr.Image(label="Upload Image"),
    outputs=gr.Image(label="Blurred Image"),
    title="Image Blur Demo"
).launch()
  </gradio-lite>
</body>
</html>

​
Data visualization

<!DOCTYPE html>
<html>
<head>
  <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
  <link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
</head>
<body>
  <gradio-lite>
<gradio-requirements>
matplotlib
numpy
</gradio-requirements>

import gradio as gr
import matplotlib.pyplot as plt
import numpy as np

def plot_sine(frequency, amplitude):
    x = np.linspace(0, 2 * np.pi, 100)
    y = amplitude * np.sin(frequency * x)
    
    fig, ax = plt.subplots()
    ax.plot(x, y)
    ax.set_xlabel('x')
    ax.set_ylabel('y')
    ax.set_title(f'Sine Wave: f={frequency}, A={amplitude}')
    ax.grid(True)
    
    return fig

gr.Interface(
    fn=plot_sine,
    inputs=[
        gr.Slider(1, 10, value=1, label="Frequency"),
        gr.Slider(0.1, 2, value=1, label="Amplitude")
    ],
    outputs=gr.Plot(label="Sine Wave"),
    title="Interactive Sine Wave"
).launch()
  </gradio-lite>
</body>
</html>

​
Text processing

<!DOCTYPE html>
<html>
<head>
  <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
  <link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
</head>
<body>
  <gradio-lite>
import gradio as gr
import re
from collections import Counter

def analyze_text(text):
    # Word count
    words = re.findall(r'\w+', text.lower())
    word_count = len(words)
    
    # Character count
    char_count = len(text)
    
    # Most common words
    common = Counter(words).most_common(5)
    common_str = "\n".join([f"{word}: {count}" for word, count in common])
    
    return {
        "Word Count": word_count,
        "Character Count": char_count,
        "Most Common Words": common_str
    }

gr.Interface(
    fn=analyze_text,
    inputs=gr.Textbox(lines=5, label="Enter text"),
    outputs=gr.JSON(label="Analysis"),
    title="Text Analyzer",
    description="Analyze text for word count, character count, and common words"
).launch()
  </gradio-lite>
</body>
</html>

​
Deployment

Gradio Lite apps are just HTML files, so you can deploy them anywhere:

​
GitHub Pages

  1. Create an index.html file with your Gradio Lite app
  2. Push to a GitHub repository
  3. Enable GitHub Pages in repository settings
  4. Your app will be live at https://username.github.io/repo-name

​
Netlify

  1. Create an index.html file
  2. Drag and drop to Netlify Drop
  3. Get an instant deployment URL

​
Any static host

Deploy to:
  • Vercel
  • Cloudflare Pages
  • AWS S3 + CloudFront
  • Google Cloud Storage
  • Or any web server

​
Limitations

Gradio Lite has some limitations compared to regular Gradio:
  • Package availability: Only Pyodide-compatible packages work
  • Performance: WebAssembly is slower than native Python for heavy computation
  • File size: Large dependencies increase initial load time
  • Browser compatibility: Requires modern browsers with WebAssembly support
  • No server features: No server-side APIs, databases, or external services

​
Best practices

1

Keep dependencies minimal

Only include packages you actually need. Fewer dependencies = faster load times.
2

Optimize for client-side

Gradio Lite works best for lightweight processing. For heavy models, use regular Gradio.
3

Test in multiple browsers

Verify your app works in Chrome, Firefox, Safari, and Edge.
4

Add loading indicators

The initial load can take time. Consider adding a loading message.

​
When to use Gradio Lite

​
Good use cases ✅

  • Educational demos and tutorials
  • Simple data visualizations
  • Text processing tools
  • Mathematical calculators
  • Image filters and transformations
  • Static portfolio projects

​
Not recommended ❌

  • Large ML models (use Hugging Face Spaces)
  • Heavy computation (use server-side Gradio)
  • Real-time data from APIs (needs backend)
  • Production applications (needs reliability)
  • Apps requiring authentication (needs server)

​
Next steps

Sharing apps

Learn about sharing regular Gradio apps

Hugging Face Spaces

Deploy full Gradio apps to Spaces