Getting started (hello-world)

2025-03-28

Add a WebView node to your scene.

In the node inspector, you can configure things like the URL to browse, refresh-rate, zoom, etc.

Mouse actions

Then, setup the following mouse actions; rmb, lmb, mwheeldown, mwheelup:

2d or 3d?

To display the webview in your Godot project, you have 3 options:

  1. Render fullscreen
  2. Render on a 3D plane
  3. Handle it manually and render the texture on whatever you want

Below are the 2 easiest methods:

1. Render fullscreen

To render the webview fullscreen:

  1. Add a TextureRect as a child-node
  2. Configure an URL to browse to

2. Render onto a 3D plane

To render the webview onto a 3D plane:

  1. Add a MeshInstance3D as a child-node
  2. Give this MeshInstance3D a PlaneMesh in the inspector
  3. Configure an URL to browse to

That's it!

This is the 'basic way' of using the webview, as it sets up mouse and keyboard event handlers automatically.

Optionally: manual setup + texture

If you do not add a MeshInstance3D or TextureRect as a child of the WebView node, you'll need to manually grab the texture, and create a StandardMaterial3D that you can apply to any mesh of your creation.

In addition, we can turn off Misc->auto-load and do the loading ourselves.

@onready var view = $WebView

func _ready():
    view.connect("view_ready", _on_view_ready)

func _on_view_ready():
    if view.load():
        # create a material
        var mat: StandardMaterial3D = StandardMaterial3D.new()
        mat.shading_mode = BaseMaterial3D.SHADING_MODE_UNSHADED
        mat.texture_repeat = false
        mat.albedo_texture_force_srgb = true
        mat.transparency = BaseMaterial3D.TRANSPARENCY_ALPHA
        # note; you may call `get_texture` multiple times, it returns the same texture
        mat.albedo_texture = view.get_texture() 
        # apply your material to some mesh here

This does not set up any mouse/key handlers, you'll need to implement this manually via:

view.key_event(...);
view.mouse_click(...);
view.mouse_move(...);
view.mouse_wheel_up(...);
view.mouse_wheel_down(...);

More information

For more information (manual setup), check out: