src/README.md

metadata

title: Gradio Browser Component
sdk: gradio
sdk_version: 5.49.0
app_file: app.py
pinned: false

gradio_browser

Gradio Component

Installation

pip install gradio_browser

Usage

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	str | Callable | None	None	URL to display in the browser iframe
url	str	"https://example.com"	Initial URL to load in the browser
width	str	"100%"	Width of the browser component
min_height	str	"500px"	Minimum height of the browser component
show_hostname	bool	False	If True, shows full URL in address bar; if False, shows only path
placeholder	str | None	None	placeholder hint to provide behind textbox.
label	str | I18nData | None	None	the label for this component
every	Timer | float | None	None	Continously calls `value` to recalculate it if `value` is a function
inputs	Component | Sequence[Component] | set[Component] | None	None	Components that are used as inputs to calculate `value` if `value` is a function
show_label	bool | None	None	if True, will display label.
scale	int | None	None	relative size compared to adjacent Components
min_width	int	160	minimum pixel width
interactive	bool | None	None	if True, will be rendered as an editable component
visible	bool | Literal["hidden"]	True	If False, component will be hidden
rtl	bool	False	If True, sets the direction of the text to right-to-left
elem_id	str | None	None	An optional string that is assigned as the id of this component in the HTML DOM
elem_classes	list[str] | str | None	None	An optional list of strings that are assigned as the classes of this component in the HTML DOM
render	bool	True	If False, component will not render be rendered in the Blocks context
key	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	list[str] | str | None	"value"	A list of parameters from this component's constructor

Events

name	description
change	Triggered when the value of the Browser changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input.
input	This listener is triggered when the user changes the value of the Browser.
submit	This listener is triggered when the user presses the Enter key while the Browser is focused.

User function

The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).

• When used as an Input, the component only impacts the input signature of the user function.
• When used as an output, the component only impacts the return signature of the user function.

The code snippet below is accurate in cases where the component is used as both an input and an output.

• As output: Is passed, passes URL value as a {str} into the function.
• As input: Should return, expects a URL {str} to display in browser.

def predict(
    value: str | None
) -> str | None:
    return value