OpenWebF

Bring JavaScript and Web Dev to Flutter

Learn WebF | Developer Guide | Add WebF to Flutter

What is WebF?

WebF is a W3C/WHATWG-compliant web runtime for Flutter that implements HTML, CSS, and the DOM, running JavaScript in a browser-like environment. It's not a browser—it's an application runtime optimized for building native apps using web technologies.

Unlike traditional WebViews, WebF features:

• A custom Flutter-based rendering engine rather than relying on system browsers
• Direct JavaScript-to-native communication without traditional bridge limitations
• Ability to embed Flutter widgets as HTML elements within the app UI
• An application-first design with a persistent JavaScript context

Why WebF?

Build Fast. Ship Fast. Run Fast.

WebF seamlessly glues Web, Flutter, and Native platforms together, enabling you to:

• 🚀 Build Fast: Develop with React, Vue, Svelte, Solid + TailwindCSS, build with Vite or Webpack, and leverage the entire npm ecosystem - it all just works in WebF
• 📦 Ship Fast: Deploy once across all Flutter-supported platforms (iOS, Android, Windows, macOS, Linux) from a single codebase
• ⚡ Run Fast: Experience native-like performance with sub-100ms cold starts and 60fps animations that outpaces traditional WebView solutions

Key Features

Web Standards Compliance

• 🔷 Modern JavaScript (ES6+) - QuickJS runtime with async/await, Promises, modules, optional chaining, and template literals
• 🔷 Essential DOM APIs - Element creation/manipulation, event listeners (capture/bubble), query selectors, classList, custom elements, MutationObserver
• 🔷 Comprehensive CSS Support - Flexbox layouts, positioned layouts (absolute/relative/fixed/sticky), flow layouts, colors, gradients, transforms (2D/3D), transitions, animations, CSS variables, media queries, pseudo-classes
• 🔷 Web APIs - fetch, XMLHttpRequest, WebSockets, localStorage, sessionStorage, Canvas 2D, SVG, URL parsing, timers

Framework & Tooling Compatibility

• ⚛️ Frameworks: React, Vue, Svelte, Preact, Solid, Qwik - your existing components and hooks work without modification
• 🛠️ Build Tools: Vite (recommended), Webpack, esbuild, Rollup, Parcel - HMR, tree-shaking, code splitting all supported
• 🎨 Styling: Tailwind CSS v3, Sass/SCSS, PostCSS, CSS Modules, Styled Components, Emotion
• 📦 npm Ecosystem: Access to thousands of npm packages and the entire JavaScript ecosystem

Flutter Integration

• 🔗 Hybrid UI - Embed Flutter widgets as HTML custom elements with native performance and platform-appropriate appearance
• 🎯 Advanced Gestures - Handle complex touch interactions with native precision via FlutterGestureDetector
• 📱 Native Plugins - Access Flutter plugins (Share, Deep linking, and more) as npm packages
• 🏗️ Cupertino Components - iOS-style native components without CSS emulation

Developer Experience

• 🔍 Chrome DevTools - Console, DOM inspection, and network monitoring
• 📊 In-App DevTools - FPS, frame timing, and memory monitoring
• 🔥 Hot Module Replacement - Full HMR support that preserves state across updates
• ⚡ Async Rendering - Batched DOM updates that are 20x cheaper than browser implementations

Deployment & Performance

• 🚀 Over-the-Air Updates - Deploy instantly via CDN without app store reviews (compliant with Apple App Store and Google Play Store policies)
• ⚡ Fast Startup - Production cold start < 100ms, development 200-300ms
• 🎮 Smooth Animations - 60fps/120fps CSS transform animations with hardware acceleration
• 💾 Optimized Memory - Typical 10-30MB JavaScript heap with shared rendering context
• 🔒 Security - Application sandbox, keychain/keystore encrypted storage with biometric protection, HTTPS enforcement

How It Works

Architecture Overview

WebF combines two complementary layers to deliver a complete web runtime:

1. Web Standards Layer

• **Qu

...