Components

Use custom components in paywalls, from your project or your organization.

A component is a piece of a paywall with its own behavior: a plan picker, a countdown, a scratch card. Components render natively on iOS, Android and the web, the same way the rest of the paywall does, so they cost your app no web view.

The paywall designer lists components from three places:

  • Core: the building blocks every paywall has, such as text, views, scroll views and screens.
  • Project: components written for one project. You write them on your computer with the CLI, in the designer's Code mode, or let the Voidhash agent write them.
  • Installed: components your organization published and the project installed. One team builds a component once, and every project of the organization can use it.

Each component describes itself with a definition: its traits, props, events, preview states and the capabilities it asks for. The designer, the agent and publishing all read the same definition.

Write a component

Components are small Rust crates built with the voidhash-ui library. Its README covers the builder API, state, actions and drawing. In your app's root, start the dev loop and create a component:

npx voidhash-cli dev
npx voidhash-cli new plan-picker

Develop a component covers the rest of the loop: seeing each change in the paywall editor, merging changes from the Voidhash agent, testing, and publishing new versions. A component can also bring its own section of the designer's right panel; see Editor panels.

Share it with your organization

Publish a component to your organization once it is ready, then install it in any project of the organization. See Publishing and Installing and capabilities.

Published paywalls keep working

A published paywall carries every component it uses. Deleting, deprecating or yanking a component later, or uninstalling it, never changes paywalls that are already live. It only stops new paywalls, or new releases of existing ones, from using it.