Frontend Development 9 min read

Taro on Harmony C‑API: Cross‑Platform Frontend Framework for HarmonyOS

The article introduces Taro on Harmony's C‑API version, detailing its evolution, open‑source release, three‑layer architecture, rich component and CSS support, high‑performance rendering, installation steps, and future roadmap, positioning it as a leading framework for developing native‑like HarmonyOS applications.

JD Retail Technology
JD Retail Technology
JD Retail Technology
Taro on Harmony C‑API: Cross‑Platform Frontend Framework for HarmonyOS

Taro, an open‑source cross‑platform solution initiated by JD, enables developers to build Mini‑Programs, H5, and native apps using a Web development paradigm; since its 2018 launch it has amassed over 36,000 GitHub stars.

In the past year Taro on Harmony upgraded from an ArkTS‑based approach to a C‑API solution, achieving full compatibility with pure‑blood HarmonyOS and extending support to H5, Mini‑Programs, React‑Native, and native Harmony platforms. JD's pure‑blood Harmony app, launched in September, uses this C‑API version and earned Huawei’s S‑level certification.

The newly open‑sourced C‑API version brings richer style adaptation, higher rendering performance, and broader component support, allowing developers to create apps that match native Harmony performance while reusing existing Taro projects.

Technical architecture consists of 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 to Yoga nodes. A VSync‑driven pipeline ensures correct task sequencing and rendering.

Key features include support for nearly 33 Taro components (View, Text, Image, Video, etc.) and full React 18+ compatibility, enhanced APIs (e.g., getSystemInfo, createSelectorQuery) reimplemented in C++ for performance, extensive CSS capabilities (flex, pseudo‑classes, media queries, variables, etc.), a custom CSSOM engine, Yoga layout integration, a high‑performance virtual list component, and hybrid C‑API/native rendering allowing native pages or components to be mixed with Taro components.

Installation steps:

# 使用 npm 安装
$ npm i @tarojs/plugin-platform-harmony-cpp
# 使用 pnpm 安装
$ pnpm i @tarojs/plugin-platform-harmony-cpp

Add the plugin to the Taro config:

import os from 'os'
import path from 'path'
const config = {
  // ...
  plugins: ['@tarojs/plugin-platform-harmony-cpp'],
  harmony: {
    // 当前仅支持使用 Vite 编译鸿蒙应用
    compiler: 'vite',
    // Note: 鸿蒙工程路径,可以参考 [鸿蒙应用创建导读](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/start-with-ets-stage-0000001477980905-V2) 创建
    projectPath: path.join(os.homedir(), 'projects/my-business-project'),
    // Taro 项目编译到对应鸿蒙模块名,默认为 entry
    hapName: 'entry',
  },
  // ...
}

Compile the project:

# 编译鸿蒙应用
$ taro build --type harmony_cpp
# 编译鸿蒙原生组件
$ taro build native-components --type harmony_cpp

For hybrid components, adjust page configuration:

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

In summary, the C‑API version of Taro on Harmony, proven in JD’s Harmony app, offers a performant, feature‑rich, and developer‑friendly framework that is rapidly becoming the preferred choice for building HarmonyOS applications, with ongoing work on multithreaded architecture and C++‑based React to further boost performance.

frontendcross‑platformwebreactHarmonyOSTaroC-API
JD Retail Technology
Written by

JD Retail Technology

Official platform of JD Retail Technology, delivering insightful R&D news and a deep look into the lives and work of technologists.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.