Skip to content

Klai Studio Docs

Main Navigation Join Slack Status klai.studio

Appearance

Sidebar Navigation

Overview

Introduction

🏆 Features

Getting Started

Welcome to Klai Studio!

Overview

Your First App

1. Setting Up Your Foundation

1.1 Configure FileMaker Server

1.2 Install Klai Studio Helper File

1.3 Add Your Server to Klai Studio (IDE)

2. Building Your First Application

2.1 Create an App (Site) in the IDE

2.2 Create Your First Page (Intro to Page Builder)

2.3 Understanding & Managing Environments (IDE)

2.4 Adding Elements to Your Page

2.5 Understanding Validation

2.6 Adding Actions to Your Page

2.7 Creating Your First List View

2.8 Understanding Page Data Flow

2.9 Creating Your First Hook

2.10 Working with Data Tables

3. Understanding Core Klai Studio Concepts

3.1 Introduction to Hooks (and where to find them in the IDE)

3.2 Running Your First Hook (Practical Example)

3.3 Introduction to Actions & Action Scripts (IDE Context)

3.4 Understanding the Data Model (and Page Data Model UI)

4. Common Customizations & Expanding Your App

4.1 Adding & Configuring Buttons (Page Builder)

4.2 Implementing Page Navigation (Actions & Site Navigation UI)

4.3 Displaying Data in Tables (Page Builder & Element Config)

4.4 Basic App Styling (Site Styling UI)

5. Mastering the Klai Studio Environment & Advancing Your Skills

5.1 Understanding & Managing Environments (In-Depth)

5.2 Deep Dive: Page Configuration & Settings

Navigating the Page Builder Interface

Working with Page-Level Action Scripts

Configuring the Page Data Model

Page Integration Settings Explained

Managing Page Info & Other Settings

5.3 Working with Global Scripts

5.4 Managing App (Site) Settings & Navigation

5.5 Exploring Further: What to Learn Next

Support & Resources

Getting Help

Learning JSON

Reference

Site Settings

Navigation

App Model

DOM Header Insertions

Global Named Actions

Site Structure

Slots / Code Injection

Page Settings

Data Model

Card / Window Modals

Validation

Custom Validators

SEO Meta Tags

Misc Page Settings

Page Elements

App Layout Overview

Klai Studio Elements

Checkbox

Checklist

Cleave.js Input Masking

DateTime Picker

Google Address Autocomplete

Image Display Element

Input

Masked Input

Range Slider (noUiSlider)

Radios

Select

Advanced Select (selectEx)

TextArea

Common

Input

Button

Data Table

HTML

Grouping Elements

Tabs

Panel

accordion

accordion2

listrows

Uploading Files

dropzone

dropzone to S3

uploadCare

🏗️ Uppy File Upload Widget Integration with AWS S3

Misc Elements

Plain Text / Code Editor

signature

fullCalendar

rangeSlider

Payment Gateways

Authorize.net

PayPal

Stripe

Adding Custom Page Elements

Actions Processor

Named Actions (Action Scripts)

Actions

runUtilityHook

path

debounce

throttle

showAlert

showModal / hideModal

function

clipboard

cookie

setFocus

scrollTo

wait

emit

validate

channelJoinAnon

channelLeaveAnon

messageSend

messageSendAnonChannel

consoleError

showStripeCheckout

showCardModal / hideCardModal

runOnCompleteHook

mapInfoWindow

authLoginOauth / oauthLoginHook

pwaCustomInstall

pwaPromptInstall

pwaPromptPushPermission

pwaPushNotificationSend

llmToolCall

llmToolCallResponse

llmQueryStop

assistantStop

Authentication Actions

Script Hooks

Globals Variables

$$BF_Model

$$BF_App

$$BF_State

Keeping Keys Private

Reducing Payload Size

API Callback Endpoint

Well-Known URLs (beta)

Common Hooks

Scoped Hooks

Lifecycle Hooks

Authentication

Basic Authentication

User Registration & Verification

Password Management

Managing User Accounts

Custom Login Pages

Query & Cookie Based Auth

OAuth

JWT Expiration

Security Best Practices

Klai Utility Functions

Localization (i18n)

Dynamic Library Loading

APIs & Services

Messaging

Adding users to channels

Removing users from channels

Sending messages

Get connected users

Get active channels

Core APIs

Klai Server Proxy

Klai Error Pages API

Klai Streaming Proxy

Klai Streaming API (Chat)

Klai Streaming API (Assistants)

Klai Streaming API (LLM Query)

Guides & Integrations

Klai Studio MCP (Beta)

Creating Components with Third-Party Libraries

Web Awesome Components in Klai Studio

ApexCharts - Getting started

Creating a PWA

Setting up Auth0

Setting up Microsoft Entra ID

Create an S3 Bucket on AWS

Development & Best Practices

Developer Mode

JavaScript Libraries

Practices for File Downloads

Rollbacks and Version Control

Customizing & Styling

SEO & Social Sharing

Custom Components

Components Editor

Component Best Practices

Support & Maintenance

Connection Trouble Shooting Guide

Updating the Helper File

Klai Error Codes

Security

Custom Domains

Security White Paper

Firewalls

Technology Stack

Compatibility

Enterprise

Klai Enterprise Documentation

Cookbook Backlog

Cookbook Backlog

AI Assistant - Tips & Tricks

Using Development Data

Passing Data Between Pages

When to use 'App' vs 'Model'

Using Smart Links

FM Script Architecture

Using JSON in FileMaker

Performance & Optimization

Backward Compatibility for V2 to V3

On this page

Uploading Files

In this section

dropzone
dropzone to S3 — How to use the dropzone element to upload files directly to an AWS S3 bucket.
uploadCare
🏗️ Uppy File Upload Widget Integration with AWS S3

Edit this page on GitHub

Last updated:

Pager

Previouslistrows

Klai Studio documentation

© 2026 Delfs Engineering