How Taro on Harmony C‑API Delivers Native‑Level Performance for Cross‑Platform Apps

01 Taro x Pure Harmony

Taro, an open‑source cross‑platform framework initiated by JD, allows developers to use a web development paradigm to create mini‑programs, H5 pages, and native apps, and has earned over 36,000 GitHub stars since its 2018 release.

In the past year Taro on Harmony upgraded from an ArkTS solution to a C‑API solution, achieving full compatibility with pure Harmony OS and extending support to H5, mini‑programs, React Native, and native Harmony, enabling unified development across these platforms.

In September of last year JD's pure‑Harmony app launched on the Harmony App Store; core shopping flow pages (home, search, product detail, cart, order, checkout, and user profile) were built with Taro on Harmony C‑API and immediately received Huawei's S‑level app certification.

02 Overall Architecture

The Taro on Harmony C‑API architecture consists of three layers:

Top layer: ArkVM runs business code, React core, and minimal Taro runtime.

Middle layer: CSSOM and TaroElement tree handle commands from the upper layer, such as node creation, binding, and property setting.

Bottom layer: TaroRenderNode virtual node tree maps one‑to‑one with the actual screen node tree and creates corresponding Yoga nodes.

A VSync‑based task pipeline processes style matching, node measurement, layout, style setting, and screen rendering to ensure correct sequencing and final output.

03 Key Features

Rich Component and API Support

The C‑API version fully supports React 18+, about 33 Taro components (View, Text, Image, Video, etc.), and common APIs such as getSystemInfo and getStorage . Complex APIs like createSelectorQuery and createIntersectionObserver have been reimplemented in C++ for significant performance gains.

Comprehensive Style Support

Most common CSS capabilities are supported, including flex layout, pseudo‑classes/elements, absolute and fixed positioning, selectors, media queries, units (vh, vw, calc), CSS variables, and safe‑area variables. A custom CSSOM implementation in C++ handles parsing, matching, composition, and application of styles.

The Yoga layout engine is integrated to compute node positions and sizes, ensuring rendering consistency with W3C standards.

Native‑Level Performance

Runtime logic is largely shifted to C++. The ArkVM layer is stripped down, with most TaroElement logic moved to C++, eliminating parent‑child binding in the VM and boosting performance.

On the C++ side, Taro directly invokes ArkUI C++ APIs to create nodes, set properties, bind events, and render to screen.

Long‑List Optimization

A dedicated long‑list component provides lazy loading, pre‑loading, and node reuse, addressing performance challenges in large‑data scenarios.

Mixed Native Rendering

The C‑API version allows mixing native pages or components with Taro components, enabling seamless integration of native Harmony UI within Taro projects.

04 Usage Tutorial

Open‑source repositories:

Taro: https://github.com/NervJS/taro

Taro Harmony C‑API: https://github.com/NervJS/taro-harmony-capi-library

Install the Harmony plugin:

<code># Using npm
npm i @tarojs/plugin-platform-harmony-cpp
# Using pnpm
pnpm i @tarojs/plugin-platform-harmony-cpp</code>

Add plugin configuration (example using Vite):

<code>import os from 'os'
import path from 'path'
const config = {
  // ...
  plugins: ['@tarojs/plugin-platform-harmony-cpp'],
  harmony: {
    // Currently only Vite is supported for Harmony compilation
    compiler: 'vite',
    // Path to Harmony project, see Huawei docs for creation guide
    projectPath: path.join(os.homedir(), 'projects/my-business-project'),
    // Target Harmony module name, default is "entry"
    hapName: 'entry',
  },
  // ...
}
</code>

Compile the project:

<code># Build Harmony app
taro build --type harmony_cpp
# Build native components
taro build native-components --type harmony_cpp</code>

When compiling both the app and native components, set entryOption: false in the page config and optionally specify componentName for the exported component:

<code>export default {
  navigationBarTitleText: 'Hello World',
  componentName: 'MyComponent',
  entryOption: false,
}
</code>

05 Summary and Outlook

The Taro on Harmony C‑API version, proven in JD's Harmony app, offers superior performance, ecosystem support, and developer experience, making it one of the best framework choices for Harmony OS development.

Future work includes multithreaded architecture upgrades and a C++ implementation of React to further improve performance and reduce frame drops; these enhancements are currently in verification and testing phases.

The community is invited to contribute—every suggestion and pull request drives Taro forward.