How Kraken Leverages Flutter to Build a High‑Performance Web Rendering Engine

Hello, I am Ran Mo. At the Global Open Technology Conference (GOTC) I presented the topic "Kraken – a Flutter‑based Web rendering engine" and now share the technical principles and key features in text form.

Kraken Github: https://github.com/openkraken/kraken Kraken website: https://openkraken.com/

Technical Background of Kraken

Cross‑platform development has evolved from browsers to Hybrid solutions, then to React‑Native‑style frameworks, each with trade‑offs. Browsers are mature but struggle on mobile; Hybrid adds a container layer; RN‑style bridges improve performance but cannot fully hide platform differences.

Flutter has become a popular cross‑platform option due to its high performance and consistent UI rendering, though it forms its own ecosystem separate from traditional web or native stacks.

Transitioning front‑end (JavaScript) or native (Swift/Java) code incurs learning costs, but developers familiar with React or Vue can adapt quickly; small teams benefit, while large organizations face exponential conversion costs.

The Flutter ecosystem needs rebuilding of CI/CD pipelines and other infrastructure, which adds significant effort.

Migrating existing JavaScript front‑end projects to Dart + Widget entails substantial rewriting.

To mitigate these challenges, we explore combining the front‑end ecosystem with Flutter.

Technical Principles of Kraken

Kraken follows W3C standards, allowing any front‑end framework (Vue, React, Rax) to run unchanged. A simple Vue‑CLI project can be built for Kraken, producing identical results in Chrome and Kraken.

Rendering flow comparison:

WebView : Parse HTML/JS/CSS → build DOM & CSSOM → compute Render Tree → Layout & Paint → compose layers → rasterize to screen.

Flutter : Build Widget Tree → create Element Tree (like DOM) → generate RenderObject Tree (like Render Tree) → Layout & Paint → compose layers → rasterize.

By swapping the highlighted portion of the flow, we can render web standards on top while using Flutter for the lower‑level rendering.

Kraken’s entry point is a single JavaScript file, reducing an extra request and speeding up first‑paint. The JS runs in a JS engine; Kraken’s runtime binds Web‑standard APIs, creates commands stored in a struct, and passes them via C++ FFI to Dart, which builds the DOM, parses CSS to a CSSOM, and finally constructs Flutter’s RenderObject Tree for layout, paint, and compositing.

SSR support is added by allowing HTML as the entry point, parsed by an HTML parser before following the same pipeline.

Key Technical Features

First‑screen load performance is critical for C‑end scenarios. Kraken optimizes this by reducing bridge communication overhead.

Bridge evolution:

Generation 1: Invasive integration with Flutter Engine, causing heavy compile times.

Generation 2: Use Dart FFI with JSON serialization, reducing engine intrusion but adding string copy and serialization cost.

Generation 3: Shared‑memory struct (40 bytes) passed via address, eliminating JSON overhead and improving memory access efficiency.

Performance gains from these optimizations are demonstrated with real‑world page load metrics.

Kraken introduces a new

display

property value

sliver

. Setting

display: sliver

enables Flutter’s Sliver capabilities, allowing dynamic recycling of off‑screen nodes and yielding noticeable performance improvements over

display: block

in long‑list scenarios.

The

sliver

proposal is under discussion in the W3C Chinese Interest Group, with plans to submit it to W3C.

Kraken provides an extensible architecture: Flutter widgets can be registered as standard tags, and developers can integrate native APIs via MethodChannel, enabling dynamic JavaScript‑driven usage. Plugins can be added or removed to optimize bundle size and support vertical domain customization.

Debugging is aligned with web standards. Kraken abstracts an Inspector that connects to Chrome DevTools Protocol, offering console logging, JS debugging, hot‑module replacement (HMR), and other familiar web development tools.

All Kraken code is open‑source, encouraging community contribution and collaborative governance.