Build a Cross‑Framework Button Demo with OpenTiny: Vue, React, Solid

Overview

In Huawei Cloud DTSE Tech Talk episode 44, instructor Mo Chunhui introduced the OpenTiny component library, highlighting its core advantages and design philosophy, and demonstrated how to build a cross‑framework UI component from scratch.

Why Cross‑Framework Components Matter

With the rapid growth of front‑end frameworks and device types, maintaining separate component libraries for Vue 2, Vue 3, React, Solid, PC, mobile, and other platforms creates duplication, higher maintenance costs, and migration challenges. OpenTiny’s renderless architecture solves these problems by decoupling component logic from any specific framework.

Demo Goal

The hands‑on demo builds a button component that works in Vue, React, and Solid, showing a practical workflow for cross‑framework development.

Source Code

All example code is available at https://github.com/opentiny/dtt-cfc .

Step‑by‑Step Process

1. Initialize the Project

Use pnpm to manage the monorepo and configure pnpm-workspace.yaml.

Set up ESLint, Prettier, and Git hooks.

2. Create the Vue Application

Initialize a Vue app.

Develop the adapter layer and the @opentiny/vue-button component.

Implement a renderless vue.js file for framework‑agnostic logic.

3. Create the React Application

Initialize a React app.

Develop the adapter layer and the @opentiny/react-button component.

Implement a renderless react.js file.

4. Create the Solid Application

Initialize a Solid app.

Develop the adapter layer and the @opentiny/solid-button component.

Implement a renderless solid.js file.

OpenTiny Features

OpenTiny’s TinyVue library achieves cross‑end, cross‑framework, and cross‑version support thanks to its renderless design. A single codebase can target Vue 2, Vue 3, PC, and mobile devices, as well as multiple themes and design specifications.

Developers can create components that run on PC, mobile, and wearables, and on frameworks such as Vue 2, Vue 3, React, and Solid, while maintaining a consistent API.

Design Philosophy

OpenTiny separates component templates, styles, and logic, leveraging Web Components to encapsulate functionality as custom elements. Renderless adapters bridge business logic with framework‑specific wrappers, avoiding the complexity of higher‑order components or scoped slots.

Version adapters smooth the differences between Vue 2 and Vue 3, allowing a single component library to serve both without code duplication.

Conclusion

OpenTiny provides an enterprise‑grade, cloud‑native front‑end solution that enables developers to build high‑performance, maintainable web applications across multiple frameworks and devices, reducing development effort and accelerating innovation.