Gradio Component
## Installation
```bash
pip install gradio_browser
```
## Usage
```python
import gradio as gr
from gradio_browser import Browser
with gr.Blocks(title="Browser Component Demo", fill_height=True) as demo:
gr.Markdown("# 🌐 Custom Browser Component")
with gr.Row():
with gr.Column(scale=1):
gr.Markdown("### Controls")
url_input = gr.Textbox(
label="Enter URL",
value="https://www.gradio.app/",
placeholder="https://www.gradio.app/",
)
show_hostname = gr.Checkbox(
label="Show full hostname in address bar", value=True
)
gr.Markdown(
"""
### Features:
- ← → Navigation buttons with history
- ↻ Refresh button
- ↗ Open in new tab button
- Address bar supports both full URLs and paths
- Enter key navigation
"""
)
gr.Markdown("### Try these URLs:")
gr.Button("Gradio.com").click(
lambda: "https://www.gradio.app/", outputs=[url_input]
)
gr.Button("Example.com").click(
lambda: "https://example.com", outputs=[url_input]
)
with gr.Column(scale=3):
browser = Browser(
url="https://example.com",
show_hostname=True,
min_height="600px",
scale=1,
)
# Update browser when URL changes
url_input.change(lambda url: url, inputs=[url_input], outputs=[browser])
# Update show_hostname setting (requires component rebuild)
show_hostname.change(
lambda show_host, url: Browser(value=url, show_hostname=show_host),
inputs=[show_hostname, url_input],
outputs=[browser],
)
if __name__ == "__main__":
demo.launch()
```
## `Browser`
### Initialization
| name | type | default | description |
|---|---|---|---|
value |
```python str | Callable | None ``` | None |
URL to display in the browser iframe |
url |
```python str ``` | "https://example.com" |
Initial URL to load in the browser |
width |
```python str ``` | "100%" |
Width of the browser component |
min_height |
```python str ``` | "500px" |
Minimum height of the browser component |
show_hostname |
```python bool ``` | False |
If True, shows full URL in address bar; if False, shows only path |
placeholder |
```python str | None ``` | None |
placeholder hint to provide behind textbox. |
label |
```python str | I18nData | None ``` | None |
the label for this component |
every |
```python Timer | float | None ``` | None |
Continously calls `value` to recalculate it if `value` is a function |
inputs |
```python Component | Sequence[Component] | set[Component] | None ``` | None |
Components that are used as inputs to calculate `value` if `value` is a function |
show_label |
```python bool | None ``` | None |
if True, will display label. |
scale |
```python int | None ``` | None |
relative size compared to adjacent Components |
min_width |
```python int ``` | 160 |
minimum pixel width |
interactive |
```python bool | None ``` | None |
if True, will be rendered as an editable component |
visible |
```python bool | Literal["hidden"] ``` | True |
If False, component will be hidden |
rtl |
```python bool ``` | False |
If True, sets the direction of the text to right-to-left |
elem_id |
```python str | None ``` | None |
An optional string that is assigned as the id of this component in the HTML DOM |
elem_classes |
```python list[str] | str | None ``` | None |
An optional list of strings that are assigned as the classes of this component in the HTML DOM |
render |
```python bool ``` | True |
If False, component will not render be rendered in the Blocks context |
key |
```python int | str | tuple[int | str, ...] | None ``` | None |
in a gr.render, Components with the same key across re-renders are treated as the same component |
preserved_by_key |
```python list[str] | str | None ``` | "value" |
A list of parameters from this component's constructor |