Skip to main content


Use Appteum with React

Learn how to create an Appteum workspace, invite users, and add & query your data from a React app.

  1. Setup an Appteum workspace
  • Sign up and create a new workspace.

  • Create a Countries object using the Object Manager in the workspace dashboard.


For this quickstart we are using the Anonymous User.

The Anonymous User is a special type of user that allows access to workspace data without requiring a Sign-In.

Find out more about Anonymous User
  1. Create a React app
npm create vite@latest my-app --template react
  1. Install the Appteum client library
  • The fastest way to get started is to use the appteum-js client library which provides a convenient interface for working with Appteum from a React app.

  • Navigate to the React app and install appteum-js.

 cd my-app && npm install @appteum/appteum-js
  1. Query data from the app

In App.jsx, create a Appteum client using your Workspace API_KEY.

Add a createCountry function to insert country data to your countries object.

Add a getCountries function to fetch the data and display the query result to the page.

import { AppteumWorkspaceClient } from "@appteum/appteum-js";
import React, { useEffect, useState } from "react";
import "./App.css";

const appteum = new AppteumWorkspaceClient({

function App() {
const [countries, setCountries] = useState([]);
const [state, setState] = useState({
name: "",

useEffect(() => {
}, []);

async function getCountries() {
const { data } = await{
q: "select id,name from countries",

const handleInputChange = (event) => {
const { name, value } =;
setState((prevProps) => ({
[name]: value,

const createCountry = async (event) => {

await appteum.objects.create("countries", {
dataRecords: [{ name: }],

return (
<div className="App">
<form onSubmit={createCountry}>
<div className="form-control">
<label>Country Name </label>
style={{ backgroundColor: "#4CAF50", marginLeft: "1rem" }}
Add Country
<ul style={{ listStyleType: "none" }}>
{ => (
<li key={country.Id}>{country.Name}</li>

export default App;
  1. Start the app

Start the app, go to http://localhost:5173 in a browser and you can add new countries and see the list of countries.

npm run dev