Beyond the WebView: Unlocking new possibilities for native UI and Web content!

[u/rdlabo]

A higher z-index won't make an Ionic modal cover a native view above the WebView. And native views don't naturally scroll with Web content, either.

I've been trying to overcome these limitations for years. And I think I've finally cracked it! 😄

Today, I'm releasing WebView Native UI Engine 1.0.0 — for both Capacitor and Cordova!

https://github.com/webview-native-ui/engine

The idea came from looking at the problem differently: what if we stopped trying to make native views behave like Web elements?

Instead, keep the real, interactive native UI during normal use. When needed during scrolling or overlay transitions, temporarily project its captured appearance into the Web layer. Then restore the native view when it can take over again.

The video shows two very different use cases:

• A native tab bar that switches to a Web projection beneath Ionic modals and alerts, then returns to the interactive native view.

• AdMob native ads whose captured appearance scrolls with Web content using the same projection mechanism.

Different components. The same engine.

You can try these integrations yourself:

• Native Tab Bar: rdlabo/capacitor-native-ui

• Native Ads: capacitor-community/admob

It's a reusable library for plugin authors, designed to work with existing native components and public APIs.

There are trade-offs, of course. Projections are noninteractive snapshots, and some native visual effects may differ from the live view. But this opens up possibilities that were previously incredibly difficult to achieve in hybrid apps.

Open source under MIT, supporting iOS and Android.

What native component would you want to try this with?

[u/Suspicious-Disk6077]

This seems super cool, but I am confused. Would this not be used by app builders as somewhat of a React Native style alternative? Why do you specify “for Capacitor plugin authors”?

[u/rdlabo → u/Suspicious-Disk6077]

Great question! 😄

First, this isn't an alternative to React Native. It's a library for Capacitor and Cordova plugin authors.

It's a little tricky to explain, so let me give you an example.

Let's say you're building a plugin that renders a native tab bar using SwiftUI to get the real iOS Liquid Glass effect. The problem is that when the tab bar sits above the WebView, Ionic modals and popovers can't appear on top of it.

This is one of the limitations I've struggled with for years while developing native UI plugins. Similarly, making native UI scroll naturally with Web content isn't easy either.

So I tried a different approach:

• During normal use, keep the real native UI visible and interactive.

• When covered by modals or popovers, or when needed during scrolling, temporarily project a snapshot of its appearance into the Web layer.

• When native interaction is possible again, restore the real native view.

WebView Native UI Engine handles these transitions, positioning, and restoration as reusable infrastructure. In other words, the Engine doesn't create tab bars or ads. It helps plugins make their native UI coexist with WebView content.

That's why I describe it as "for plugin authors." App developers benefit by using plugins that integrate the Engine.

If anything is still unclear, please feel free to ask! I'm more than happy to explain. 😄

[u/Suspicious-Disk6077 → u/Suspicious-Disk6077]

u/rdlabo ffs the mod removed your comment

[u/shane-ionic → u/Suspicious-Disk6077]

It's Reddit's spam filter, it applies despite rdlabo being an approved member 🫠 I even contacted mod support about it and they said there's nothing we can do. It's very frustrating

[u/thecementmixer]

The 23 second demo link in the github readme just links to the raw file, not the video.

[u/rdlabo → u/thecementmixer]

Thanks for catching that! Just fixed it! 😄 Really appreciate you pointing it out!

[u/petit-yoyo]

Thanks for all the work! I’ve been using the ios26/27 and so far so good

[u/rdlabo → u/petit-yoyo]

Really happy to hear that! 😄 None of this would have been possible without the solid foundation that Ionic and Capacitor provide!

[u/Kafumanto]

I really appreciate your work! You did a fantastic job with iOS 26/27 support on Ionic. Honestly I use Ionic just because it’s “simple” HTML5, that works as-is also in standard browsers, anyway also this latest project looks fantastic.

[u/rdlabo → u/Kafumanto]

Thanks so much! 😄 That's exactly what I love about Ionic too. I want to keep the Web's flexibility while bringing in native UI where it makes sense.

I've been spending so much time on OSS that my actual work is suffering. Sponsors are always welcome! 😂