@withkoji/core Frontend

Exposes the Koji class, which provides client-side methods for use on the frontend of your Koji app.

Note	All methods in the frontend module are scoped for use only in frontend services of Koji apps. If a method is invoked in a node/backend environment, it returns an error message. Frontend modules do not require a constructor.

Basic use

To use frontend methods, install the @withkoji/core package in the frontend of your project.

Import the package in your frontend code.

import Koji from '@withkoji/core';

Initialize the package with your configuration data.

// Initialize
Koji.config(require('././koji.json'));

// render
render();

Indicate that the application is ready to start receiving events.

Koji.ready();

Enable the user to upload an image from the frontend of the Koji app.

import Koji from '@withkoji/core';

const captureImage = async () => {
  const imageURL = await Koji.ui.capture.image();

  console.log(imageURL); // The publicly accessible, CDN-backed path of the user's uploaded image
}

Properties

.analytics

Analytics, Class that enables you to track custom events in your Koji app.

.configInitialized

Boolean, Indicates whether the package has been initialized with configuration data. Defaults to false.

.dispatch

Dispatch, Class that implements a dispatch system for real-time communication on the frontend of your Koji app.

.iap

IAP, Class that manages in-app purchase transactions on the frontend of your Koji app.

.identity

Identity, Class that manages authentication and authorization on the frontend of your Koji app.

.isReady

Boolean, Indicates whether the Koji app is ready to start receiving events.

.metadata

KojiMetadata, Metadata about the project and creator.

.playerState

PlayerState, Class that manages the state of the Koji player to enable distinct experiences for different users and views.

.projectId

String, (Optional) Unique identifier for the Koji app.

.remix

Remix, Class that manages the customization experience for your Koji app.

.services

Services, Object that provides access to service endpoints in the Koji app. For example, you can use this property to route a request to a backend service.

Example

const backendURL = Koji.services.backend

.ui

UI, Class that provides common user interface elements for use in your Koji app. Exposes the following classes:

Capture, Class that captures user input on the frontend of your Koji app.
Navigate, Class that provides methods for controlling navigation within your Koji app.
Present, Class that presents dialog boxes and system alerts to users on the frontend of your Koji app.
Upload, Class that uploads files from the frontend of your Koji app directly to your project’s CDN.

Methods

.config(kojiConfig, kojiConfigOptions)

Initializes this package for use with configuration data from the koji.json file. This method sets up the services, customization values, development environment, and deployment instructions for your Koji app. It also performs some basic structural checks.

Note	The app must initialize the package before any data is rendered. Initialization must be done exactly once.

Parameters

kojiConfig – KojiConfig, (Optional) Configuration data for the Koji app.
kojiConfigOptions – KojiConfigOptions, (Optional) Configuration options for the Koji app.

Example

Koji.config(require('././koji.json'));

.ready()

Indicates that the Koji app is ready to start receiving events.

Note	You must call this function after initializing the package and subscribing to customization changes but before advancing to the preview with `Koji.remix.finish`.

Example

Koji.ready();

Interfaces

KojiConfig

Configuration data for the Koji.

Properties

@@initialTransform – Any, (Optional) Placeholder values for new customized versions.
deploy – Any, (Optional) Instructions for deploying the services to production.
develop – Any, (Optional) Instructions for setting up the services in a development/editor environment.
metadata – KojiMetadata, (Optional) Metadata about the project and creator.
remixData – Any, (Optional) Default values for the configuration data.

KojiConfigOptions

Configuration options for the Koji app.

Properties

metadata – KojiMetadata, (Optional) Overrides for the platform-provided metadata.
projectId – String, (Optional) Unique identifier for the Koji app.
services – Services, (Optional) Defines services for the Koji app.

KojiMetadata

Metadata about the project and creator. This information is provided by the platform but can be overridden when the Koji is initialized.

Properties

projectId – String, Unique identifier for the Koji.
creatorUsername – String, Creator’s username.
creatorProfilePicture – String, URL reference to the creator’s current profile picture.

Type aliases

Services

Object, Key-value pairs of services and endpoints.