Key Features

WebF combines the best of web development with native app capabilities. This page covers what makes WebF powerful and unique.

Web Standards Support

JavaScript & ECMAScript

WebF supports modern JavaScript features through QuickJS:

• ✅ ES6+ syntax (classes, arrow functions, destructuring)
• ✅ Async/await and Promises
• ✅ Template literals and tagged templates
• ✅ Modules (import/export)
• ✅ Spread operators and rest parameters
• ✅ Optional chaining and nullish coalescing

// Modern JavaScript just works
const fetchUserData = async (userId) => {
  const response = await fetch(`/api/users/${userId}`);
  const user = await response.json();
  return user?.profile ?? {};
};

DOM APIs

Essential APIs for manipulating the document structure:

• ✅ Element creation and manipulation
• ✅ Event listeners (capture and bubble phases)
• ✅ Query selectors (querySelector, querySelectorAll)
• ✅ ClassList, attributes, dataset
• ✅ Custom elements (for hybrid UI)
• ✅ MutationObserver (observe DOM changes)

const button = document.createElement('button');
button.textContent = 'Click me';
button.classList.add('primary');
button.addEventListener('click', handleClick);
document.body.appendChild(button);

CSS Support

Comprehensive CSS support for styling:

Layout:

• ✅ Flexbox (recommended)
• ✅ Positioned (absolute, relative, fixed, sticky)
• ✅ Block, inline, and inline-block
• ✅ RTL (right-to-left) support
• ⏳ CSS Grid (coming soon)
• ❌ Float and table layouts (not supported)

Styling:

• ✅ Colors, backgrounds, borders
• ✅ Typography (fonts, text styling)
• ✅ Transforms (2D and 3D)
• ✅ Transitions and animations
• ✅ CSS variables (custom properties)
• ✅ Media queries
• ✅ Pseudo-classes and pseudo-elements

.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  transform: translateY(0);
  transition: transform 0.3s ease;
}
 
.card:hover {
  transform: translateY(-4px);
}

Web APIs

Essential web APIs for building applications:

Framework Compatibility

Officially Tested

WebF works with all major modern web frameworks:

React

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
 
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}
 
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

Vue.js

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
 
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

Svelte

<script>
  let count = 0;
</script>
 
<div>
  <p>Count: {count}</p>
  <button on:click={() => count++}>Increment</button>
</div>

Others

• ✅ Preact
• ✅ Solid.js
• ✅ Qwik
• ✅ Vanilla JavaScript

Build Tools

Compatible with all modern build tools:

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

Styling Solutions

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

Native Integration

Native Plugins

Access device features through npm packages:

// Share dialog
import { WebFShare } from '@openwebf/webf-share';
await WebFShare.shareText({ text: 'Check this out!' });
 
// Deep linking
import { WebFDeepLink } from '@openwebf/webf-deeplink';
await WebFDeepLink.openDeepLink({
  url: 'whatsapp://send?text=Hello',
  fallbackUrl: 'https://wa.me/?text=Hello'
});

Currently Available Plugins:

• Share (system share dialog)
• Deep linking (open and handle deep links)

Note: Additional plugins for camera, file system, secure storage, and other native features can be created using the Build Native Plugins guide.

Custom Plugins

Create your own plugins to expose custom functionality:

1. Write native Dart/Flutter code
2. Use WebF’s binding generator
3. Publish as npm package
4. Use in your WebF app code

Learn More: See the comprehensive Build Native Plugins guide for complete examples including Share and DeepLink module implementations with step-by-step instructions.

Hybrid UI

Flutter Widgets in Web Code

Embed native Flutter widgets as HTML custom elements:

import { FlutterCupertinoButton } from '@openwebf/react-cupertino-ui';
 
function MyApp() {
  return (
    <div className="app">
      <h1>My App</h1>
      {/* This is a real native iOS button */}
      <FlutterCupertinoButton onClick={handlePress}>
        Press Me
      </FlutterCupertinoButton>
    </div>
  );
}

Benefits:

• Platform-perfect appearance
• Native performance
• Proper accessibility
• No CSS emulation needed

Available Hybrid UI Components:

• Cupertino (iOS-style): Buttons, switches, sliders, text fields, pickers, alerts, action sheets, modals, lists, forms, tabs, navigation, and more
• Custom widgets: Create your own Flutter widgets as HTML elements

Note: Material Design components are not currently provided as pre-built packages, but you can create them using the Hybrid UI guide.

Learn More: See the comprehensive Build Hybrid UI Components guide for complete details on creating custom Flutter widgets, handling children patterns, infinite layout constraints, and popup/modal implementations.

Advanced Gestures

Handle complex gestures with native precision:

import { FlutterGestureDetector } from '@openwebf/react-core-ui';
 
function Card() {
  return (
    <FlutterGestureDetector
      onDoubleTap={handleDoubleTap}
      onLongPress={handleLongPress}
      onPanUpdate={handlePan}
    >
      <div className="card">
        Content
      </div>
    </FlutterGestureDetector>
  );
}

Development Features

Hot Module Replacement

Full HMR support with Vite and other modern dev servers:

• Instant updates on save
• State preservation across updates
• Fast feedback loop
• No full reloads needed

Chrome DevTools

Debug with familiar tools:

• Console logging
• DOM inspector
• Network monitoring
• Element styles inspection

Note: Breakpoint debugging not yet supported

In-App DevTools

WebF includes built-in performance tools:

• FPS monitoring
• Frame timing
• Memory usage
• JavaScript execution time

Performance Features

Async Rendering

Batched DOM updates for optimal performance:

• Multiple changes processed together
• No layout thrashing
• 60fps animations maintained
• Efficient memory usage

CSS Transforms

Hardware-accelerated animations:

.animated {
  transform: translateX(0);
  transition: transform 0.3s ease;
}
 
.animated:hover {
  transform: translateX(20px);
}

Transforms run on the compositor thread, maintaining smooth 60fps even during JavaScript execution.

Code Splitting

Lazy load code for faster initial loads:

import { lazy, Suspense } from 'react';
 
const HeavyComponent = lazy(() => import('./HeavyComponent'));
 
function App() {
  return (
    <Suspense fallback={<Loading />}>
      <HeavyComponent />
    </Suspense>
  );
}

Deployment Features

Over-the-Air Updates

Deploy updates instantly without app store reviews:

1. Build your WebF app (npm run build)
2. Deploy to CDN (Vercel, Netlify, AWS S3)
3. Users get updates on next app launch

Benefits:

• No waiting for app store approval
• Instant bug fixes
• A/B testing
• Gradual rollouts

Content Delivery

• Deploy to any CDN or hosting provider
• Standard web deployment workflow
• Cache management
• Version control

Learn More: See the Deployment Guide for platform-specific deployment instructions, CI/CD pipeline examples, and best practices for deploying WebF-powered Flutter apps.

Security Features

Application Sandbox

• No arbitrary web navigation
• Controlled environment
• Your code is the security boundary
• Native plugin permissions

Secure Storage

• Keychain (iOS) / Keystore (Android)
• Encrypted storage for sensitive data
• Biometric protection
• Secure by default

Content Security

• HTTPS enforcement
• Input validation
• XSS protection (when using frameworks)
• Controlled native access

Next Steps

Ready to try these features?

• WebF Go — Test WebF on real devices
• Developer Guide — Build your first app
• Core Concepts — Learn the fundamentals