Skip to Content
DocsDeveloper GuideOverview

WebF Developer Guide

This guide is for web developers who want to build applications using the WebF framework.

Introduction

What is WebF?

WebF is a new way to build cross-platform applications for mobile and desktop, using the web development ecosystem you already know and love. It’s a standards-compliant rendering engine, built on Flutter, that allows you to use your existing web frameworks, build tools, and libraries to create native apps. With WebF, you can build your WebF application using your favorite web framework—like React, Vue, or Svelte—and it will run with high performance on all major platforms, while still giving you access to powerful native capabilities when you need them.

Core Principles

WebF is designed around a set of core principles to provide a powerful and flexible development experience:

  • Ecosystem Compatibility: WebF is designed to make the modern web development stack just work. It aims for seamless compatibility with your existing tools, including popular frameworks (like React and Vue), build tools (like Vite and Webpack), and your favorite libraries.
  • Performance-First: With features like an asynchronous rendering model, WebF is architected to deliver high-performance, app-like experiences, avoiding many of the performance bottlenecks of traditional web views.
  • Hybrid by Design: WebF embraces a hybrid development model, allowing for deep integration between your WebF application’s frontend code (HTML, CSS, and JavaScript) and the native Flutter host. This enables powerful features like embedding native Flutter widgets directly into the DOM.

WebF vs. WebView

For developers experienced with hybrid apps, the most relevant comparison is between WebF and a standard WebView. While both render web code, their architectures and capabilities are fundamentally different.

  • Custom Rendering Engine vs. System Browser: A WebView uses the device’s built-in browser engine (like Chromium or WebKit). WebF uses its own custom rendering engine, built on Flutter, which is specifically optimized for the performance needs of an application, not a general-purpose document viewer.

  • Deep Integration vs. A Sandboxed Box: A WebView is a black box that is heavily sandboxed. WebF removes this sandbox, enabling true deep integration. The Native Binding System provides a direct, high-performance communication channel between JavaScript and native code that is far more powerful than a typical WebView bridge.

  • True Hybrid UI vs. Web-Only UI: With a WebView, your UI is strictly web-based. WebF’s key advantage is that it allows you to embed native Flutter widgets directly into your DOM as custom HTML elements, allowing you to build a truly hybrid UI.

  • Application-First Architecture: WebF is designed to run a single, cohesive application with a long-lived JavaScript context. This provides a more robust model for state management compared to the page-based lifecycle of content in a WebView.

  • Controlled Navigation: A WebView can often be used to browse the open web. WebF, by contrast, is not a browser; navigating to untrusted or external origins is disallowed by default, ensuring your application remains secure and self-contained.

Quick Navigation

This developer guide is organized into the following sections:

  • Getting Started - Learn how to set up your development environment and create your first WebF app
  • Development Workflow - Understand the day-to-day workflow including hot reload and debugging tools
  • Core Concepts - Master fundamental concepts like DOM, async rendering, CSS, JavaScript, and hybrid routing
  • Web Frameworks - Use React, Vue, Svelte, and other popular frameworks with WebF
  • Build Tools - Integrate with Vite, Webpack, and other modern build tools
  • CSS & Styling - Master layouts, styling, animations, and responsive design
  • Hybrid UI - Seamlessly mix WebF app content with native Flutter widgets
  • Native Plugins - Access native device features through WebF plugins
  • Testing - Write unit, component, and integration tests
  • Debugging & Performance - Debug your app and optimize performance
  • Deployment - Deploy over-the-air updates to your app
  • Security - Understand WebF’s security model
  • CI/CD - Automate testing and deployment
  • Advanced Topics - Explore animations, custom painting, and accessibility
WebF GoGetting Started