Skip to Content
DocsLearn WebFOverview

Learn WebF

WebF is a standards-compliant web rendering engine built on Flutter that enables cross-platform development using HTML, CSS, and JavaScript. Unlike WebViews that rely on system browsers, WebF uses a custom Flutter-based renderer with direct native bindings, delivering near-native performance and seamless integration between WebF app content and Flutter widgets.

WebF is not a browser—it’s an application runtime optimized for building native apps using web technologies. You can use your favorite web frameworks like React, Vue, or Svelte, and they’ll run with near-native performance.

What is a WebF App?

A WebF app is a native Flutter application that uses web technologies (HTML, CSS, JavaScript) for its UI and business logic. It consists of two complementary parts:

1. Web Standards Layer

Standard HTML, CSS, and JavaScript code compatible with web standards:

  • Works with popular frameworks like React, Vue, Svelte, or vanilla JavaScript
  • Uses familiar DOM APIs, CSS styling, and modern JavaScript features
  • Can leverage the vast npm ecosystem and web development tools
  • Portable code that can run in browsers with minimal modifications

2. Flutter Integration Layer

Custom APIs and components exposed from Flutter:

  • Custom Elements: Flutter widgets accessible as HTML elements (e.g., <flutter-button>)
  • Native Modules: Dart/Flutter APIs callable from JavaScript for device features
  • Platform Widgets: Native iOS/Android components integrated seamlessly
  • Native Performance: Critical UI components rendered by Flutter’s engine

Example: Hybrid Architecture

import React from 'react';
import { FlutterButton } from '@openwebf/react-cupertino-ui';
import { WebFShare } from '@openwebf/webf-share';
 
function MyApp() {
  const handleShare = async () => {
    // Call native module
    await WebFShare.shareText({ text: 'Hello from WebF!' });
  };
 
  return (
    <div className="app">
      {/* Standard HTML/CSS */}
      <h1>My WebF App</h1>
 
      {/* Native Flutter widget */}
      <FlutterButton onClick={handleShare}>
        Share
      </FlutterButton>
    </div>
  );
}

This hybrid architecture lets you leverage both the web ecosystem and Flutter’s native capabilities in a single application.

What Makes WebF Different

From Traditional WebView

  • Custom Rendering Engine: WebF uses its own Flutter-based rendering engine instead of the system browser
  • Deep Integration: Direct communication between JavaScript and native code without traditional bridge limitations
  • Hybrid UI: Embed native Flutter widgets directly into your WebF app UI as custom HTML elements
  • Application-First: Designed for native apps with a long-lived JavaScript context
  • Controlled Environment: No arbitrary web navigation—your app code is the security boundary

From Pure Flutter Development

  • Web Ecosystem: Use the entire npm ecosystem, web frameworks, and build tools you already know
  • Faster Iteration: Deploy updates instantly via CDN without app store reviews
  • Team Flexibility: Web developers can build features without learning Dart or Flutter
  • Code Reuse: Share components and logic between web and mobile
  • Standard APIs: Use familiar web APIs instead of learning Flutter-specific patterns

Core Concepts

Standards Compliance

WebF implements W3C and WHATWG specifications, providing:

  • DOM API: Essential Document Object Model APIs that drive web frameworks seamlessly
  • CSS Layout: Flexbox, positioned (absolute/relative/fixed/sticky), inline, inline-block, and block layouts (Grid coming soon)
  • JavaScript Runtime: Modern ES6+ features powered by QuickJS
  • Web APIs: fetch, localStorage, Canvas 2D, WebSockets, and more

Async Rendering Model

WebF uses an asynchronous rendering model for better performance:

  • DOM changes don’t immediately trigger layout
  • Multiple updates are batched together
  • Use onscreen/offscreen events to know when elements are rendered
  • Avoids layout thrashing common in browsers

Native Binding System

Access native device features through typed plugins:

  • Camera, location, file system, and more
  • Distributed as npm packages for easy integration
  • Direct, high-performance communication between JS and native code
  • Create your own plugins to expose custom functionality

Hybrid UI

Seamlessly mix WebF app content and native UI:

  • Embed Flutter widgets as custom HTML elements
  • Use native iOS/Android components alongside WebF app content
  • Get platform-perfect UI without CSS emulation
  • Full access to Flutter’s widget ecosystem

Who Should Use WebF

Web Developers

If you’re a web developer wanting to build native apps:

  • Use React, Vue, Svelte, or any modern framework
  • Keep your existing build tools (Vite, Webpack, etc.)
  • No need to learn Flutter or Dart
  • Deploy updates without app store delays

Flutter Developers

If you’re building Flutter apps and want:

  • Faster iteration on UI without recompiling
  • Web team contributions without learning Dart
  • Dynamic content that updates via CDN
  • Familiar web patterns for certain features

Product Teams

If you’re managing cross-platform products:

  • Single codebase for web and mobile features
  • Faster time-to-market with web technologies
  • OTA updates for instant feature rollouts
  • Leverage existing web development talent

Common Use Cases

Dynamic Content & Features

  • Marketing pages and promotional content
  • News feeds and article readers
  • Dashboards and analytics
  • Forms and surveys
  • E-commerce catalogs

Rapid Prototyping

  • Quickly validate ideas with web tools
  • Test features with users before native implementation
  • A/B test different UI approaches
  • Iterate without build/deploy cycles

Content-Heavy Applications

  • Documentation and help systems
  • Content management
  • Social feeds
  • Media galleries
  • Educational content

Hybrid Applications

  • Native shell with WebF app content areas
  • Platform-specific features in Flutter
  • Dynamic WebF app content for flexibility
  • Best of both worlds

What to Expect

Performance

  • Near-native rendering performance
  • 60fps animations using CSS transforms
  • Fast cold start (< 100ms in production)
  • Efficient JavaScript execution with QuickJS

Development Experience

  • Hot Module Replacement (HMR) support
  • Chrome DevTools for debugging
  • Standard web development workflow
  • No special tooling required

Ecosystem Compatibility

  • Works with React, Vue, Svelte, Solid, Qwik
  • Compatible with Vite, Webpack, Rollup, esbuild
  • Supports Tailwind CSS, Sass, PostCSS
  • Use any npm packages (with some limitations)

Next Steps

Ready to dive deeper? Here’s the recommended path:

  1. How It Works — Understand the architecture and how WebF bridges web and native
  2. Key Features — Explore what WebF can do and its capabilities
  3. WebF Go — Try the companion app to preview your WebF apps on devices
  4. Developer Guide — Start building your first WebF application

Need Help?

OverviewHow It Works