> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/gradio-app/gradio/llms.txt
> Use this file to discover all available pages before exploring further.

# Gradio Lite

> Run Gradio entirely in the browser with WebAssembly

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](https://pyodide.org/), 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

<Note>
  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.
</Note>

## Quick start

Create an HTML file with your Gradio app embedded:

```html theme={null}
<!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

### Via CDN (recommended)

Include Gradio Lite from a CDN:

```html theme={null}
<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:

```bash theme={null}
npm install @gradio/lite
```

## Writing Gradio Lite apps

### Basic structure

Write your Gradio Python code inside `<gradio-lite>` tags:

```html theme={null}
<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:

```html theme={null}
<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:

```html theme={null}
<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>
```

<Note>
  Only packages available in Pyodide can be installed. Check the [Pyodide package list](https://pyodide.org/en/stable/usage/packages-in-pyodide.html) for available packages.
</Note>

## Examples

### Image processing

```html theme={null}
<!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

```html theme={null}
<!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

```html theme={null}
<!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](https://app.netlify.com/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

<Warning>
  Gradio Lite has some limitations compared to regular Gradio:
</Warning>

* **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

<Steps>
  <Step title="Keep dependencies minimal">
    Only include packages you actually need. Fewer dependencies = faster load times.
  </Step>

  <Step title="Optimize for client-side">
    Gradio Lite works best for lightweight processing. For heavy models, use regular Gradio.
  </Step>

  <Step title="Test in multiple browsers">
    Verify your app works in Chrome, Firefox, Safari, and Edge.
  </Step>

  <Step title="Add loading indicators">
    The initial load can take time. Consider adding a loading message.
  </Step>
</Steps>

## 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

<CardGroup cols={2}>
  <Card title="Sharing apps" icon="share-nodes" href="/deployment/sharing">
    Learn about sharing regular Gradio apps
  </Card>

  <Card title="Hugging Face Spaces" icon="rocket" href="/deployment/huggingface-spaces">
    Deploy full Gradio apps to Spaces
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.