explaingit

tencent/hippy

8,518C++Audience · developerComplexity · 4/5LicenseSetup · moderate

TLDR

Hippy is an open-source framework by Tencent that lets web developers write a single React or Vue codebase and run it on iOS, Android, and the web, used in production across hundreds of millions of users in Tencent's own apps.

Mindmap

mindmap
  root((hippy))
    What it does
      Single codebase
      iOS Android and Web
      React and Vue support
    Performance
      Direct JS engine access
      Recycling list component
      Flex layout
    Getting Started
      Node.js required
      React or Vue demo
      Live debug mode
    Tech Stack
      C++ core
      JavaScript
      React and Vue
    Audience
      Web developers
      Mobile app builders
    License
      Apache 2
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a single React or Vue codebase that runs as a native app on both iOS and Android without rewriting it for each platform

USE CASE 2

Port an existing web app to mobile by reusing your React or Vue component knowledge and Flex layout skills

USE CASE 3

Create a high-performance scrolling list feature on mobile using Hippy's built-in recycling list component

USE CASE 4

Develop and test a cross-platform mobile app live on a device or simulator using Hippy's built-in debug mode

Tech stack

C++JavaScriptReactVueNode.js

Getting it running

Difficulty · moderate Time to first run · 1h+

Requires Node.js, git, and either Android Studio or Xcode depending on your target platform.

Free to use, modify, and distribute for any purpose including commercial use, with attribution, under the Apache 2 license.

In plain English

Hippy is a framework built by Tencent that lets developers write a single codebase and run it on both iOS and Android, as well as in a web browser. The idea is that a developer codes the app once rather than building separate versions for each platform. It is used inside some of Tencent's largest apps, including Mobile QQ, Tencent Video, and QQ Music, reaching hundreds of millions of users. The framework is aimed at developers who already know how to build websites. It officially supports React and Vue, two very popular tools for making web pages, so web developers can apply what they already know to mobile app development. The same set of building blocks and functions works across all the supported platforms, so developers do not need to learn a completely different approach for each one. On the performance side, Hippy is designed to keep apps running smoothly. It communicates directly with the JavaScript engine rather than going through a slower intermediary layer. It also includes a built-in list component that recycles items as the user scrolls, which saves memory and keeps scrolling fast. Layout is handled using the Flex system, which is the same layout model used on the web. Getting started requires Node.js, git, and either Android Studio or Xcode depending on which platform you are targeting. The repository includes demo projects for React and Vue so developers can build and run a working example right away. There is also a debug mode that lets developers see changes live while the app is running on a device or simulator. The project is open source under the Apache 2 license and accepts contributions from outside developers.

Copy-paste prompts

Prompt 1
I know React and want to build my first Hippy app targeting Android. Walk me through setting up Node.js, cloning the repo, running the React demo project, and seeing it on the Android emulator.
Prompt 2
Show me how Hippy's built-in list component works in React, specifically how it recycles items during scrolling to keep the app memory-efficient.
Prompt 3
I have an existing React web component using Flex layout. What changes do I need to make to run it inside a Hippy mobile app?
Prompt 4
Help me set up Hippy's debug mode so I can see live code changes reflected on a physical iOS device while I edit.
Prompt 5
What are the main differences between Hippy and React Native? I am evaluating which cross-platform framework to use for a new Tencent-style super-app.
Open on GitHub → Explain another repo

← tencent on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.