From 91442af73ce6d78701df17134cec8be4b7ac2f9b Mon Sep 17 00:00:00 2001
From: scorsin-oai <scorsin@openai.com>
Date: Thu, 23 Apr 2026 11:42:40 -0500
Subject: [PATCH] Added webview native template element (#16)

## Description
This change adds webview as a builtin native template element. It is implemented through the new polyglot module system we introduced for open sourcing, which allows to provide new native views with their TS API in their own isolated modules and have them being automatically discoverable by the Valdi runtime. It works on both iOS and Android. The API is exposed through a WebViewController API which is code generated. The controller can be attached when rendered under a `<webview>` element. Added also a sample app which showcases the API.

(cherry picked from commit 73f32a0c05fe45dcc69a020ea59fa96b0b367a20)
---
 apps/webview_example/BUILD.bazel              |  28 +++
 apps/webview_example/IconButton.tsx           |  36 ++++
 apps/webview_example/WebViewExample.tsx       | 165 +++++++++++++++
 apps/webview_example/res/back.svg             |   4 +
 apps/webview_example/res/forward.svg          |   4 +
 apps/webview_example/res/reload.svg           |   4 +
 docs/api/api-quick-reference.md               |  12 ++
 docs/api/api-reference-elements.md            |  27 +++
 .../src/valdi/valdi_core/src/JSXBootstrap.ts  |   1 +
 .../valdi_test/test/ElementForViewClass.d.ts  |   5 +-
 .../test/IRenderedElementViewClass.ts         |   1 +
 .../valdi/valdi_test/test/JSXTest.spec.tsx    |  19 ++
 .../src/valdi/valdi_tsx/src/JSX.ts            |   2 +
 .../valdi_tsx/src/NativeTemplateElements.d.ts |  21 ++
 .../src/valdi/valdi_webview/BUILD.bazel       |  54 +++++
 .../android/WebViewNativeModuleFactoryImpl.kt |  14 ++
 .../modules/webview/AndroidWebViewHolder.kt   | 194 +++++++++++++++++
 .../valdi/modules/webview/ValdiWebView.kt     |  62 ++++++
 .../webview/ValdiWebViewAttributesBinder.kt   |  25 +++
 .../modules/webview/WebViewControllerImpl.kt  | 158 ++++++++++++++
 .../ios/SCValdiWKWebViewHolder.h              |  24 +++
 .../ios/SCValdiWKWebViewHolder.m              | 161 ++++++++++++++
 .../valdi/valdi_webview/ios/SCValdiWebView.h  |  11 +
 .../valdi/valdi_webview/ios/SCValdiWebView.m  |  63 ++++++
 .../ios/SCValdiWebViewControllerImpl.h        |   6 +
 .../ios/SCValdiWebViewControllerImpl.m        | 200 ++++++++++++++++++
 .../ios/SCValdiWebViewNativeModule.m          |  31 +++
 .../src/valdi/valdi_webview/module.yaml       |   7 +
 .../src/valdi/valdi_webview/src/WebView.ts    |  15 ++
 .../valdi_webview/src/WebViewNative.d.ts      |  77 +++++++
 .../src/valdi/valdi_webview/tsconfig.json     |   8 +
 .../SCValdiUnsetAndReleaseInMainThread.h      |  14 ++
 .../SCValdiUnsetAndReleaseInMainThread.m      |  23 ++
 33 files changed, 1474 insertions(+), 2 deletions(-)
 create mode 100644 apps/webview_example/BUILD.bazel
 create mode 100644 apps/webview_example/IconButton.tsx
 create mode 100644 apps/webview_example/WebViewExample.tsx
 create mode 100644 apps/webview_example/res/back.svg
 create mode 100644 apps/webview_example/res/forward.svg
 create mode 100644 apps/webview_example/res/reload.svg
 create mode 100644 src/valdi_modules/src/valdi/valdi_webview/BUILD.bazel
 create mode 100644 src/valdi_modules/src/valdi/valdi_webview/android/WebViewNativeModuleFactoryImpl.kt
 create mode 100644 src/valdi_modules/src/valdi/valdi_webview/android/com/snap/valdi/modules/webview/AndroidWebViewHolder.kt
 create mode 100644 src/valdi_modules/src/valdi/valdi_webview/android/com/snap/valdi/modules/webview/ValdiWebView.kt
 create mode 100644 src/valdi_modules/src/valdi/valdi_webview/android/com/snap/valdi/modules/webview/ValdiWebViewAttributesBinder.kt
 create mode 100644 src/valdi_modules/src/valdi/valdi_webview/android/com/snap/valdi/modules/webview/WebViewControllerImpl.kt
 create mode 100644 src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWKWebViewHolder.h
 create mode 100644 src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWKWebViewHolder.m
 create mode 100644 src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebView.h
 create mode 100644 src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebView.m
 create mode 100644 src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebViewControllerImpl.h
 create mode 100644 src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebViewControllerImpl.m
 create mode 100644 src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebViewNativeModule.m
 create mode 100644 src/valdi_modules/src/valdi/valdi_webview/module.yaml
 create mode 100644 src/valdi_modules/src/valdi/valdi_webview/src/WebView.ts
 create mode 100644 src/valdi_modules/src/valdi/valdi_webview/src/WebViewNative.d.ts
 create mode 100644 src/valdi_modules/src/valdi/valdi_webview/tsconfig.json
 create mode 100644 valdi_core/src/valdi_core/ios/valdi_core/SCValdiUnsetAndReleaseInMainThread.h
 create mode 100644 valdi_core/src/valdi_core/ios/valdi_core/SCValdiUnsetAndReleaseInMainThread.m

diff --git a/apps/webview_example/BUILD.bazel b/apps/webview_example/BUILD.bazel
new file mode 100644
index 00000000..2debf2f3
--- /dev/null
+++ b/apps/webview_example/BUILD.bazel
@@ -0,0 +1,28 @@
+load("//bzl/valdi:valdi_application.bzl", "valdi_application")
+load("//bzl/valdi:valdi_module.bzl", "valdi_module")
+
+valdi_module(
+    name = "webview_example",
+    srcs = glob([
+        "**/*.ts",
+        "**/*.tsx",
+    ]),
+    res = glob([
+        "res/**/*.svg",
+    ]),
+    visibility = ["//visibility:public"],
+    deps = [
+        "//src/valdi_modules/src/valdi/valdi_core",
+        "//src/valdi_modules/src/valdi/valdi_tsx",
+        "//src/valdi_modules/src/valdi/valdi_webview",
+    ],
+)
+
+valdi_application(
+    name = "webview_example_app",
+    ios_bundle_id = "com.snap.valdi.webviewexample",
+    ios_families = ["iphone"],
+    root_component_path = "App@webview_example/WebViewExample",
+    title = "Valdi WebView Example",
+    deps = [":webview_example"],
+)
diff --git a/apps/webview_example/IconButton.tsx b/apps/webview_example/IconButton.tsx
new file mode 100644
index 00000000..ed25ead3
--- /dev/null
+++ b/apps/webview_example/IconButton.tsx
@@ -0,0 +1,36 @@
+import { Component } from 'valdi_core/src/Component';
+import { Style } from 'valdi_core/src/Style';
+import { Asset } from 'valdi_tsx/src/Asset';
+import { ImageView, View } from 'valdi_tsx/src/NativeTemplateElements';
+
+export interface IconButtonViewModel {
+  icon: Asset;
+  onTap: () => void;
+}
+
+export class IconButton extends Component<IconButtonViewModel> {
+  onRender(): void {
+    <view style={styles.button} onTap={this.viewModel.onTap}>
+      <image style={styles.icon} src={this.viewModel.icon} />
+    </view>;
+  }
+}
+
+const styles = {
+  button: new Style<View>({
+    width: 40,
+    height: 40,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 6,
+    backgroundColor: '#eef1f5',
+  }),
+
+  icon: new Style<ImageView>({
+    width: 22,
+    height: 22,
+    objectFit: 'contain',
+    touchEnabled: false,
+  }),
+};
diff --git a/apps/webview_example/WebViewExample.tsx b/apps/webview_example/WebViewExample.tsx
new file mode 100644
index 00000000..34cb8c7d
--- /dev/null
+++ b/apps/webview_example/WebViewExample.tsx
@@ -0,0 +1,165 @@
+import { StatefulComponent } from 'valdi_core/src/Component';
+import { Device } from 'valdi_core/src/Device';
+import { Style } from 'valdi_core/src/Style';
+import { systemFont } from 'valdi_core/src/SystemFont';
+import { TextField, View, WebViewElement } from 'valdi_tsx/src/NativeTemplateElements';
+import { IWebViewController, IWebViewListener, WebView as WebViewModule } from 'valdi_webview/src/WebView';
+
+import { IconButton } from './IconButton';
+import res from './res';
+
+const SNAPCHAT_URL = 'https://www.snapchat.com';
+const BAR_HEIGHT = 56;
+
+interface State {
+  urlText: string;
+}
+
+export class App extends StatefulComponent<{}, State> {
+  state: State = {
+    urlText: SNAPCHAT_URL,
+  };
+
+  private readonly webViewController: IWebViewController = WebViewModule.createController();
+
+  private readonly webViewListener: IWebViewListener = {
+    onMessage(message: string): void {
+      console.log(`WebView message: ${message}`);
+    },
+    onLoadFailed(errorMessage: string): void {
+      console.log(`WebView load failed: ${errorMessage}`);
+    },
+    onLoadCompleted(): void {
+      console.log('WebView load completed');
+    },
+  };
+
+  onCreate(): void {
+    this.registerDisposable(() => {
+      this.webViewController.dispose();
+    });
+
+    this.webViewController.setListener(this.webViewListener);
+    this.webViewController.load({ url: SNAPCHAT_URL });
+  }
+
+  onDestroy(): void {
+    this.webViewController.setListener(undefined);
+  }
+
+  onRender(): void {
+    <view style={styles.root}>
+      <view
+        style={styles.navigationBar}
+        height={BAR_HEIGHT + Device.getDisplayTopInset()}
+        paddingTop={Device.getDisplayTopInset()}
+      >
+        <IconButton icon={res.back} onTap={this.goBack} />
+        <IconButton icon={res.forward} onTap={this.goForward} />
+        <IconButton icon={res.reload} onTap={this.reload} />
+        <view style={styles.urlFieldContainer}>
+          <textfield
+            style={styles.urlField}
+            value={this.state.urlText}
+            onChange={this.onUrlTextChange}
+            onEditEnd={this.onUrlEditEnd}
+          />
+        </view>
+      </view>
+      <webview controller={this.webViewController} style={styles.webview} />
+    </view>;
+  }
+
+  private goBack = (): void => {
+    this.webViewController.getState().then(state => {
+      if (state.canGoBack) {
+        this.webViewController.goBack();
+      }
+    });
+  };
+
+  private goForward = (): void => {
+    this.webViewController.getState().then(state => {
+      if (state.canGoForward) {
+        this.webViewController.goForward();
+      }
+    });
+  };
+
+  private reload = (): void => {
+    this.webViewController.reload();
+  };
+
+  private readonly onUrlTextChange: NonNullable<TextField['onChange']> = event => {
+    this.setState({ urlText: event.text });
+  };
+
+  private readonly onUrlEditEnd: NonNullable<TextField['onEditEnd']> = event => {
+    this.loadUrl(event.text);
+  };
+
+  private loadUrl(rawUrl: string): void {
+    const url = this.normalizeUrl(rawUrl);
+    this.setState({ urlText: url });
+    this.webViewController.load({ url });
+  }
+
+  private normalizeUrl(rawUrl: string): string {
+    const trimmedUrl = rawUrl.trim();
+    if (trimmedUrl.length === 0) {
+      return SNAPCHAT_URL;
+    }
+    if (trimmedUrl.indexOf('://') >= 0) {
+      return trimmedUrl;
+    }
+    return `https://${trimmedUrl}`;
+  }
+}
+
+const styles = {
+  root: new Style<View>({
+    backgroundColor: 'white',
+    width: '100%',
+    height: '100%',
+  }),
+
+  navigationBar: new Style<View>({
+    width: '100%',
+    paddingLeft: 10,
+    paddingRight: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#f8fafc',
+  }),
+
+  urlFieldContainer: new Style<View>({
+    flexGrow: 1,
+    height: 40,
+    borderRadius: 10,
+    backgroundColor: 'white',
+    borderWidth: 1,
+    borderColor: '#cbd5e1',
+    paddingLeft: 12,
+    paddingRight: 12,
+    justifyContent: 'center',
+  }),
+
+  urlField: new Style<TextField>({
+    width: '100%',
+    height: 38,
+    color: '#0f172a',
+    tintColor: '#2563eb',
+    font: systemFont(15),
+    placeholder: 'Enter a URL',
+    contentType: 'url',
+    returnKeyText: 'go',
+    autocapitalization: 'none',
+    autocorrection: 'none',
+    closesWhenReturnKeyPressed: true,
+  }),
+
+  webview: new Style<WebViewElement>({
+    width: '100%',
+    flexGrow: 1,
+  }),
+};
diff --git a/apps/webview_example/res/back.svg b/apps/webview_example/res/back.svg
new file mode 100644
index 00000000..86e67dad
--- /dev/null
+++ b/apps/webview_example/res/back.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.5 5L7.5 12L14.5 19" stroke="#1F2937" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8.5 12H19" stroke="#1F2937" stroke-width="2.2" stroke-linecap="round"/>
+</svg>
diff --git a/apps/webview_example/res/forward.svg b/apps/webview_example/res/forward.svg
new file mode 100644
index 00000000..2076dcd0
--- /dev/null
+++ b/apps/webview_example/res/forward.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.5 5L16.5 12L9.5 19" stroke="#1F2937" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5 12H15.5" stroke="#1F2937" stroke-width="2.2" stroke-linecap="round"/>
+</svg>
diff --git a/apps/webview_example/res/reload.svg b/apps/webview_example/res/reload.svg
new file mode 100644
index 00000000..8775c671
--- /dev/null
+++ b/apps/webview_example/res/reload.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18 10.1C17.2 7.7 14.9 6 12.2 6C8.8 6 6 8.7 6 12.1C6 15.5 8.8 18.2 12.2 18.2C14.5 18.2 16.6 16.9 17.6 14.9" stroke="#1F2937" stroke-width="2.2" stroke-linecap="round"/>
+  <path d="M18.1 5.4L18.8 10.1L14.2 9.1" stroke="#1F2937" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/docs/api/api-quick-reference.md b/docs/api/api-quick-reference.md
index 644a1b4a..06553490 100644
--- a/docs/api/api-quick-reference.md
+++ b/docs/api/api-quick-reference.md
@@ -477,6 +477,18 @@ class MyComponent extends Component {
 </scroll>
 ```
 
+### Web Content
+
+```tsx
+<webview
+  width="100%"
+  height={400}
+  controller={this.webViewController}
+/>
+```
+
+Create the controller with `WebView.createController()` from `valdi_webview`, then call controller methods such as `load`, `reload`, and `goBack` imperatively.
+
 ### Form Input
 
 ```tsx
diff --git a/docs/api/api-reference-elements.md b/docs/api/api-reference-elements.md
index ee86c36c..4ff71b69 100644
--- a/docs/api/api-reference-elements.md
+++ b/docs/api/api-reference-elements.md
@@ -8,6 +8,7 @@ This document provides a comprehensive reference for all native template element
 - [View](#view)
 - [ScrollView](#scrollview)
 - [ImageView](#imageview)
+- [WebView](#webview)
 - [VideoView](#videoview)
 - [Label](#label)
 - [TextField](#textfield)
@@ -825,6 +826,32 @@ All view properties from [View](#view) including:
 
 ---
 
+## WebView
+
+**JSX Element:** `<webview>`
+
+**iOS Native:** `SCValdiWebView`
+**Android Native:** `com.snap.valdi.views.ValdiWebView`
+
+A host element for a native webview controller created by the `valdi_webview` module.
+
+### Properties
+
+All properties from [Layout Attributes](#layout), plus:
+
+#### Controller
+
+**`controller`**: `IWebViewNativeController`
+- Native webview controller created by `WebView.createController()` from `valdi_webview`.
+- The controller owns the platform webview and is attached to this host element when the attribute is applied.
+
+#### Styling
+
+**`style`**: `IStyle<WebViewElement | View | Layout>`
+- See [View Style Attributes](api-style-attributes.md#view-styles) for common view styling attributes.
+
+---
+
 ## VideoView
 
 **JSX Element:** `<video>`
diff --git a/src/valdi_modules/src/valdi/valdi_core/src/JSXBootstrap.ts b/src/valdi_modules/src/valdi/valdi_core/src/JSXBootstrap.ts
index 3035c89e..75762980 100644
--- a/src/valdi_modules/src/valdi/valdi_core/src/JSXBootstrap.ts
+++ b/src/valdi_modules/src/valdi/valdi_core/src/JSXBootstrap.ts
@@ -440,6 +440,7 @@ jsx.registerNativeElement('label', 'SCValdiLabel', 'com.snap.valdi.views.ValdiTe
 jsx.registerNativeElement('scroll', 'SCValdiScrollView', 'com.snap.valdi.views.ValdiScrollView');
 jsx.registerNativeElement('image', 'SCValdiImageView', 'com.snap.valdi.views.ValdiImageView');
 jsx.registerNativeElement('video', 'SCValdiVideoView', 'com.snap.valdi.views.ValdiVideoView');
+jsx.registerNativeElement('webview', 'SCValdiWebView', 'com.snap.valdi.modules.webview.ValdiWebView');
 jsx.registerNativeElement('button', 'UIButton', 'android.widget.Button');
 jsx.registerNativeElement('spinner', 'SCValdiSpinnerView', 'com.snap.valdi.views.ValdiSpinnerView');
 jsx.registerNativeElement('blur', 'SCValdiBlurView', 'com.snap.valdi.views.ValdiView');
diff --git a/src/valdi_modules/src/valdi/valdi_test/test/ElementForViewClass.d.ts b/src/valdi_modules/src/valdi/valdi_test/test/ElementForViewClass.d.ts
index d9fde2b5..9b7bedbd 100644
--- a/src/valdi_modules/src/valdi/valdi_test/test/ElementForViewClass.d.ts
+++ b/src/valdi_modules/src/valdi/valdi_test/test/ElementForViewClass.d.ts
@@ -1,4 +1,4 @@
-import { AnimatedImage, ImageView, Label, Layout, ScrollView, ShapeView, SpinnerView, TextField, TextView, View } from "valdi_tsx/src/NativeTemplateElements";
+import { AnimatedImage, ImageView, Label, Layout, ScrollView, ShapeView, SpinnerView, TextField, TextView, View, WebView } from "valdi_tsx/src/NativeTemplateElements";
 import { IRenderedElementViewClass } from "./IRenderedElementViewClass";
 
 type Mapping = {
@@ -6,6 +6,7 @@ type Mapping = {
     [IRenderedElementViewClass.Layout]: Layout;
     [IRenderedElementViewClass.Label]: Label;
     [IRenderedElementViewClass.Image]: ImageView;
+    [IRenderedElementViewClass.WebView]: WebView;
     [IRenderedElementViewClass.Spinner]: SpinnerView;
     [IRenderedElementViewClass.TextField]: TextField;
     [IRenderedElementViewClass.TextView]: TextView;
@@ -14,4 +15,4 @@ type Mapping = {
     [IRenderedElementViewClass.AnimatedImage]: AnimatedImage;
 }
 
-export type ElementForViewClass<T extends IRenderedElementViewClass> = Mapping[T];
\ No newline at end of file
+export type ElementForViewClass<T extends IRenderedElementViewClass> = Mapping[T];
diff --git a/src/valdi_modules/src/valdi/valdi_test/test/IRenderedElementViewClass.ts b/src/valdi_modules/src/valdi/valdi_test/test/IRenderedElementViewClass.ts
index 9e34dba5..58673ac6 100644
--- a/src/valdi_modules/src/valdi/valdi_test/test/IRenderedElementViewClass.ts
+++ b/src/valdi_modules/src/valdi/valdi_test/test/IRenderedElementViewClass.ts
@@ -3,6 +3,7 @@ export enum IRenderedElementViewClass {
   View = 'SCValdiView',
   Label = 'SCValdiLabel',
   Image = 'SCValdiImageView',
+  WebView = 'SCValdiWebView',
   Spinner = 'SCValdiSpinnerView',
   TextField = 'SCValdiTextField',
   TextView = 'SCValdiTextView',
diff --git a/src/valdi_modules/src/valdi/valdi_test/test/JSXTest.spec.tsx b/src/valdi_modules/src/valdi/valdi_test/test/JSXTest.spec.tsx
index c4b87089..925be50d 100644
--- a/src/valdi_modules/src/valdi/valdi_test/test/JSXTest.spec.tsx
+++ b/src/valdi_modules/src/valdi/valdi_test/test/JSXTest.spec.tsx
@@ -1,4 +1,5 @@
 import { Component, StatefulComponent } from 'valdi_core/src/Component';
+import { IWebViewNativeController } from 'valdi_tsx/src/NativeTemplateElements';
 import 'jasmine/src/jasmine';
 import { createComponent, makeComponentTest } from './JSXTestUtils';
 
@@ -43,6 +44,24 @@ describe('JSX', () => {
     });
   });
 
+  it('can render a webview element', async () => {
+    class WebViewComponent extends Component {
+      private controller: IWebViewNativeController = {};
+
+      onRender() {
+        <webview controller={this.controller} />;
+      }
+    }
+
+    const component = createComponent(WebViewComponent);
+    const rootNode = await component.getRenderedNode();
+    const simplified = rootNode.simplify(['viewClass', 'attributes']);
+    const attributes = simplified.attributes!;
+
+    expect(simplified.viewClass).toEqual('SCValdiWebView');
+    expect(attributes.controller).toBeDefined();
+  });
+
   it('can render a component with view model', async () => {
     interface ViewModel {
       text: string;
diff --git a/src/valdi_modules/src/valdi/valdi_tsx/src/JSX.ts b/src/valdi_modules/src/valdi/valdi_tsx/src/JSX.ts
index a6218aa5..d929bdf5 100644
--- a/src/valdi_modules/src/valdi/valdi_tsx/src/JSX.ts
+++ b/src/valdi_modules/src/valdi/valdi_tsx/src/JSX.ts
@@ -6,6 +6,7 @@ import {
   ContainerTemplateElement,
   ImageView,
   VideoView,
+  WebViewElement,
   Label,
   Layout,
   ScrollView,
@@ -43,6 +44,7 @@ declare global {
       label: Label;
       image: ImageView;
       video: VideoView;
+      webview: WebViewElement;
       textfield: TextField;
       textview: TextView;
       blur: BlurView;
diff --git a/src/valdi_modules/src/valdi/valdi_tsx/src/NativeTemplateElements.d.ts b/src/valdi_modules/src/valdi/valdi_tsx/src/NativeTemplateElements.d.ts
index 6a484996..71c22845 100644
--- a/src/valdi_modules/src/valdi/valdi_tsx/src/NativeTemplateElements.d.ts
+++ b/src/valdi_modules/src/valdi/valdi_tsx/src/NativeTemplateElements.d.ts
@@ -1390,6 +1390,27 @@ export interface ImageView extends _ImageView, LeafView {
   ref?: IRenderedElementHolder<this>;
 }
 
+export interface IWebViewNativeController {}
+
+// @NativeTemplateElement({ios: 'SCValdiWebView', android: 'com.snap.valdi.modules.webview.ValdiWebView', jsx: 'webview'})
+export interface WebViewElement extends LeafView {
+  /**
+   * Native webview controller created by valdi_webview.
+   */
+  controller?: IWebViewNativeController;
+
+  /**
+   * Styling object allows to set multiple attribute at once
+   */
+  style?: _Style<WebViewElement | View | Layout>;
+
+  /**
+   * Sets an element reference holder, which will keep track
+   * of the rendered elements.
+   */
+  ref?: IRenderedElementHolder<this>;
+}
+
 // @NativeTemplateElement({ios: 'SCValdiVideoView', android: 'com.snap.valdi.views.ValdiVideoView', jsx: 'video'})
 export interface VideoView extends _VideoView, LeafView {
   /**
diff --git a/src/valdi_modules/src/valdi/valdi_webview/BUILD.bazel b/src/valdi_modules/src/valdi/valdi_webview/BUILD.bazel
new file mode 100644
index 00000000..3af9f30e
--- /dev/null
+++ b/src/valdi_modules/src/valdi/valdi_webview/BUILD.bazel
@@ -0,0 +1,54 @@
+load("//bzl/valdi:valdi_module.bzl", "valdi_module")
+load("//bzl/valdi:valdi_android_library.bzl", "valdi_android_library")
+
+objc_library(
+    name = "valdi_webview_ios_impl",
+    srcs = glob([
+        "ios/**/*.m",
+    ]),
+    hdrs = glob([
+        "ios/**/*.h",
+    ]),
+    copts = ["-I."],
+    sdk_frameworks = [
+        "WebKit",
+    ],
+    target_compatible_with = ["@platforms//os:ios"],
+    visibility = ["//visibility:public"],
+    deps = [
+        ":valdi_webview_api_objc",
+        "//valdi:valdi_ios",
+        "@valdi//valdi_core:valdi_core_objc",
+    ],
+)
+
+valdi_android_library(
+    name = "valdi_webview_android_impl",
+    srcs = glob([
+        "android/**/*.kt",
+    ]),
+    visibility = ["//visibility:public"],
+    deps = [
+        ":valdi_webview_api_kt",
+        "//valdi:valdi_java",
+    ],
+)
+
+valdi_module(
+    name = "valdi_webview",
+    srcs = glob([
+        "src/**/*.ts",
+        "src/**/*.d.ts",
+    ]),
+    android_class_path = "com.snap.valdi.modules.webview",
+    android_deps = [":valdi_webview_android_impl"],
+    android_output_target = "release",
+    ios_deps = [":valdi_webview_ios_impl"],
+    ios_module_name = "SCCValdiWebView",
+    ios_output_target = "release",
+    visibility = ["//visibility:public"],
+    deps = [
+        "//src/valdi_modules/src/valdi/valdi_core",
+        "//src/valdi_modules/src/valdi/valdi_tsx",
+    ],
+)
diff --git a/src/valdi_modules/src/valdi/valdi_webview/android/WebViewNativeModuleFactoryImpl.kt b/src/valdi_modules/src/valdi/valdi_webview/android/WebViewNativeModuleFactoryImpl.kt
new file mode 100644
index 00000000..4fc79a6d
--- /dev/null
+++ b/src/valdi_modules/src/valdi/valdi_webview/android/WebViewNativeModuleFactoryImpl.kt
@@ -0,0 +1,14 @@
+package com.snap.valdi.modules.webview
+
+import com.snap.valdi.modules.RegisterValdiModule
+
+@RegisterValdiModule
+class WebViewNativeModuleFactoryImpl : WebViewNativeModuleFactory() {
+    override fun onLoadModule(): WebViewNativeModule {
+        return object : WebViewNativeModule {
+            override fun createNativeController(): IWebViewController {
+                return WebViewControllerImpl()
+            }
+        }
+    }
+}
diff --git a/src/valdi_modules/src/valdi/valdi_webview/android/com/snap/valdi/modules/webview/AndroidWebViewHolder.kt b/src/valdi_modules/src/valdi/valdi_webview/android/com/snap/valdi/modules/webview/AndroidWebViewHolder.kt
new file mode 100644
index 00000000..0f9e4760
--- /dev/null
+++ b/src/valdi_modules/src/valdi/valdi_webview/android/com/snap/valdi/modules/webview/AndroidWebViewHolder.kt
@@ -0,0 +1,194 @@
+package com.snap.valdi.modules.webview
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.os.Handler
+import android.os.Looper
+import android.view.View
+import android.view.ViewGroup
+import android.webkit.WebChromeClient
+import android.webkit.WebSettings
+import android.webkit.WebView
+import android.webkit.WebViewClient
+import java.util.concurrent.CountDownLatch
+
+internal class AndroidWebViewHolder(
+    private val webViewClient: WebViewClient,
+    private val bridge: Any,
+    private val bridgeName: String,
+    private val nativeBridgeName: String
+) {
+    private val mainHandler = Handler(Looper.getMainLooper())
+    private val pendingCallbacks = mutableListOf<(WebView) -> Unit>()
+    private var context: Context? = null
+    private var webView: WebView? = null
+    private var disposed = false
+    private var bridgeEnabled = false
+    private var bridgeInstalled = false
+
+    fun getWebViewSync(context: Context): View? {
+        if (isUiThread()) {
+            this.context = context
+            return ensureWebView()
+        }
+
+        var result: View? = null
+        val latch = CountDownLatch(1)
+        mainHandler.post {
+            this.context = context
+            result = ensureWebView()
+            latch.countDown()
+        }
+        latch.await()
+        return result
+    }
+
+    fun getWebViewOnUiThread(callback: (WebView) -> Unit) {
+        runOnUiThread {
+            val webView = ensureWebView()
+            if (webView == null) {
+                if (!disposed) {
+                    pendingCallbacks.add(callback)
+                }
+                return@runOnUiThread
+            }
+            callback(webView)
+        }
+    }
+
+    fun withExistingWebViewOnUiThread(callback: (WebView?) -> Unit) {
+        runOnUiThread {
+            callback(webView)
+        }
+    }
+
+    fun setBridgeEnabled(bridgeEnabled: Boolean) {
+        runOnUiThread {
+            this.bridgeEnabled = bridgeEnabled
+            webView?.let { configureBridge(it) }
+        }
+    }
+
+    fun injectBridge() {
+        runOnUiThread {
+            webView?.let { injectBridge(it) }
+        }
+    }
+
+    fun dispose() {
+        runOnUiThread {
+            disposed = true
+            context = null
+            pendingCallbacks.clear()
+            webView?.let {
+                prepareWebViewForRelease(it)
+                it.destroy()
+            }
+            webView = null
+        }
+    }
+
+    private fun ensureWebView(): WebView? {
+        if (disposed) {
+            return null
+        }
+
+        webView?.let {
+            flushPendingCallbacks(it)
+            return it
+        }
+
+        val context = context ?: return null
+        return WebView(context).also {
+            webView = it
+            configureWebView(it)
+            flushPendingCallbacks(it)
+        }
+    }
+
+    @SuppressLint("SetJavaScriptEnabled")
+    private fun configureWebView(webView: WebView) {
+        webView.isFocusable = true
+        webView.isFocusableInTouchMode = true
+        webView.webChromeClient = WebChromeClient()
+        configureSettings(webView.settings)
+        webView.webViewClient = webViewClient
+        configureBridge(webView)
+    }
+
+    private fun configureSettings(settings: WebSettings) {
+        settings.javaScriptEnabled = true
+        settings.domStorageEnabled = true
+        settings.javaScriptCanOpenWindowsAutomatically = true
+        settings.loadsImagesAutomatically = true
+        settings.mediaPlaybackRequiresUserGesture = false
+        settings.useWideViewPort = true
+        settings.loadWithOverviewMode = true
+    }
+
+    private fun configureBridge(webView: WebView) {
+        if (!bridgeEnabled) {
+            if (bridgeInstalled) {
+                webView.removeJavascriptInterface(nativeBridgeName)
+                bridgeInstalled = false
+            }
+            return
+        }
+
+        if (!bridgeInstalled) {
+            webView.addJavascriptInterface(bridge, nativeBridgeName)
+            bridgeInstalled = true
+        }
+        injectBridge(webView)
+    }
+
+    private fun injectBridge(webView: WebView) {
+        if (!bridgeEnabled || !bridgeInstalled) {
+            return
+        }
+
+        webView.evaluateJavascript(
+            """
+            window.$bridgeName = window.$bridgeName || {};
+            window.$bridgeName.postMessage = function(message) {
+              var stringMessage = typeof message === 'string' ? message : JSON.stringify(message);
+              window.$nativeBridgeName.postMessage(String(stringMessage));
+            };
+            """.trimIndent(),
+            null
+        )
+    }
+
+    private fun prepareWebViewForRelease(webView: WebView) {
+        (webView.parent as? ViewGroup)?.removeView(webView)
+        webView.stopLoading()
+        if (bridgeInstalled) {
+            webView.removeJavascriptInterface(nativeBridgeName)
+            bridgeInstalled = false
+        }
+        webView.webViewClient = WebViewClient()
+        webView.webChromeClient = WebChromeClient()
+    }
+
+    private fun flushPendingCallbacks(webView: WebView) {
+        if (pendingCallbacks.isEmpty()) {
+            return
+        }
+
+        val callbacks = pendingCallbacks.toList()
+        pendingCallbacks.clear()
+        callbacks.forEach { it(webView) }
+    }
+
+    private fun runOnUiThread(block: () -> Unit) {
+        if (isUiThread()) {
+            block()
+            return
+        }
+        mainHandler.post(block)
+    }
+
+    private fun isUiThread(): Boolean {
+        return Looper.myLooper() == Looper.getMainLooper()
+    }
+}
diff --git a/src/valdi_modules/src/valdi/valdi_webview/android/com/snap/valdi/modules/webview/ValdiWebView.kt b/src/valdi_modules/src/valdi/valdi_webview/android/com/snap/valdi/modules/webview/ValdiWebView.kt
new file mode 100644
index 00000000..d63b0c71
--- /dev/null
+++ b/src/valdi_modules/src/valdi/valdi_webview/android/com/snap/valdi/modules/webview/ValdiWebView.kt
@@ -0,0 +1,62 @@
+package com.snap.valdi.modules.webview
+
+import android.content.Context
+import android.view.MotionEvent
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.annotation.Keep
+import com.snap.valdi.views.ValdiRecyclableView
+import com.snap.valdi.views.ValdiTouchEventResult
+import com.snap.valdi.views.ValdiTouchTarget
+
+interface ValdiNativeWebViewController {
+    fun getWebView(context: Context): View?
+}
+
+@Keep
+open class ValdiWebView(context: Context) : FrameLayout(context), ValdiTouchTarget, ValdiRecyclableView {
+    private var controller: ValdiNativeWebViewController? = null
+    private var controllerWebView: View? = null
+
+    fun setController(controller: ValdiNativeWebViewController?) {
+        if (this.controller == controller) {
+            return
+        }
+        detachControllerWebView()
+        this.controller = controller
+        attachControllerWebView()
+    }
+
+    override fun onDetachedFromWindow() {
+        detachControllerWebView()
+        super.onDetachedFromWindow()
+    }
+
+    override fun processTouchEvent(event: MotionEvent): ValdiTouchEventResult {
+        if (dispatchTouchEvent(event)) {
+            return ValdiTouchEventResult.ConsumeEventAndCancelOtherGestures
+        }
+        return ValdiTouchEventResult.IgnoreEvent
+    }
+
+    override fun prepareForRecycling() {
+        detachControllerWebView()
+        controller = null
+    }
+
+    private fun attachControllerWebView() {
+        val webView = controller?.getWebView(context) ?: return
+        (webView.parent as? ViewGroup)?.removeView(webView)
+        addView(webView, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+        controllerWebView = webView
+    }
+
+    private fun detachControllerWebView() {
+        val webView = controllerWebView
+        if (webView != null && webView.parent == this) {
+            removeView(webView)
+        }
+        controllerWebView = null
+    }
+}
diff --git a/src/valdi_modules/src/valdi/valdi_webview/android/com/snap/valdi/modules/webview/ValdiWebViewAttributesBinder.kt b/src/valdi_modules/src/valdi/valdi_webview/android/com/snap/valdi/modules/webview/ValdiWebViewAttributesBinder.kt
new file mode 100644
index 00000000..957c2734
--- /dev/null
+++ b/src/valdi_modules/src/valdi/valdi_webview/android/com/snap/valdi/modules/webview/ValdiWebViewAttributesBinder.kt
@@ -0,0 +1,25 @@
+package com.snap.valdi.modules.webview
+
+import android.content.Context
+import com.snap.valdi.attributes.AttributesBinder
+import com.snap.valdi.attributes.AttributesBindingContext
+import com.snap.valdi.attributes.RegisterAttributesBinder
+
+@RegisterAttributesBinder
+class ValdiWebViewAttributesBinder(private val context: Context) : AttributesBinder<ValdiWebView> {
+    override val viewClass: Class<ValdiWebView>
+        get() = ValdiWebView::class.java
+
+    override fun bindAttributes(attributesBindingContext: AttributesBindingContext<ValdiWebView>) {
+        attributesBindingContext.bindUntypedAttribute(
+            "controller",
+            false,
+            { view, value ->
+                view.setController(value as? ValdiNativeWebViewController)
+            },
+            { view ->
+                view.setController(null)
+            }
+        )
+    }
+}
diff --git a/src/valdi_modules/src/valdi/valdi_webview/android/com/snap/valdi/modules/webview/WebViewControllerImpl.kt b/src/valdi_modules/src/valdi/valdi_webview/android/com/snap/valdi/modules/webview/WebViewControllerImpl.kt
new file mode 100644
index 00000000..1e465e3f
--- /dev/null
+++ b/src/valdi_modules/src/valdi/valdi_webview/android/com/snap/valdi/modules/webview/WebViewControllerImpl.kt
@@ -0,0 +1,158 @@
+package com.snap.valdi.modules.webview
+
+import android.content.Context
+import android.webkit.JavascriptInterface
+import android.webkit.WebView
+import android.webkit.WebViewClient
+import com.snap.valdi.promise.Promise
+import com.snap.valdi.promise.ResolvablePromise
+
+internal class WebViewControllerImpl : IWebViewController, ValdiNativeWebViewController {
+    private val listenerLock = Any()
+    private lateinit var webViewHolder: AndroidWebViewHolder
+    private var listener: IWebViewListener? = null
+    private var loading = false
+
+    init {
+        webViewHolder = AndroidWebViewHolder(
+            webViewClient = object : WebViewClient() {
+                override fun onPageStarted(view: WebView, url: String?, favicon: android.graphics.Bitmap?) {
+                    loading = true
+                    webViewHolder.injectBridge()
+                }
+
+                override fun onPageFinished(view: WebView, url: String?) {
+                    loading = false
+                    webViewHolder.injectBridge()
+                    lockedListener()?.onLoadCompleted()
+                }
+
+                @Deprecated("Deprecated in Java")
+                override fun onReceivedError(
+                    view: WebView,
+                    errorCode: Int,
+                    description: String?,
+                    failingUrl: String?
+                ) {
+                    loading = false
+                    lockedListener()?.onLoadFailed(description ?: "Failed to load $failingUrl")
+                }
+            },
+            bridge = Bridge(this),
+            bridgeName = BRIDGE_NAME,
+            nativeBridgeName = NATIVE_BRIDGE_NAME
+        )
+    }
+
+    override fun getWebView(context: Context): android.view.View? {
+        return webViewHolder.getWebViewSync(context)
+    }
+
+    override fun load(request: WebViewLoadRequest) {
+        webViewHolder.getWebViewOnUiThread { webView ->
+            loadRequest(request, webView)
+        }
+    }
+
+    override fun reload() {
+        webViewHolder.getWebViewOnUiThread { webView ->
+            loading = true
+            webView.reload()
+        }
+    }
+
+    override fun stopLoading() {
+        webViewHolder.getWebViewOnUiThread { webView ->
+            loading = false
+            webView.stopLoading()
+        }
+    }
+
+    override fun getState(): Promise<WebViewControllerState> {
+        val promise = ResolvablePromise<WebViewControllerState>()
+        webViewHolder.withExistingWebViewOnUiThread { webView ->
+            promise.fulfillSuccess(
+                WebViewControllerState(
+                    webView?.canGoBack() ?: false,
+                    webView?.canGoForward() ?: false,
+                    loading
+                )
+            )
+        }
+        return promise
+    }
+
+    override fun goBack() {
+        webViewHolder.getWebViewOnUiThread { webView ->
+            webView.goBack()
+        }
+    }
+
+    override fun goForward() {
+        webViewHolder.getWebViewOnUiThread { webView ->
+            webView.goForward()
+        }
+    }
+
+    override fun evaluateJavaScript(script: String, callback: ((WebViewJavaScriptResult) -> Unit)?) {
+        webViewHolder.getWebViewOnUiThread { webView ->
+            webView.evaluateJavascript(script) { value ->
+                callback?.invoke(WebViewJavaScriptResult(value, null))
+            }
+        }
+    }
+
+    override fun setListener(listener: IWebViewListener?) {
+        setLockedListener(listener)
+        webViewHolder.setBridgeEnabled(listener != null)
+    }
+
+    override fun dispose() {
+        setLockedListener(null)
+        loading = false
+        webViewHolder.dispose()
+    }
+
+    private fun lockedListener(): IWebViewListener? {
+        synchronized(listenerLock) {
+            return listener
+        }
+    }
+
+    private fun setLockedListener(listener: IWebViewListener?) {
+        synchronized(listenerLock) {
+            this.listener = listener
+        }
+    }
+
+    private fun loadRequest(request: WebViewLoadRequest, webView: WebView) {
+        val html = request.html
+        if (html != null) {
+            loading = true
+            webView.loadDataWithBaseURL(null, html, "text/html", "UTF-8", null)
+            return
+        }
+
+        val url = request.url
+        if (url != null) {
+            loading = true
+            webView.loadUrl(url)
+        }
+    }
+
+    private fun handleMessage(message: String) {
+        lockedListener()?.onMessage(message)
+    }
+
+    private class Bridge(private val controller: WebViewControllerImpl) {
+        @JavascriptInterface
+        fun postMessage(message: String?) {
+            controller.handleMessage(message ?: "")
+        }
+    }
+
+    private companion object {
+        private const val BRIDGE_NAME = "Valdi"
+        private const val NATIVE_BRIDGE_NAME = "__ValdiNativeBridge"
+    }
+}
diff --git a/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWKWebViewHolder.h b/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWKWebViewHolder.h
new file mode 100644
index 00000000..cd08a115
--- /dev/null
+++ b/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWKWebViewHolder.h
@@ -0,0 +1,24 @@
+#import <Foundation/Foundation.h>
+#import <UIKit/UIKit.h>
+#import <WebKit/WebKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+typedef void (^SCValdiWKWebViewCallback)(WKWebView *_Nullable webView);
+
+@interface SCValdiWKWebViewHolder : NSObject
+
+- (instancetype)initWithNavigationDelegate:(id<WKNavigationDelegate>)navigationDelegate
+                      scriptMessageHandler:(id<WKScriptMessageHandler>)scriptMessageHandler
+                                bridgeName:(NSString *)bridgeName NS_DESIGNATED_INITIALIZER;
+
+- (instancetype)init NS_UNAVAILABLE;
+- (UIView *_Nullable)getWebViewSync;
+- (void)getWebViewOnMainThread:(SCValdiWKWebViewCallback)callback;
+- (void)withExistingWebViewOnMainThread:(SCValdiWKWebViewCallback)callback;
+- (void)setBridgeEnabled:(BOOL)bridgeEnabled;
+- (void)dispose;
+
+@end
+
+NS_ASSUME_NONNULL_END
diff --git a/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWKWebViewHolder.m b/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWKWebViewHolder.m
new file mode 100644
index 00000000..9aeaa935
--- /dev/null
+++ b/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWKWebViewHolder.m
@@ -0,0 +1,161 @@
+#import "SCValdiWKWebViewHolder.h"
+
+#import "valdi_core/SCValdiUnsetAndReleaseInMainThread.h"
+
+static void SCValdiWKWebViewRunOnMainAsync(dispatch_block_t block)
+{
+    if (NSThread.isMainThread) {
+        block();
+        return;
+    }
+    dispatch_async(dispatch_get_main_queue(), block);
+}
+
+static void SCValdiWKWebViewRunOnMainSync(dispatch_block_t block)
+{
+    if (NSThread.isMainThread) {
+        block();
+        return;
+    }
+    dispatch_sync(dispatch_get_main_queue(), block);
+}
+
+@implementation SCValdiWKWebViewHolder {
+    WKWebView *_webView;
+    __weak id<WKNavigationDelegate> _navigationDelegate;
+    __weak id<WKScriptMessageHandler> _scriptMessageHandler;
+    NSString *_bridgeName;
+    BOOL _disposed;
+    BOOL _bridgeEnabled;
+    BOOL _bridgeInstalled;
+}
+
+- (instancetype)initWithNavigationDelegate:(id<WKNavigationDelegate>)navigationDelegate
+                      scriptMessageHandler:(id<WKScriptMessageHandler>)scriptMessageHandler
+                                bridgeName:(NSString *)bridgeName
+{
+    self = [super init];
+    if (self) {
+        _navigationDelegate = navigationDelegate;
+        _scriptMessageHandler = scriptMessageHandler;
+        _bridgeName = [bridgeName copy];
+    }
+    return self;
+}
+
+- (UIView *)getWebViewSync
+{
+    __block WKWebView *webView = nil;
+    SCValdiWKWebViewRunOnMainSync(^{
+        webView = [self _ensureWebView];
+    });
+    return webView;
+}
+
+- (void)getWebViewOnMainThread:(SCValdiWKWebViewCallback)callback
+{
+    SCValdiWKWebViewRunOnMainAsync(^{
+        callback([self _ensureWebView]);
+    });
+}
+
+- (void)withExistingWebViewOnMainThread:(SCValdiWKWebViewCallback)callback
+{
+    SCValdiWKWebViewRunOnMainAsync(^{
+        callback(_webView);
+    });
+}
+
+- (void)setBridgeEnabled:(BOOL)bridgeEnabled
+{
+    SCValdiWKWebViewRunOnMainAsync(^{
+        _bridgeEnabled = bridgeEnabled;
+        if (_webView) {
+            [self _configureBridgeInWebView:_webView];
+        }
+    });
+}
+
+- (void)dispose
+{
+    SCValdiWKWebViewRunOnMainAsync(^{
+        [self _prepareWebViewForRelease];
+        _disposed = YES;
+        SCValdiUnsetAndReleaseInMainThread((__strong id *)&_webView);
+    });
+}
+
+#pragma mark - Private
+
+- (WKWebView *)_ensureWebView
+{
+    if (_disposed) {
+        return nil;
+    }
+
+    if (_webView) {
+        return _webView;
+    }
+
+    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
+    _webView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:configuration];
+    [self _configureWebView:_webView];
+    return _webView;
+}
+
+- (void)_configureWebView:(WKWebView *)webView
+{
+    webView.navigationDelegate = _navigationDelegate;
+    [self _configureBridgeInWebView:webView];
+}
+
+- (void)_configureBridgeInWebView:(WKWebView *)webView
+{
+    WKUserContentController *controller = webView.configuration.userContentController;
+    if (_bridgeInstalled) {
+        [controller removeScriptMessageHandlerForName:_bridgeName];
+        [controller removeAllUserScripts];
+        _bridgeInstalled = NO;
+    }
+
+    id<WKScriptMessageHandler> scriptMessageHandler = _scriptMessageHandler;
+    if (!_bridgeEnabled || !scriptMessageHandler) {
+        return;
+    }
+
+    NSString *source = [NSString stringWithFormat:
+        @"window.%@ = window.%@ || {};"
+         "window.%@.postMessage = function(message) {"
+         "  var stringMessage = typeof message === 'string' ? message : JSON.stringify(message);"
+         "  window.webkit.messageHandlers.%@.postMessage(String(stringMessage));"
+         "};",
+        _bridgeName,
+        _bridgeName,
+        _bridgeName,
+        _bridgeName];
+    WKUserScript *script = [[WKUserScript alloc] initWithSource:source
+                                                  injectionTime:WKUserScriptInjectionTimeAtDocumentStart
+                                               forMainFrameOnly:NO];
+    [controller addUserScript:script];
+    [controller addScriptMessageHandler:scriptMessageHandler name:_bridgeName];
+    _bridgeInstalled = YES;
+}
+
+- (void)_prepareWebViewForRelease
+{
+    [_webView removeFromSuperview];
+    [_webView stopLoading];
+    if (_bridgeInstalled) {
+        [_webView.configuration.userContentController removeScriptMessageHandlerForName:_bridgeName];
+        [_webView.configuration.userContentController removeAllUserScripts];
+        _bridgeInstalled = NO;
+    }
+    _webView.navigationDelegate = nil;
+}
+
+- (void)dealloc
+{
+    [self dispose];
+}
+
+@end
diff --git a/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebView.h b/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebView.h
new file mode 100644
index 00000000..35086076
--- /dev/null
+++ b/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebView.h
@@ -0,0 +1,11 @@
+#import <UIKit/UIKit.h>
+
+@protocol SCValdiNativeWebViewController <NSObject>
+
+@property (nonatomic, readonly, nullable) UIView *webView;
+
+@end
+
+@interface SCValdiWebView : UIView
+
+@end
diff --git a/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebView.m b/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebView.m
new file mode 100644
index 00000000..159c1f81
--- /dev/null
+++ b/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebView.m
@@ -0,0 +1,63 @@
+#import "SCValdiWebView.h"
+
+#import "valdi/ios/Categories/UIView+Valdi.h"
+#import "valdi/ios/SCValdiAttributesBinder.h"
+
+@implementation SCValdiWebView {
+    id<SCValdiNativeWebViewController> _controller;
+}
+
+- (BOOL)willEnqueueIntoValdiPool
+{
+    return NO;
+}
+
+- (void)setValdiWebViewController:(nullable id<SCValdiNativeWebViewController>)controller
+{
+    if (_controller == controller) {
+        return;
+    }
+
+    [_controller.webView removeFromSuperview];
+
+    _controller = controller;
+
+    UIView *webView = _controller.webView;
+    if (!webView) {
+        return;
+    }
+
+    [webView removeFromSuperview];
+    webView.frame = self.bounds;
+    [self addSubview:webView];
+}
+
+- (void)layoutSubviews
+{
+    [super layoutSubviews];
+    _controller.webView.frame = self.bounds;
+}
+
++ (void)bindAttributes:(id<SCValdiAttributesBinderProtocol>)attributesBinder
+{
+    [attributesBinder bindAttribute:@"controller"
+        invalidateLayoutOnChange:NO
+        withUntypedBlock:^BOOL(SCValdiWebView *view, id attributeValue, id<SCValdiAnimatorProtocol> animator) {
+            if (![attributeValue conformsToProtocol:@protocol(SCValdiNativeWebViewController)]) {
+                [view setValdiWebViewController:nil];
+                return NO;
+            }
+            [view setValdiWebViewController:attributeValue];
+            return YES;
+        }
+        resetBlock:^(SCValdiWebView *view, id<SCValdiAnimatorProtocol> animator) {
+            [view setValdiWebViewController:nil];
+        }];
+}
+
+- (void)dealloc
+{
+    [_controller.webView removeFromSuperview];
+}
+
+@end
diff --git a/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebViewControllerImpl.h b/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebViewControllerImpl.h
new file mode 100644
index 00000000..6f50c6ea
--- /dev/null
+++ b/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebViewControllerImpl.h
@@ -0,0 +1,6 @@
+#import <Foundation/Foundation.h>
+
+#import <SCCValdiWebViewTypes/SCCValdiWebViewTypes.h>
+
+@interface SCValdiWebViewControllerImpl : NSObject <SCValdiWebViewController>
+@end
diff --git a/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebViewControllerImpl.m b/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebViewControllerImpl.m
new file mode 100644
index 00000000..357323fc
--- /dev/null
+++ b/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebViewControllerImpl.m
@@ -0,0 +1,200 @@
+#import "SCValdiWebViewControllerImpl.h"
+
+#import <WebKit/WebKit.h>
+
+#import "SCValdiWebView.h"
+#import "SCValdiWKWebViewHolder.h"
+#import "valdi_core/SCValdiResolvablePromise.h"
+
+static NSString *const SCValdiWebViewBridgeName = @"Valdi";
+
+@interface SCValdiWebViewControllerImpl () <SCValdiNativeWebViewController, WKNavigationDelegate, WKScriptMessageHandler>
+@end
+
+@implementation SCValdiWebViewControllerImpl {
+    SCValdiWKWebViewHolder *_webViewHolder;
+    id<SCValdiWebViewListener> _listener;
+}
+
+- (instancetype)init
+{
+    self = [super init];
+    if (self) {
+        _webViewHolder = [[SCValdiWKWebViewHolder alloc] initWithNavigationDelegate:self
+                                                               scriptMessageHandler:self
+                                                                         bridgeName:SCValdiWebViewBridgeName];
+    }
+    return self;
+}
+
+- (UIView *)webView
+{
+    return [_webViewHolder getWebViewSync];
+}
+
+- (void)loadWithRequest:(SCValdiWebViewLoadRequest *)request
+{
+    [_webViewHolder getWebViewOnMainThread:^(WKWebView *webView) {
+        if (!webView) {
+            return;
+        }
+        [self _loadRequest:request inWebView:webView];
+    }];
+}
+
+- (void)reload
+{
+    [_webViewHolder getWebViewOnMainThread:^(WKWebView *webView) {
+        [webView reload];
+    }];
+}
+
+- (void)stopLoading
+{
+    [_webViewHolder getWebViewOnMainThread:^(WKWebView *webView) {
+        [webView stopLoading];
+    }];
+}
+
+- (SCValdiPromise<SCValdiWebViewControllerState *> *)getState
+{
+    SCValdiResolvablePromise<SCValdiWebViewControllerState *> *promise = [SCValdiResolvablePromise new];
+    [_webViewHolder getWebViewOnMainThread:^(WKWebView *webView) {
+        SCValdiWebViewControllerState *state = [SCValdiWebViewControllerState new];
+        state.canGoBack = webView.canGoBack;
+        state.canGoForward = webView.canGoForward;
+        state.loading = webView.loading;
+        [promise fulfillWithSuccessValue:state];
+    }];
+    return promise;
+}
+
+- (void)goBack
+{
+    [_webViewHolder getWebViewOnMainThread:^(WKWebView *webView) {
+        [webView goBack];
+    }];
+}
+
+- (void)goForward
+{
+    [_webViewHolder getWebViewOnMainThread:^(WKWebView *webView) {
+        [webView goForward];
+    }];
+}
+
+- (void)evaluateJavaScriptWithScript:(NSString *)script callback:(SCValdiWebViewControllerEvaluateJavaScriptCallbackBlock)callback
+{
+    [_webViewHolder getWebViewOnMainThread:^(WKWebView *webView) {
+        if (!webView) {
+            if (callback) {
+                SCValdiWebViewJavaScriptResult *result = [SCValdiWebViewJavaScriptResult new];
+                result.errorMessage = @"WebView is disposed";
+                callback(result);
+            }
+            return;
+        }
+
+        [webView evaluateJavaScript:script completionHandler:^(id value, NSError *error) {
+            if (!callback) {
+                return;
+            }
+            SCValdiWebViewJavaScriptResult *result = [SCValdiWebViewJavaScriptResult new];
+            if (error) {
+                result.errorMessage = error.localizedDescription;
+            } else if (value && value != NSNull.null) {
+                result.value = [value description];
+            }
+            callback(result);
+        }];
+    }];
+}
+
+- (void)setListenerWithListener:(id<SCValdiWebViewListener>)listener
+{
+    [self _setLockedListener:listener];
+    [_webViewHolder setBridgeEnabled:listener != nil];
+}
+
+- (void)dispose
+{
+    [self _setLockedListener:nil];
+    [_webViewHolder dispose];
+}
+
+#pragma mark - WKNavigationDelegate
+
+- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
+{
+    [[self _lockedListener] onLoadCompleted];
+}
+
+- (void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error
+{
+    [[self _lockedListener] onLoadFailedWithErrorMessage:error.localizedDescription];
+}
+
+- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error
+{
+    [[self _lockedListener] onLoadFailedWithErrorMessage:error.localizedDescription];
+}
+
+#pragma mark - WKScriptMessageHandler
+
+- (void)userContentController:(WKUserContentController *)userContentController
+      didReceiveScriptMessage:(WKScriptMessage *)message
+{
+    if (![message.name isEqualToString:SCValdiWebViewBridgeName]) {
+        return;
+    }
+
+    NSString *body = [message.body isKindOfClass:NSString.class] ? message.body : [message.body description];
+    [[self _lockedListener] onMessageWithMessage:body ?: @""];
+}
+
+#pragma mark - Private
+
+- (id<SCValdiWebViewListener>)_lockedListener
+{
+    @synchronized (self) {
+        return _listener;
+    }
+}
+
+- (void)_setLockedListener:(id<SCValdiWebViewListener>)listener
+{
+    @synchronized (self) {
+        _listener = listener;
+    }
+}
+
+- (void)_loadRequest:(SCValdiWebViewLoadRequest *)request inWebView:(WKWebView *)webView
+{
+    if (!request) {
+        return;
+    }
+
+    if (request.html != nil) {
+        [webView loadHTMLString:request.html baseURL:nil];
+        return;
+    }
+
+    if (request.url.length == 0) {
+        return;
+    }
+
+    NSURL *url = [NSURL URLWithString:request.url];
+    if (!url) {
+        [[self _lockedListener] onLoadFailedWithErrorMessage:[NSString stringWithFormat:@"Invalid URL: %@", request.url]];
+        return;
+    }
+
+    [webView loadRequest:[NSURLRequest requestWithURL:url]];
+}
+
+- (void)dealloc
+{
+    [self dispose];
+}
+
+@end
diff --git a/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebViewNativeModule.m b/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebViewNativeModule.m
new file mode 100644
index 00000000..bfe93420
--- /dev/null
+++ b/src/valdi_modules/src/valdi/valdi_webview/ios/SCValdiWebViewNativeModule.m
@@ -0,0 +1,31 @@
+#import <Foundation/Foundation.h>
+
+#import "SCValdiWebViewControllerImpl.h"
+#import "valdi_core/SCValdiModuleFactoryRegistry.h"
+#import <SCCValdiWebViewTypes/SCCValdiWebViewTypes.h>
+
+@interface SCValdiWebViewNativeModuleImpl : NSObject <SCCValdiWebViewWebViewNativeModule>
+@end
+
+@implementation SCValdiWebViewNativeModuleImpl
+
+- (id<SCValdiWebViewController>)createNativeController
+{
+    return [SCValdiWebViewControllerImpl new];
+}
+
+@end
+
+@interface SCValdiWebViewNativeModuleFactory : SCCValdiWebViewWebViewNativeModuleFactory
+@end
+
+@implementation SCValdiWebViewNativeModuleFactory
+
+VALDI_REGISTER_MODULE()
+
+- (id<SCCValdiWebViewWebViewNativeModule>)onLoadModule
+{
+    return [SCValdiWebViewNativeModuleImpl new];
+}
+
+@end
diff --git a/src/valdi_modules/src/valdi/valdi_webview/module.yaml b/src/valdi_modules/src/valdi/valdi_webview/module.yaml
new file mode 100644
index 00000000..3fb8d1dc
--- /dev/null
+++ b/src/valdi_modules/src/valdi/valdi_webview/module.yaml
@@ -0,0 +1,7 @@
+output_target: release
+
+bazel_build_file_generation_disabled: true
+
+dependencies:
+  - valdi_core
+  - valdi_tsx
diff --git a/src/valdi_modules/src/valdi/valdi_webview/src/WebView.ts b/src/valdi_modules/src/valdi/valdi_webview/src/WebView.ts
new file mode 100644
index 00000000..1f7e8bad
--- /dev/null
+++ b/src/valdi_modules/src/valdi/valdi_webview/src/WebView.ts
@@ -0,0 +1,15 @@
+import { createNativeController, IWebViewController } from './WebViewNative';
+
+export {
+  IWebViewController,
+  IWebViewControllerState,
+  IWebViewLoadRequest,
+  IWebViewListener,
+  WebViewJavaScriptResult,
+} from './WebViewNative';
+
+export class WebView {
+  static createController(): IWebViewController {
+    return createNativeController();
+  }
+}
diff --git a/src/valdi_modules/src/valdi/valdi_webview/src/WebViewNative.d.ts b/src/valdi_modules/src/valdi/valdi_webview/src/WebViewNative.d.ts
new file mode 100644
index 00000000..97f33e10
--- /dev/null
+++ b/src/valdi_modules/src/valdi/valdi_webview/src/WebViewNative.d.ts
@@ -0,0 +1,77 @@
+/**
+ * @ExportModule
+ */
+
+/**
+ * @ExportModel({
+ *   ios: 'SCValdiWebViewLoadRequest',
+ *   android: 'com.snap.valdi.modules.webview.WebViewLoadRequest'
+ * })
+ */
+export interface IWebViewLoadRequest {
+  /**
+   * Load the web view with a URL.
+   */
+  url?: string;
+
+  /**
+   * Load the web view with the specified HTML.
+   * Takes priority over url when both are set.
+   */
+  html?: string;
+}
+
+/**
+ * @ExportModel({
+ *   ios: 'SCValdiWebViewJavaScriptResult',
+ *   android: 'com.snap.valdi.modules.webview.WebViewJavaScriptResult'
+ * })
+ */
+export interface WebViewJavaScriptResult {
+  value?: string;
+  errorMessage?: string;
+}
+
+/**
+ * @ExportModel({
+ *   ios: 'SCValdiWebViewControllerState',
+ *   android: 'com.snap.valdi.modules.webview.WebViewControllerState'
+ * })
+ */
+export interface IWebViewControllerState {
+  canGoBack: boolean;
+  canGoForward: boolean;
+  loading: boolean;
+}
+
+/**
+ * @ExportProxy({
+ *   ios: 'SCValdiWebViewListener',
+ *   android: 'com.snap.valdi.modules.webview.IWebViewListener'
+ * })
+ */
+export interface IWebViewListener {
+  onMessage(message: string): void;
+  onLoadFailed(errorMessage: string): void;
+  onLoadCompleted(): void;
+}
+
+/**
+ * @ExportProxy({
+ *   ios: 'SCValdiWebViewController',
+ *   android: 'com.snap.valdi.modules.webview.IWebViewController'
+ * })
+ */
+export interface IWebViewController {
+  load(request: IWebViewLoadRequest): void;
+  reload(): void;
+  stopLoading(): void;
+  getState(): Promise<IWebViewControllerState>;
+  goBack(): void;
+  goForward(): void;
+  evaluateJavaScript(script: string, callback?: (result: WebViewJavaScriptResult) => void): void;
+  setListener(listener?: IWebViewListener): void;
+  dispose(): void;
+}
+
+export function createNativeController(): IWebViewController;
diff --git a/src/valdi_modules/src/valdi/valdi_webview/tsconfig.json b/src/valdi_modules/src/valdi/valdi_webview/tsconfig.json
new file mode 100644
index 00000000..eeeaeca2
--- /dev/null
+++ b/src/valdi_modules/src/valdi/valdi_webview/tsconfig.json
@@ -0,0 +1,8 @@
+{
+    "extends": "../_configs/base.tsconfig.json",
+    "compilerOptions": {
+        "noImplicitReturns": true,
+        "noImplicitAny": true,
+        "strict": true
+    }
+}
diff --git a/valdi_core/src/valdi_core/ios/valdi_core/SCValdiUnsetAndReleaseInMainThread.h b/valdi_core/src/valdi_core/ios/valdi_core/SCValdiUnsetAndReleaseInMainThread.h
new file mode 100644
index 00000000..76f9f293
--- /dev/null
+++ b/valdi_core/src/valdi_core/ios/valdi_core/SCValdiUnsetAndReleaseInMainThread.h
@@ -0,0 +1,14 @@
+#import <Foundation/Foundation.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/**
+ * Clears the strong object reference at `object` immediately, then releases the
+ * previous value on the main thread.
+ *
+ * Use this for UIKit/WebKit objects that may be owned by objects deallocated
+ * off-main-thread but must run their final release on the main thread.
+ */
+void SCValdiUnsetAndReleaseInMainThread(__strong id _Nullable * _Nullable object);
+
+NS_ASSUME_NONNULL_END
diff --git a/valdi_core/src/valdi_core/ios/valdi_core/SCValdiUnsetAndReleaseInMainThread.m b/valdi_core/src/valdi_core/ios/valdi_core/SCValdiUnsetAndReleaseInMainThread.m
new file mode 100644
index 00000000..d8a44605
--- /dev/null
+++ b/valdi_core/src/valdi_core/ios/valdi_core/SCValdiUnsetAndReleaseInMainThread.m
@@ -0,0 +1,23 @@
+#import "SCValdiUnsetAndReleaseInMainThread.h"
+
+static void SCValdiReleaseObject(void *context)
+{
+    CFRelease(context);
+}
+
+void SCValdiUnsetAndReleaseInMainThread(__strong id _Nullable * _Nullable object)
+{
+    if (!object || !*object) {
+        return;
+    }
+
+    CFTypeRef retainedObject = CFBridgingRetain(*object);
+    *object = nil;
+
+    if (NSThread.isMainThread) {
+        CFRelease(retainedObject);
+        return;
+    }
+
+    dispatch_async_f(dispatch_get_main_queue(), (void *)retainedObject, SCValdiReleaseObject);
+}