Skip to Content
•Byandycall

Introducing WebF Beta: Bring JavaScript and the Web dev to Flutter

Happy New Year, developers—welcome to WebF Beta.

The web tech stack has become the most popular target for both human developers and AI coding tools, and it has the largest developer ecosystem in history. But shipping that ecosystem to mobile usually means a painful tradeoff: rewrite in a cross-platform framework with its specific API and syntax, or ship inside a WebView and live with its performance and platform differences.

What if there was a third option?

What if your existing web stack—React, Vue, Vite, Tailwind CSS—just worked on mobile and desktop with native performance? No rewrites. Minimal migration.

Today, we’re announcing the beta release of WebF — a W3C/WHATWG-compliant web runtime for Flutter that brings standard web technologies (HTML/CSS/DOM + JavaScript) to mobile and desktop with native performance.

With WebF Beta, you can keep your web stack (React/Vue/Svelte + Vite + Tailwind) and ship it to mobile and desktop. For the fastest dev loop, preview instantly on real devices with WebF Go. When you’re ready to embed WebF in a Flutter app, start with flutter pub add webf. And because the npm ecosystem is huge, we’d love your help validating compatibility by testing your libraries and filing issues when something doesn’t work.

This is also a big unlock for AI-assisted development. Because WebF uses standard web technologies that AI models are heavily trained on, tools like Claude, ChatGPT, and GitHub Copilot can help you build faster than with platform-specific UI frameworks.

Your Existing Stack Just Works

Unlike other cross-platform solutions, WebF is not a new framework you have to adopt. It’s a runtime: you build with standard web technologies, and WebF runs that code on mobile and desktop with native performance.

In practice, many modern stacks work with little to no migration:

Web Frameworks

  • React (v16–19)
  • Vue (v2/v3)
  • Svelte, Preact, Solid, Qwik
  • Vanilla JavaScript

Build Tools

  • Vite (recommended)
  • Webpack, esbuild, Rollup, Parcel

CSS & Styling

  • Tailwind CSS v3
  • Sass/SCSS, PostCSS, CSS Modules
  • Styled Components, Emotion

A Note on Compatibility: The npm ecosystem is huge, and we can’t test everything. If you maintain (or rely on) a package, please try it in WebF and submit an issue  when something doesn’t behave as expected—we’ll use that feedback to improve compatibility.

Getting Started

Option 1: Try WebF in Minutes (WebF Go)

The fastest way to try WebF is WebF Go — a pre-built native app that includes the WebF engine. It loads your web app from a URL, so you can iterate on real devices without building a custom Flutter host app.

Available on:

Quick Start (Web developers):

  1. Create your project: npm create vite@latest my-app
  2. Start the dev server: npm run dev
  3. Open WebF Go and enter the dev server URL shown in your terminal
  • For phones/tablets, use the Network URL (not localhost). With Vite, you can run npm run dev -- --host.
  1. Your app loads instantly, with HMR and DevTools support.

Learn more about WebF Go →

Build with Claude Code (default workflow)

WebF is designed to work great with Claude Code . Run this in your project to install WebF’s Claude Code skills and development resources:

npx @openwebf/webf agents init

This command installs the necessary Claude Code skills into your project, covering the most common use cases for developing WebF apps.

Choose Claude Code to install tailored skills (WebF patterns, API compatibility, routing, performance), or Other agents to copy reference guides into webf_dev/.

Learn more about Coding with Agents →

Option 2: Embed WebF in a Flutter App

  1. Add WebF: flutter pub add webf
  2. Follow the guide: Add WebF to Flutter →

Extraordinary Performance

WebF isn’t just another way to run web code—it’s a custom-built runtime optimized for mobile and desktop applications.

Production apps can start in under 100ms from a cold start.

The Real Performance Problem with Web Apps

The common narrative says web apps feel slower than native apps because JavaScript is heavy or CSS is complex. That’s not the real issue.

The real gap is startup behavior: native apps often start warm; web apps often start cold.

After you restart your phone, everything feels sluggish—apps take longer to open. A few minutes later, launches feel smooth again because the OS has loaded and cached hot code in memory.

Native and Flutter apps take advantage of that warm state. When you open an app, it can reuse a runtime that’s already in memory (including the Flutter engine). The engine might take ~200ms to spin up once, but after that, launches feel consistently fast.

Browsers—and especially WebView-based apps—work differently. They can be very smooth once fully loaded, but they often pay a big up-front cost: a cold JavaScript engine, a cold rendering pipeline, and a full reload of assets and code.

That’s the performance gap: not the language, but the lifecycle. Native and Flutter apps frequently get warm starts; many web apps—particularly in WebView—end up starting from zero far more often.

WebF: Web Technologies, Native Lifecycle

What if HTML/CSS/JavaScript apps used the same startup phase and lifetime as native and Flutter apps?

That’s the core idea that drives WebF’s performance.

WebF keeps its engine warm in memory, just like Flutter and native runtimes. When your app starts, it’s not booting a full browser—it’s reusing an optimized, pre-warmed runtime.

And because WebF separates critical UI work from background tasks, the UI thread stays focused on rendering and input. Your animations, scrolling, and interactions feel smooth and native—just like a Flutter app.

Why Flutter?

Inconsistent UI behavior and platform APIs waste developer time—debugging edge cases, chasing platform-specific bugs, and maintaining “almost the same” behavior across OSes.

That’s why we made a critical architectural decision: use Flutter as the rendering backend for one crucial reason—consistency.

Flutter uses a single rendering engine (Impeller/Skia) across platforms—drawing pixels with the GPU in a consistent way everywhere. That enables pixel-perfect consistency across iOS, Android, and desktop.

And with 55,000+ packages on pub.dev, you get a mature ecosystem that already smooths over platform differences for many native capabilities.

For WebF developers, this means:

  • You target one rendering engine and one set of APIs.
  • You reduce platform-specific testing and QA overhead.
  • You ship one codebase with consistent results.

This is true “write once, run anywhere”—not just code reuse, but pixel-perfect consistency.

And because WebF implements web standards, the development model stays familiar to web developers.

Seamless Flutter Integration

WebF is designed to live inside a real Flutter app—not as a separate “WebView screen”.

We had designed friendly extends API and tools to help you combine Flutter widgets with web UI, or migrating your existing flutter plugins to webf.

Native UI Libraries and Plugins

WebF also provides ready-to-use native UI libraries and native plugins you can adopt alongside your web code:

Hybrid Routing (Flutter ↔ WebF)

For multi-page apps, WebF supports hybrid routing: Flutter navigation (for example, go_router) stays in sync with your WebF routes. On the Flutter side, WebFSubView renders a specific WebF sub-route; on the WebF side, routes can provide titles and styling for native navigation bars.

Hybrid routing →

Native UI: Flutter Widgets as HTML Elements

Need native UI for specific parts (buttons, pickers, complex gestures)? WebF can expose Flutter widgets as custom HTML elements. The recommended workflow uses webf codegen to generate typed bindings from .d.ts definitions, then you implement the widget on the Flutter side.

Native UI →

Native Plugins

WebF’s native plugin system lets JavaScript call into Dart/Flutter to access device features and wrap existing Flutter plugins. For production, WebF provides code generation to create type-safe Dart bindings and a typed npm wrapper (for example @openwebf/webf-share).

Build native plugins →

Developer Experience

This section is still in development during the beta.

We’re working to bring a browser-level developer experience to WebF.

  • Hot Module Replacement: HMR with Vite and modern dev servers for fast iteration
  • Build Tools: Compatible with Vite (recommended), Webpack, esbuild, Rollup, Parcel

In beta:

  • Chrome DevTools: Console logging, DOM inspector, network monitoring, element styles inspection

Beta Limitations

As a beta release, WebF has some limitations we’re actively working on:

Not Currently Supported:

  • Shadow DOM
  • Float and table layouts (by design)
  • IndexedDB (use native plugins for complex storage)
  • WebGL (Canvas 2D only)
  • WebAssembly
  • Breakpoint debugging in DevTools

We’re transparent about what works and what doesn’t. Check our documentation for details, and join the Reddit community  if you run into issues.

Roadmap: Beta to Stable

We’re on a clear path from beta to a stable 1.0 release. Here’s what we’re focused on:

During Beta

We’ll be ready to move toward a stable release once these milestones land:

  1. Add support for Flutter for web, to brings WebF running in web browsers.
  2. Full support for shadcn/ui (a strong foundation for AI-generated UI)
  3. Full support for Tailwind CSS v3 and v4
  4. Popular web UI frameworks “just work” in WebF
  5. A solid baseline for Chrome DevTools during development
  6. Solid code agent support that works seamlessly with WebF

Your feedback shapes the roadmap. We’re listening to early adopters to prioritize features and improvements. Join our community and help us build the future of cross-platform development.

Is WebF ready for production?

WebF is already running in production with a small set of close-beta customers.

The current implementation is solid and stable, and we’re actively improving docs, compatibility, and tooling.

For commercial usage and support options, see Pricing →.

Resources

Join the Beta

We believe your JavaScript code should run seamlessly from the browser to mobile and desktop—and eventually server-side—without platform-specific rewrites.

One codebase. One set of APIs. Built on the web standards that developers—and AI tools—already know.

Ready to be an early adopter and help shape the future of WebF?

We’re excited to see what you’ll build with WebF. Welcome to the beta!

Have questions or feedback? Open an issue  or join our Discord community .

Last updated on: