Host Actions

Besides context and events, the SDK exposes the host’s action API: typed functions that make the surrounding Crowdin UI do things. Everything on this page is exported from the framework-free core entry point:

import { editor, project, modal, redirect, resize } from "@crowdin/serverless-apps-sdk";

Export	Available in	What it covers
editor	editor modules	~50 methods: strings and translations, filters and search, navigation, notifications, workflow steps, the app’s modal
project	project-scoped modules	navigation inside the project area, opening the editor
profile	profile-scoped modules	navigation inside the profile area
modal	modal modules	resizing the open modal
global functions	everywhere	theme, sizing, redirects, assets, intersection observer

Every method is fully typed, so the definitive reference is your editor’s autocomplete on these exports. The sections below cover the calls most apps need. A method only works where its UI exists: outside it, fire-and-forget calls are silently ignored, while promise-returning calls reject with an AP method … is unavailable error - guard with try/catch or a context.app.type check when one bundle serves several placements.

Editor content

Read what the translator is working on and change the translation draft:

import { editor } from "@crowdin/serverless-apps-sdk";

const active = await editor.getString();
const translations = await editor.getTranslations();

editor.setTranslation("Bonjour");
editor.appendTranslation(" le monde");
editor.clearTranslation();

getStringsList() returns the currently loaded page of strings, getSelectedStrings() the multi-selection (or "all"). Pair these with the string.change and string.selected events to stay in sync as the translator moves around.

For suggesting translations in bulk there is the unsaved-suggestions family: setUnsavedSuggestion / setUnsavedSuggestions, removeUnsavedSuggestions, and applyUnsavedTranslations fill translation drafts without saving them, leaving the translator in control.

Filters, search, and navigation

editor.search("checkout");
editor.setCroqlFilter('updated_at > "2026-01-01"');
editor.setFilter(2);
editor.changeFile(fileId);
editor.setTargetLanguage("uk");

getFiltersList() enumerates the editor’s built-in filters for setFilter; setCustomFilter and setCroqlFilter (with their reset* counterparts) apply advanced filters; setPage, setMode, and setWorkflowStep move the editor view.

Notifications

editor.successMessage("Translations imported");
editor.errorMessage("Import failed");
editor.setApplicationNotification(3);

The *Message methods show a toast in the editor; setApplicationNotification / clearApplicationNotification manage the counter badge on your app’s panel icon.

Modals

A modal module is rendered when the host opens it. From an editor module, open your app’s modal by its manifest key:

const opened = await editor.openModal({ resource: "details", size: "large" });

resource is the key of one of your app’s modal modules; the call resolves false when no such module exists. Sizes are small, medium (default), large, and xlarge.

Inside the modal, the same bundle renders with context.app.type === "modal". From there:

import { modal, closeAppModal } from "@crowdin/serverless-apps-sdk";

modal.setSize({ width: 800, height: 600 });
closeAppModal();

Context-menu entries with "type": "modal" open modals the same way - declaratively, via the manifest.

Sizing

resize();
resize(400, 600);
const viewport = await getViewportSize();

resize() without arguments fits the iframe to its content. getViewportSize(), getWindowSize(), and getScrollPosition() report the host page’s dimensions; getSize() (and its synchronous twin getSizeSync()) returns the app iframe’s own content size instead.

Navigation

import { redirect, project } from "@crowdin/serverless-apps-sdk";

redirect("/project/my-project/settings");
project.openEditor(fileId);
project.redirect("/tools");

The global redirect(path, queryParams?) navigates the top Crowdin page; project.redirect and profile.redirect navigate within their areas; project.openEditor(fileId, view?, languageCode?) jumps straight into the editor.

Advanced

• editor.registerContextMenuAction(action, handler) adds an entry to the editor’s context menus at runtime and returns an unsubscribe function - unlike manifest-declared context-menu modules, which are static.
• registerIntersectionObserver(handler) reports when the app’s iframe scrolls in and out of view (the intersection.changed event).
• closeNavbarExtension() closes the app’s navbar-extension flyout.
• editor.getHotKeys() / editor.propagateHotKeyPress() integrate the app’s textareas with the editor’s keyboard shortcuts.
• editor.applyCustomThemeStyle() / editor.resetCustomThemeStyle() apply and clear editor color-theme --crowdin-* style overrides programmatically.
• getFormData() / formDataUpdated(detail) / getSchema() / getRenderData() exchange data with a form the Crowdin host renders around the app in some placements; where the host renders no form, they resolve empty data.
• getCssVariables() returns the host’s --crowdin-* CSS variables - AppUiProvider applies them for you.