webf-api-compatibility
π―Skillfrom openwebf/webf
Validates and ensures web API compatibility across different platforms and environments within the WebF framework for Flutter.
Installation
npx skills add https://github.com/openwebf/webf --skill webf-api-compatibilitySkill Details
Overview
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
More from this repository7
Helps developers quickly configure and set up routing configurations for web applications within the WebF Flutter framework.
webf-quickstart skill from openwebf/webf
Enables seamless infinite scrolling functionality for web content within Flutter applications using WebF's web runtime.
webf-native-ui skill from openwebf/webf
Optimizes asynchronous rendering performance in WebF by efficiently managing and scheduling JavaScript rendering tasks across Flutter's rendering pipeline.
Extends WebF's native plugin system to enable seamless JavaScript-to-native communication and custom native functionality within Flutter web runtimes.
Enables developers to create native plugins for WebF, extending its JavaScript-to-native communication capabilities in Flutter applications.