Installation

Watch

You'll need zeus cli and, optionally, simulator. After initializing the app, install install @zapp-framework/core, @zapp-framework/ui, and @zapp-framework/watch packages.

To add Zapp to your app you need to update the app entry file - app.js:

import "@zapp-framework/watch";
import { Application } from "@zapp-framework/core";
import { setTheme } from "@zapp-framework/ui";

Application({
  onInit() {
    setTheme();
  },
  onDestroy() {},
});

And you can start using Zapp in the pages in your app, here's a simple one to test:

import "@zapp-framework/watch";
import {
  Alignment,
  Arrangement,
  Column,
  ColumnConfig,
  Config,
  remember,
  SimpleScreen,
  TextConfig,
} from "@zapp-framework/core";
import { Button, ButtonConfig, Text } from "@zapp-framework/ui";

SimpleScreen(Config("screen"), () => {
  const visible = remember(false);
  Column(
    ColumnConfig("col")
      .fillSize()
      // this forces OS to flush the screen so there aren't any artifacts left
      .background(visible.value ? 0x000000 : 0x010101)
      .alignment(Alignment.Center)
      .arrangement(Arrangement.Center),
    () => {
      if (visible.value) {
        Text(TextConfig("text"), "Now you see me");
      }

      Button(
        ButtonConfig("button").onPress(() => {
          visible.value = !visible.value;
        }),
        () => {
          Text(TextConfig("text"), "Do the thing");
        }
      );
    }
  );
});

Simply paste it into your page file. Keep in mind that the imports from @zapp-framework/watch must be the at the very beginning of the file so the bindings are installed correctly.

Web

First, you need to initialize a project with webpack, here's how you can do it. After that, you need to install @zapp-framework/core, @zapp-framework/ui, and @zapp-framework/web packages.

With that out of the way, you can start using Zapp, just remember that the first import in your js/ts files must be from @zapp-framework/web so its bindings are installed correctly.

Here's a snippet so you can test if everything works correctly:

import "@zapp-framework/web";
import {
  Stack,
  StackAlignment,
  StackConfig,
  TextConfig,
  Zapp,
} from "@zapp-framework/core";
import { Button, ButtonConfig, Text } from "@zapp-framework/ui";

Zapp.startLoop();

Stack(StackConfig("stack").fillSize().alignment(StackAlignment.Center), () => {
  Button(
    ButtonConfig("button").onPress(() => {
      alert("Ok");
    }),
    () => {
      Text(TextConfig("text"), "Do the thing");
    }
  );
});