Page Builder Runtime
Runtime overview
Understand the shared React runtime used by Page Builder V3 react blocks and Page Builder V4 pages.
Page Builder V3 react blocks and Page Builder V4 pages share one React runtime. Code runs inside Antly's authenticated frontend shell and receives a curated set of hooks, form tools, inputs, and widgets.
The runtime prelude injects common React hooks and Antly APIs as globals, and the compiler also supports selected imports for the same APIs.
Runtime globals
Common injected globals include:
- React hooks:
useState,useEffect,useMemo,useCallback,useRef,useContext,useReducer,Fragment. - Data hooks:
useJql,useJqlMutation,useTable,useDebounce. - Navigation and context:
useNavigation,useSearchParams,useRecordContext,useAuthentication,usePageBuilderFilter. - Forms:
Formik,Form,Field,FieldArray,useFormikContext,useField,Yup. - Uploads:
MultipartFormProvider,useMultipartFormContext. - Inputs:
TextField,TextArea,Select,AsyncSelect,Checkbox,Switch,Datetime,MultiSelect,RadioGroup,RichText,Currency,Phone,Tags,Sheet,FileInput,AsyncMultiSelect,FieldRenderer. - Files and filters:
useResolveFileUrl,FileViewer,StatusCountFilterTabs,buildFilterQ,normaliseFilterValue. - Widgets:
PageBuilderChart,PageBuilderIrisChat,PageBuilderReport.
Minimal runtime component
1function CustomerCountCard() {
2 const { data, loading } = useJql({
3 jqlQuery: {
4 __meta__: {
5 schema: "model",
6 namespace: "objects.Record",
7 intent: "aggregate",
8 authenticationClass: "jwt",
9 return: { count: null }
10 },
11 filter: { object__namespace: "Customer" }
12 }
13 });
14
15 if (loading) return <div>Loading...</div>;
16 return <div className="rounded-xl border p-4">{data?.count ?? 0} customers</div>;
17}Keep runtime code page-local. Shared business logic should live in JQL controllers, scripts, or workflows rather than being duplicated across pages. For builder concepts, read /guides/page-builder-v3, /guides/page-builder-v4, and /developer/iris-authoring-contracts.