Taro on Harmony C-API: Open-Source Cross-Platform Framework for Native Harmony Apps

Taro x Pure Harmony

Taro, initiated by JD.com, is an open‑source cross‑platform solution that enables developers to build mini‑programs, H5, and native apps using a Web development paradigm; the Harmony C‑API version fully adapts to pure HarmonyOS, supporting H5, mini‑programs, RN, and native Harmony.

Overall Technical Architecture

The Taro on Harmony solution lets developers use a React DSL, organized into three layers: the top ArkVM layer runs business code, React core, and minimal Taro runtime; the middle layer manages the CSSOM and TaroElement tree; the bottom layer holds the TaroRenderNode virtual tree linked with Yoga nodes.

A VSync‑based task pipeline ensures correct sequencing of style matching, measurement, layout, and rendering.

Key Features

Rich Capability Support

Common Components and APIs

The C‑API version fully supports React 18+, about 33 Taro components (View, Text, Image, Video, etc.), and APIs such as getSystemInfo and getStorage, with performance‑optimized C++ implementations for complex APIs like createSelectorQuery.

Common Style Support

It implements extensive CSS capabilities, including flex, pseudo‑classes/elements, positioning, selectors, media queries, units (vh, vw, calc), variables, and safe‑area handling, backed by a C++ CSSOM implementation.

Yoga layout engine ensures W3C‑compliant rendering.

Native‑Level Performance

Runtime Logic Shifted to C++

By minimizing the Taro runtime in ArkVM and moving most TaroElement logic to C++, performance is greatly improved, with direct C++ calls to ArkUI for node creation, property setting, and event binding.

Long List Component

Provides optimized long‑list components with lazy loading, preloading, and node reuse to handle large data sets efficiently.

C‑API Hybrid Rendering Mode

Supports mixing native pages or components with Taro components, allowing seamless integration of Harmony native UI within Taro projects.

Installation and Usage

Install Harmony Plugin

# Use npm to install
npm i @tarojs/plugin-platform-harmony-cpp
# Use pnpm to install
pnpm i @tarojs/plugin-platform-harmony-cpp

Add Plugin Configuration

import os from 'os'
import path from 'path'
const config = {
  // ...
  plugins: ['@tarojs/plugin-platform-harmony-cpp'],
  harmony: {
    // Currently only Vite compiler is supported
    compiler: 'vite',
    // Path to Harmony project
    projectPath: path.join(os.homedir(), 'projects/my-business-project'),
    // Default Harmony module name
    hapName: 'entry',
  },
  // ...
}

Build Project

# Build Harmony app
taro build --type harmony_cpp
# Build native components
taro build native-components --type harmony_cpp

Component Export Example

export default {
  navigationBarTitleText: 'Hello World',
  componentName: 'MyComponent',
  entryOption: false,
}

Conclusion and Outlook

The Taro on Harmony C‑API version, proven by JD's Harmony app, offers superior performance, ecosystem compatibility, and developer experience, making it a top choice for building Harmony applications.

Future work includes multi‑threaded architecture upgrades and C++‑based React implementation to further reduce frame drops, with ongoing testing and community contributions welcomed.