CMSCure logo

Getting Started

Welcome to CMSCure, your one-click content delivery system designed to eliminate the friction between content updates and your live applications across all platforms.

Tired of the endless cycle of code changes, builds, reviews, and deployments just to tweak a label, update a banner image, or change a button color? CMSCure empowers your entire team – developers, designers, product managers, and marketers – to manage and publish content updates instantly.

Integrate our lightweight SDK into your iOS, Android, React Native, Flutter, Unity, or Web application. Define your content keys and structure in our intuitive dashboard. Then, update text, colors, images, numbers, boolean flags, and more whenever you need to, and see the changes reflect in your live app within seconds.

This documentation provides everything you need to get started, understand the core principles, and integrate CMSCure into your specific platform.

Conceptual Workflow

Here's the typical flow for using CMSCure:

1.  **Dashboard Setup:**
    * Define 'Tabs' (e.g., `home_screen`, `settings`, `product_details`). These are logical groups for your content.
    * Define 'Keys' within each Tab (e.g., `welcome_title`, `welcome_subtitle`, `cta_button`). These are unique identifiers for individual content pieces.
    * Add translations and values for each Key across different languages.
    * Optionally configure global Colors, Images, and Data Stores.
    * Publish your changes from the dashboard.

2.  **SDK Integration:**
    * Install the CMSCure SDK for your platform:
      * **iOS** — Swift Package Manager
      * **Android** — Gradle / JitPack
      * **React Native** — npm + native linking
      * **Web** — npm or CDN

    * **Initialize the SDK early in your app's lifecycle:**
      ```swift
      // Swift (iOS)
      import CMSCureSDK
      Cure.shared.configure(
          projectId: "YOUR_PROJECT_ID",
          apiKey: "YOUR_API_KEY",
          projectSecret: "YOUR_PROJECT_SECRET"
      )
      ```
      ```javascript
      // JavaScript (Web)
      const cure = new CMSCureSDK();
      await cure.configure({
          projectId: 'YOUR_PROJECT_ID',
          apiKey: 'YOUR_API_KEY',
          projectSecret: 'YOUR_PROJECT_SECRET',
          defaultLanguage: 'en'
      });
      ```
    * Provide your Project ID, API Key, and Project Secret from the CMSCure dashboard.

3.  **Fetch & Display Content:**
    * **SwiftUI (iOS):** Use reactive wrappers like `@StateObject var myText = CureString("key", tab: "tab")` or the `"key".cure(tab: "tab")` extension.
    * **JavaScript (Web):** Use `cure.observe('tab:key', callback)` for real-time reactive bindings, or `cure.translation(key, tab)` for direct access.
    * **Other Platforms:** Utilize similar reactive wrappers, hooks, or manual fetch methods provided by the respective SDK.
    * The SDK handles caching and fetching the latest content automatically.

4.  **Real-time Updates:**
    * When you publish changes in the CMSCure dashboard, all connected SDKs receive updates instantly via WebSocket.
    * UI components linked to CMSCure update automatically — no polling or manual refresh needed.

5.  **Instant Deployment of Content:**
    * Text, color, image, and data store changes are live in your app within seconds of publishing from the dashboard, without requiring a new app build or store submission.

Core Concepts

Understanding these concepts is key to leveraging CMSCure effectively:

  • Tabs: Logical containers for your content, often mapping to app screens or features (e.g., "home_screen", "user_profile", "settings"). You define these in the CMSCure dashboard.
  • Keys: Unique identifiers within a Tab for specific content elements like text strings, numbers, or booleans (e.g., "welcome_title", "welcome_subtitle", "cta_button").
  • Values & Translations: Each Key holds values for different languages. The SDK automatically retrieves the value for the currently active language. On the web, use cure.observe('tab:key', callback) for reactive updates.
  • Colors & Images: Global colors (e.g., color:primary_color) and images (e.g., image:hero_banner) are managed separately and accessed via dedicated methods or reactive bindings.
  • Data Stores: Structured collections of items (e.g., products, features). Each item has an _id, data (field values), and optional ctaUrl. Field values may be plain types or localized objects.
  • SDK Configuration: Each platform SDK must be initialized once with your Project ID, API Key, and optionally Project Secret (enables real-time WebSocket updates).
  • Real-time Sync: Utilizes WebSockets to instantly push updates from the dashboard to connected apps. Reactive UI components (SwiftUI's CureString, web's observe()) update automatically.
  • Intelligent Caching: Fetched content is cached on-device (localStorage on web, UserDefaults on iOS). Smart rate limiting prevents duplicate API calls — each resource syncs at most once every 2 seconds.

General SDK Pseudocode

// --- Initialization & Configuration (Early in App Lifecycle) ---

// Swift (iOS)
// Cure.shared.configure(
//     projectId: "YOUR_PROJECT_ID",
//     apiKey: "YOUR_API_KEY",
//     projectSecret: "YOUR_PROJECT_SECRET"
// )

// JavaScript (Web)
// const cure = new CMSCureSDK();
// await cure.configure({
//   projectId: 'YOUR_PROJECT_ID',
//   apiKey: 'YOUR_API_KEY',
//   projectSecret: 'YOUR_PROJECT_SECRET',  // enables real-time updates
//   defaultLanguage: 'en'
// });


// --- Fetching Content ---

// Swift (reactive SwiftUI wrappers)
// @StateObject var welcomeText = CureString("welcome_title", tab: "home_screen")
// @StateObject var primaryColor = CureColor("primary_button_bg")
// Text(welcomeText.value)

// JavaScript (reactive observe bindings)
// cure.observe('home_screen:welcome_title', value => {
//   document.getElementById('title').textContent = value;
// }, { defaultValue: 'Welcome' });
//
// cure.observe('color:primary_color', value => {
//   document.documentElement.style.setProperty('--primary', value);
// });
//
// cure.observe('image:hero_banner', url => {
//   document.getElementById('hero').src = url;
// });

// JavaScript (direct access)
// const title = cure.translation('welcome_title', 'home_screen', 'Welcome');
// const color = cure.color('primary_color', '#3B82F6');
// const banner = cure.image('hero_banner');
// const products = cure.dataStore('feature_products', []);


// --- Data Stores ---
// Structured collections of items (e.g., products, features).
// Each item has an `_id`, `data` (field values), and optional `ctaUrl`.
// Field values may be plain types or localized objects.

// JavaScript
// cure.observe('store:feature_products', items => {
//   items.forEach(item => {
//     const title = item.data?.title;  // plain string or {en:"…", ar:"…"}
//     const price = item.data?.price;  // number
//   });
// });


// --- Language Switching ---

// Swift
// Cure.shared.setLanguage("fr")

// JavaScript
// await cure.setLanguage('fr');
// All observe() bindings update automatically when language changes.


// --- Real-time Updates ---
// SDKs connect via WebSocket when projectSecret is provided.
// Reactive wrappers (CureString, observe()) update UI automatically.
// No polling or manual refresh needed.

// JavaScript event listener:
// cure.addEventListener('contentUpdated', event => {
//   console.log('Content updated:', event.detail.reason);
// });

iOS SDK

Native Swift SDK for iOS 14+ and macOS. Delivers translations, colors, images, and structured data stores from your CMSCure Dashboard with automatic real-time updates via WebSocket.

iOS 14+SwiftUIUIKit

1. Installation

Add the SDK via Swift Package Manager in Xcode using the repository URL shown on the right. Dependencies (Socket.IO, Kingfisher) resolve automatically.

2. Configuration

Initialize the SDK once at app launch. Get your credentials from app.cmscure.com → Project Settings. Real-time updates are enabled by default.

3. Key Features

  • Translations: translation(for:inTab:) — Multi-language content with RTL support
  • Colors: colorValue(for:) — Dynamic theme colors with built-in Color(hex:) / UIColor(hex:)
  • Images: Cure.ManagedImage (SwiftUI) / imageURL(forKey:) (UIKit + Kingfisher)
  • Data Stores: dataStoreRecords(for:) — Typed accessors, visibility control & CTA URLs

4. SwiftUI Reactive Wrappers

Use @StateObject wrappers for UI that auto-updates when CMS content changes. No manual observers needed.

  • CureString("key", tab: "tab") — Reactive translated text
  • CureColor("key") — Reactive SwiftUI Color
  • CureDataStore(apiIdentifier: "id") — Reactive data store records
  • "key".cure(tab: "tab") — Inline String extension

5. UIKit Integration

Implement cmsContentDidUpdate() on any view controller — the SDK calls it automatically when content changes. Use Kingfisher for image loading.

6. Language Management

50+ built-in languages with RTL support, flag emojis, and display name helpers.

  • setLanguage("ar") / getLanguage()
  • languageDirection .isRTL for layout adaptation
  • CureLanguageDisplay.flag(for:) / .displayName(for:)
  • availableLanguages { codes in … }

7. Data Store Visibility

Items can be hidden or shown from the dashboard. Hidden items are automatically excluded from SDK responses — no client-side filtering needed. Changes take effect after publishing.

Get started in under 5 minutes

Full working examples for SwiftUI and UIKit are included in the SDK repository.

Platform Integration Examples

# Swift Package Manager (Xcode)
# FileAdd Packages# Paste the repository URL:

https://github.com/cmscure/ios-sdk.git

# Dependency rule: Up to Next Major Version
# Click Add PackageSocketIO & Kingfisher resolve automatically.

Android SDK

Native Kotlin SDK for Android 7+ (API 24). Delivers translations, colors, images, and structured data stores from your CMSCure Dashboard with automatic real-time updates via WebSocket. Supports both Jetpack Compose and traditional XML layouts.

Jetpack ComposeXML WidgetsKotlin

1. Installation

Add the JitPack repository to your settings.gradle.kts, then add the SDK dependency to your module-level build.gradle.kts. Every tagged release on GitHub is instantly available via JitPack — no extra packaging required. Coil is used for image loading in both Compose and XML helpers.

2. Configuration

Initialize the SDK once in your custom Application class. Get your credentials from app.cmscure.com → Project Settings. Don't forget to add INTERNET permission in your AndroidManifest.xml. Real-time updates are enabled by default via enableAutoRealTimeUpdates.

3. Key Features

  • Translations: Cure.translation(forKey, inTab) — Multi-language content with RTL support
  • Colors: Cure.colorValue(forKey) — Dynamic hex colors from the dashboard, auto-parsed to Color
  • Images: CureImage (Compose) / CureImageView (XML) — Managed images via Coil
  • Data Stores: Cure.getStoreItems(forIdentifier) — Typed accessors for strings, numbers, booleans & CTA URLs

4. Compose Reactive Helpers

Use built-in Compose helpers that automatically react to CMS changes via contentUpdateFlow. No manual observers or coroutine boilerplate needed — just swap your literals.

  • rememberCureString("key", "tab", "default") — Reactive translated text
  • rememberCureColor("key", Color.Gray) — Reactive Compose Color
  • cureDataStore("apiIdentifier") — Reactive data store records
  • CureImage(key = "hero_banner") — One-line managed image
  • CureText(key = "title", tab = "home") — One-line managed text
  • CureLayoutDirection { /* content */ } — Automatic RTL layout wrapping

5. XML Widget Integration

Drop CMS-backed widgets directly into your XML layouts. They auto-subscribe to real-time updates when cureAutoStart="true" is set, or control them manually with bind() / unbind().

  • CureTextView app:cureKey, app:cureTab, app:cureDefault
  • CureImageView app:cureImageKey for global images
  • CureColorView app:cureColorKey for dynamic backgrounds

6. Language Management

50+ built-in languages with RTL support, flag emojis, and display name helpers. Language changes trigger a full re-sync automatically.

  • Cure.setLanguage("ar") / Cure.getLanguage()
  • LanguageDirection.direction(code) .isRTL for layout adaptation
  • CureLanguageDisplay.flag(code) / .displayName(code)
  • availableLanguages { codes -> … }

7. Data Store Records

Data stores are collections of structured records — each record has typed fields you access via convenience methods on DataStoreItem. Hidden items are automatically excluded from SDK responses — no client-side filtering needed.

  • item.string("field") — Returns String?
  • item.int("field") / item.double("field") / item.bool("field")
  • item.ctaURL — Optional CTA / deep-link URL
  • item.id — Unique identifier for list keys

8. Offline Caching & Manual Sync

All translations, colors, images, and data stores are persisted to disk automatically. Cold starts serve the last-known state instantly. For manual control, use the sync APIs:

  • Cure.sync("screen_name") — Sync a specific screen / tab
  • Cure.syncStore("api_id") — Sync a specific data store
  • Cure.sync(CMSCureSDK.COLORS_UPDATED) — Sync global colors
  • CMSCureSDK.contentUpdateFlow — Kotlin Flow for observing all content changes
Get started in under 5 minutes

Full working sample apps for Jetpack Compose and XML are included in the SDK repository.

Platform Integration Examples

// settings.gradle.kts — add JitPack repository
dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        maven(url = "https://jitpack.io")
    }
}

// app/build.gradle.kts — add SDK + Coil
dependencies {
    implementation("com.github.cmscure:android-sdk:1.0.19")
    implementation("io.coil-kt:coil-compose:2.5.0")
}

React Native SDK

Cross-platform React Native SDK for iOS 14+ and Android 7+ (API 24). Delivers translations, colors, images, and structured data stores from your CMSCure Dashboard with automatic real-time updates via WebSocket. Supports both a reactive hooks-based API and an imperative API for full control.

React Native 0.71+iOS 14+Android API 24+TypeScript

1. Installation

Install via npm or yarn. On iOS, add use_frameworks! :linkage => :static to your Podfile for Swift pod compatibility, then run pod install. On Android, ensure minSdkVersion is at least 24. The library auto-links on both platforms.

2. Configuration

Wrap your app in <CMSCureProvider> — it initializes the SDK, syncs colors and images, and provides context to all hooks. Get your credentials from app.cmscure.com → Project Settings. Real-time updates are enabled by default.

3. Key Features

  • Translations: useCureString(key, tab) — Multi-language content with RTL support
  • Colors: useCureColor(key) — Dynamic hex colors from the dashboard
  • Images: useCureImage(key) — CMS-managed image URLs with <CureSDKImage> component
  • Data Stores: useCureDataStore(id) — Typed accessors for strings, numbers, booleans & CTA URLs

4. Hooks-based API

Use built-in React hooks that automatically react to CMS changes via WebSocket. No manual observers or subscriptions needed — all hooks must be used inside <CMSCureProvider>.

  • useCureString("key", "tab", "default") — Reactive translated text
  • useCureColor("key", "#007AFF") — Reactive hex color string
  • useCureImage("key") — Reactive image URL
  • useCureDataStore("apiIdentifier") — Reactive data store with { items, isLoading }
  • useCureLanguage() — Current language code, RTL flag, flag emoji, display name
  • <CureSDKImage url={url} /> — One-line CMS-managed image component

5. Imperative API

The Cure object provides direct access to all SDK functions. Use it outside of hooks, for manual control, or in non-React code paths.

  • Cure.translation(key, tab) — Async translation lookup
  • Cure.colorValue(key) / Cure.imageURL(key)
  • Cure.getStoreItems(id) / Cure.syncStore(id)
  • Cure.setLanguage(code) / Cure.getLanguage() / Cure.availableLanguages()

6. Language Management

80+ built-in languages with RTL support, flag emojis, and display name helpers. Language changes trigger a full re-sync automatically — all hooks re-render.

  • Cure.setLanguage("ar") / Cure.getLanguage()
  • LanguageDirection.direction(code) "RTL" / "LTR" for layout adaptation
  • LanguageDirection.isRTL(code) — Boolean RTL check (11+ RTL languages)
  • CureLanguageDisplay.flag(code) / .displayName(code)

7. Data Store Records

Data stores are collections of structured records — each record has typed fields you access via convenience methods. Hidden items are automatically excluded from SDK responses.

  • item.string("field") — Returns localized string or null
  • item.int("field") / item.double("field") / item.bool("field")
  • item.ctaURL — Optional CTA / deep-link URL
  • item.id — Unique identifier for list keys

8. Native Performance & Caching

Core logic runs natively — Swift on iOS (Kingfisher for images) and Kotlin on Android (Coil for images). All content is persisted to disk automatically. Cold starts serve the last-known state instantly. For manual control, use the sync APIs:

  • Cure.sync("screen_name") — Sync a specific screen / tab
  • Cure.syncStore("api_id") — Sync a specific data store
  • CMSCureContentUpdate — NativeEventEmitter event for observing all content changes
Get started in under 5 minutes

Full working examples are included in the SDK — a hooks-based example and an imperative API example.

Platform Integration Examples

# Install the SDK via npm or yarn
npm install @cmscure/react-native-cmscure-sdk
# --- or ---
yarn add @cmscure/react-native-cmscure-sdk

# iOS only — install CocoaPods dependencies
cd ios && pod install && cd ..

# Important: Add to your ios/Podfile inside the target block:
#   use_frameworks! :linkage => :static
#
# Android: Ensure minSdkVersion is at least 24 in
#   android/build.gradle

JavaScript SDK

The official CMSCure JavaScript SDK enables seamless integration of dynamic content management, multi-language support, and content updates into your web applications. Compatible with React, Next.js, Vue, Angular, Svelte, and vanilla JavaScript.

Official SDKProduction ReadyTypeScript

1. Installation

Install the official CMSCure SDK from NPM:

# Using npm
npm install @cmscure/javascript-sdk

# Using Yarn
yarn add @cmscure/javascript-sdk

# Using pnpm
pnpm add @cmscure/javascript-sdk

Or include directly via CDN for vanilla HTML/JS projects:

<script src="https://cdn.jsdelivr.net/npm/@cmscure/javascript-sdk@latest/dist/cmscure.umd.min.js"></script>

2. Project Setup

Get your credentials from your CMSCure Dashboard and initialize the SDK in your application's entry point.

3. Key Features

  • Translations: cure.observe('tab:key', callback) - Reactive multi-language content bindings
  • Colors: cure.observe('color:name', callback) - Dynamic theme and branding colors
  • Images: cure.observe('image:key', callback) - CDN-optimized image delivery
  • Data Stores: cure.observe('store:name', callback) - Structured data collections
  • Direct Access: cure.translation(key, tab), cure.color(key), cure.image(key), cure.dataStore(name)
  • Unified Resolver: cure.resolve('tab:key') - Single method for any content type

4. Multi-Language Support

Built-in internationalization with automatic language detection and easy language switching.

  • Language Detection: Automatic browser language detection with configurable defaultLanguage
  • Dynamic Switching: cure.setLanguage('fr') - All observe() bindings update automatically
  • Language Management: cure.getAvailableLanguages() and cure.getLanguage()
  • RTL Support: Detect RTL languages and adjust layout direction dynamically

Manage all your application content from the CMSCure Dashboard with dynamic content updates to your live application.

5. Performance & Reliability

Built for production applications with optimized content delivery and robust error handling.

  • CDN Integration: API proxied through gateway.cmscure.com, real-time via wss://app.cmscure.com
  • Smart Rate Limiting: Each resource syncs at most once every 2 seconds, preventing duplicate API calls and 429 errors
  • Persistent Caching: Content cached in localStorage across browser sessions with automatic cache invalidation
  • Fallback Support: Graceful degradation with defaultValue on every method

Perfect for production websites, mobile apps, and applications that require reliable content management.

Ready to get started?

Create your free CMSCure account and start managing dynamic content in minutes.

Framework Integration Examples

# Install via npm
npm install @cmscure/javascript-sdk

# Or via yarn
yarn add @cmscure/javascript-sdk

# Or via CDN (no installation needed)
# <script src="https://cdn.jsdelivr.net/npm/@cmscure/javascript-sdk@latest/dist/cmscure.umd.min.js"></script>

API Reference

This section provides detailed API references for all CMSCure SDKs. While method signatures vary by platform, the core concepts of tabs, keys, and real-time updates remain consistent across all implementations.

JavaScript SDK API (@cmscure/javascript-sdk)

The JavaScript SDK provides a modern, Promise-based API for web applications. Compatible with vanilla JavaScript, React, Next.js, Vue, Angular, and other frameworks.

✨ v1.4.7 Highlights

  • Reactive observe() bindings — one call per UI element, auto-updates on content or language changes
  • Smart rate limiting — each resource syncs at most once every 2 seconds, preventing 429 errors
  • Data Store field resolver — handles both plain values and localized objects ({en:"…", ar:"…"})
  • Persistent localStorage caching — instant cached loading across browser sessions
  • Real-time WebSocket sync — live updates via Socket.IO when project secret is provided
// Installation
npm install @cmscure/javascript-sdk

// Or CDN
// <script src="https://cdn.jsdelivr.net/npm/@cmscure/javascript-sdk@1.4.7/dist/cmscure.umd.min.js"></script>

// Usage
import CMSCureSDK from '@cmscure/javascript-sdk';
const cure = new CMSCureSDK();

Configuration

await cure.configure({ projectId, apiKey, projectSecret?, defaultLanguage? })

Configures and initializes the SDK. Must be called once before using other methods. REST requests go through gateway.cmscure.com and WebSocket connects to wss://app.cmscure.com.

Parameters:
  • projectId (string): Required. Your unique Project ID from the CMSCure dashboard.
  • apiKey (string): Required. Your API Key for authenticating requests.
  • projectSecret (string): Optional. Enables real-time WebSocket updates via Socket.IO.
  • defaultLanguage (string): Optional. Preferred language code (e.g., 'en'). Falls back to browser language detection.
Returns:

Promise<void> — Resolves when authentication and initial sync are complete.

Reactive Bindings (Primary API)

cure.observe(reference, listener, options?)

The primary API for reactive UI bindings. Subscribes to a content reference and calls the listener immediately with the current value, then again whenever the value changes (language switch, real-time update, sync). Returns an unsubscribe function.

Parameters:
  • reference (string): Content reference: 'tab:key' (translations), 'color:key', 'image:key', 'store:identifier', 'meta:languages', or 'meta:language'.
  • listener (function): Callback receiving (value, { reason }) on every update.
  • options.defaultValue (any): Optional. Fallback value if content is not yet cached.
Returns:

() => void — Call to unsubscribe and stop receiving updates.

cure.resolve(reference, defaultValue?)

Synchronously resolves any content reference string. Supports translations ('tab:key'), colors ('color:key'), images ('image:key'), data stores ('store:name'), and metadata ('meta:language', 'meta:languages').

Parameters:
  • reference (string): The content reference to resolve.
  • defaultValue (any): Optional fallback if the content is not found.
Returns:

any — The resolved value (string, array, etc.) or the defaultValue.

Direct Content Access

cure.translation(key, tab, defaultValue?)

Retrieves a localized string for the specified key and tab in the current language. Returns cached value immediately. Automatically subscribes the tab for syncing and real-time updates.

Parameters:
  • key (string): The key for the desired string (e.g., 'welcome_title').
  • tab (string): The tab/screen name (e.g., 'home_screen').
  • defaultValue (string): Optional fallback if the key is not found.
Returns:

string | null — The localized string or null/defaultValue.

cure.color(key, defaultValue?)

Retrieves a color hex value for the specified global color key. Automatically fetches all colors on first access.

Parameters:
  • key (string): The color key (e.g., 'primary_color').
  • defaultValue (string): Optional fallback hex value.
Returns:

string | null — The color hex value (e.g., '#3b82f6') or defaultValue.

cure.image(key, defaultValue?)

Retrieves a CDN-optimized image URL for the specified image key. Automatically fetches all images on first access.

Parameters:
  • key (string): The image key (e.g., 'hero_banner').
  • defaultValue (string): Optional fallback URL.
Returns:

string | null — The image URL or defaultValue.

cure.dataStore(apiIdentifier, defaultValue?)

Retrieves items from a Data Store. Each item has _id, data (field values), createdAt, updatedAt, and optional ctaUrl. Field values in data may be plain types or localized objects.

Parameters:
  • apiIdentifier (string): The API identifier of the Data Store (e.g., 'feature_products').
  • defaultValue (Array): Optional fallback. Defaults to [].
Returns:

Array — Array of data store items.

Language Management

cure.setLanguage(languageCode)

Changes the active language. Triggers re-sync of all subscribed content and notifies all observe() listeners with updated values.

Parameters:
  • languageCode (string): Language code (e.g., 'en', 'fr', 'ar').
Returns:

Promise<void>

cure.getLanguage()

Returns the currently active language code.

Returns:

string — Current language code (e.g., 'en').

cure.getAvailableLanguages()

Returns all language codes configured in your CMSCure project.

Returns:

string[] — Array of available language codes.

Synchronization & Events

cure.refresh()

Manually triggers a full content re-sync with the CMSCure servers. All observe() listeners will be notified with fresh values.

Returns:

Promise<void>

cure.addEventListener('contentUpdated', handler)

Listens for content update events. The SDK extends EventTarget, so standard addEventListener/removeEventListener work. Fires on sync completion, language changes, and real-time pushes.

Parameters:
  • handler (function): Receives a CustomEvent with event.detail containing { reason, timestamp, ... }.

💡 Data Store Field Access: Items from dataStore() have fields nested under item.data. Values can be plain types or localized objects. Use a helper: const v = item.data?.title; typeof v === "object" ? v[cure.getLanguage()] : v

Android SDK API (CMSCureAndroidSDK)

The Android SDK provides synchronous content access with Kotlin Coroutines Flow for reactive updates. Supports both Jetpack Compose and traditional Android Views.

// build.gradle (project)
maven { url = uri("https://jitpack.io") }

// build.gradle (module)
implementation("com.github.nicosurge:CMSCureAndroidSDK:1.0.0")

// Access via singleton
import com.cmscure.sdk.CMSCureSDK
typealias Cure = CMSCureSDK

Configuration

Cure.init(context: Context)

Initializes internal storage and resources. Must be called once before configure(), typically in Application.onCreate().

Parameters:
  • context (Context): Application context.
Cure.configure(context, projectId, apiKey, projectSecret, enableAutoRealTimeUpdates?)

Configures the SDK with project credentials. Must be called after init(). Triggers authentication, initial sync, and Socket.IO connection.

Parameters:
  • context (Context): Application context.
  • projectId (String): Your Project ID from the CMSCure dashboard.
  • apiKey (String): Your API Key for authenticating requests.
  • projectSecret (String): Project Secret for Socket.IO real-time handshake.
  • enableAutoRealTimeUpdates (Boolean): Optional. Enable automatic real-time sync. Defaults to true.

Content Access

Cure.translation(forKey: String, inTab: String) → String

Synchronously retrieves a translation for a specific key and tab in the current language. Returns empty string if not found. Auto-subscribes the tab for real-time updates.

Parameters:
  • forKey (String): The translation key (e.g., 'welcome_title').
  • inTab (String): The tab/screen name (e.g., 'home_screen').
Returns:

String — The translated string or empty string.

Cure.colorValue(forKey: String) → String?

Synchronously retrieves a hex color string for a given key. Auto-subscribes to color updates on first access.

Parameters:
  • forKey (String): The color key (e.g., 'primary_color').
Returns:

String? — Hex color (e.g., "#3b82f6") or null.

Cure.imageURL(forKey: String) → String?

Synchronously retrieves a CDN image URL for a given global image key. Auto-subscribes to image updates on first access.

Parameters:
  • forKey (String): The image key (e.g., 'hero_banner').
Returns:

String? — Image URL or null.

Cure.getStoreItems(forIdentifier: String) → List<DataStoreItem>

Synchronously retrieves items from a Data Store. Each DataStoreItem has id, data (Map<String, JSONValue>), createdAt, updatedAt, and typed accessors: .string(key), .int(key), .double(key), .bool(key), .ctaURL.

Parameters:
  • forIdentifier (String): The API identifier of the Data Store.
Returns:

List<DataStoreItem> — Array of data store items with typed field accessors.

Language Management

Cure.setLanguage(languageCode: String, force: Boolean = false)

Sets the active language. Triggers full content re-sync when changed.

Parameters:
  • languageCode (String): Language code (e.g., 'en', 'ar').
  • force (Boolean): Optional. Force refresh even if unchanged. Defaults to false.
Cure.getLanguage() → String

Returns the currently active language code.

Returns:

String — Current language code (e.g., "en").

Cure.availableLanguages(completion: (List<String>) → Unit)

Asynchronously fetches available language codes. Calls completion on the main thread.

Parameters:
  • completion ((List<String>) → Unit): Callback receiving the list of available language codes.

Synchronization & Real-time

Cure.sync(screenName: String, completion: ((Boolean) → Unit)?)

Manually triggers sync for a specific tab. Use constants COLORS_UPDATED or IMAGES_UPDATED for specialized syncs.

Parameters:
  • screenName (String): Tab name, or CMSCureSDK.COLORS_UPDATED / IMAGES_UPDATED.
  • completion (((Boolean) → Unit)?): Optional callback with success status.
Cure.contentUpdateFlow → SharedFlow<String>

Kotlin Coroutines SharedFlow that emits screen/store identifiers when content updates. Collect in a coroutine scope to react to updates. Special values: ALL_SCREENS_UPDATED, COLORS_UPDATED, IMAGES_UPDATED.

Returns:

SharedFlow<String> — Reactive stream of update identifiers.

Jetpack Compose

Compose Helpers — Use these inside @Composable functions for reactive UI bindings:

  • rememberCureString(key, tab, default) — Reactive translated string
  • rememberCureColor(key, default) — Reactive Color from hex key
  • rememberCureImageUrl(key, tab?, default?) — Reactive image URL
  • cureDataStore(apiIdentifier) — Reactive State<List<DataStoreItem>>
  • CureText(key, tab, ...) — Drop-in Text composable
  • CureImage(key, tab?, ...) — Drop-in AsyncImage composable
  • CureBackground(key, ...) — Box with CMS-managed background color
  • CureLayoutDirection { content } — Auto RTL/LTR direction wrapper

Android View Components

XML Views — Use these in traditional Android layouts:

  • CureTextView — XML attrs: app:cureKey, app:cureTab, app:cureDefault
  • CureImageView — XML attrs: app:cureImageKey, app:cureImageTab
  • CureColorView — XML attrs: app:cureColorKey, app:cureColorDefault

React Native SDK API (cmscure-sdk-native-module)

The React Native SDK provides React hooks for reactive UI bindings and an imperative Cure object for direct access. All hooks auto-update on content and language changes.

npm install cmscure-sdk-native-module

import { Cure, CMSCureProvider, useCureString, useCureColor,
  useCureImage, useCureDataStore, useCureLanguage,
  CureSDKImage } from 'cmscure-sdk-native-module';

Provider

<CMSCureProvider config={{ projectId, apiKey, projectSecret, enableAutoRealTimeUpdates? }}>

Wrap your app root with this provider. It initializes the SDK, loads colors and images, and provides context for all hooks. Shows a loading state during initialization.

Parameters:
  • projectId (string): Your Project ID from the CMSCure dashboard.
  • apiKey (string): Your API Key.
  • projectSecret (string): Project Secret for real-time updates.
  • enableAutoRealTimeUpdates (boolean): Optional. Enable auto real-time sync. Defaults to true.

Hooks (Primary API)

useCureString(key, tab, defaultValue?) → string

Returns a reactive translated string that auto-updates on content or language changes. Auto-subscribes the tab on first access.

Parameters:
  • key (string): Translation key (e.g., 'welcome_title').
  • tab (string): Tab/screen name (e.g., 'home_screen').
  • defaultValue (string): Optional fallback text.
Returns:

string — Reactive translated string.

useCureColor(key, defaultValue?) → string

Returns a reactive hex color string that auto-updates on content changes.

Parameters:
  • key (string): Color key (e.g., 'primary_color').
  • defaultValue (string): Optional fallback hex (e.g., '#007AFF'). Defaults to '#000000'.
Returns:

string — Hex color string (e.g., "#3b82f6").

useCureImage(key, tab?, defaultValue?) → string | null

Returns a reactive image URL. If tab is provided, retrieves from tab translations instead of global images.

Parameters:
  • key (string): Image key (e.g., 'hero_banner').
  • tab (string | null): Optional tab for tab-based images.
  • defaultValue (string): Optional fallback URL.
Returns:

string | null — Image URL or null.

useCureDataStore(apiIdentifier) → { items, isLoading }

Returns reactive data store items with loading state. Initial sync runs once per identifier; subsequent updates come from real-time events. Items have typed accessors: .string(key), .int(key), .double(key), .bool(key), .ctaURL.

Parameters:
  • apiIdentifier (string): The Data Store API identifier.
Returns:

{ items: DataStoreItem[], isLoading: boolean }

useCureLanguage() → { code, isRTL, flag, displayName }

Returns reactive language info that updates on language changes. Includes direction, flag emoji, and human-readable name.

Returns:

{ code: string, isRTL: boolean, flag: string, displayName: string }

Components

<CureSDKImage url={url} style={style} />

Renders a CMS-managed image. Wraps React Native's Image component. Returns null if url is falsy.

Parameters:
  • url (string | null): The image URL (typically from useCureImage).
  • style (StyleProp<ImageStyle>): Optional style prop for the image.

Imperative API

Cure Object — Direct access outside of hooks or in non-React code paths:

  • await Cure.translation(key, tab) — Async translation lookup
  • await Cure.colorValue(key) — Async color hex
  • await Cure.imageURL(key) — Async image URL
  • await Cure.getStoreItems(apiIdentifier) — Async data store items
  • Cure.setLanguage(code) — Set active language
  • await Cure.getLanguage() — Get current language
  • await Cure.availableLanguages() — Get available languages
  • Cure.sync(screenName) — Manual sync for a tab
  • await Cure.syncStore(apiIdentifier) — Sync & return data store items

Language Utilities:

  • LanguageDirection.isRTL(code) — Check if language is RTL
  • CureLanguageDisplay.flag(code) — Get flag emoji for language
  • CureLanguageDisplay.displayName(code) — Get human-readable language name

iOS Core — CMSCureSDK / Cure (Singleton)

The main entry point for interacting with the SDK. Access its functionalities via the shared singleton instance. A typealias `Cure` is provided for convenience: public typealias Cure = CMSCureSDK.

// Accessing the shared instance:
CMSCureSDK.shared
// or using the typealias:
Cure.shared

Configuration

// Swift / Android
configure(projectId: String, apiKey: String, projectSecret: String, serverUrlString: String = "https://app.cmscure.com", socketIOURLString: String = "wss://app.cmscure.com")

Configures the SDK with your project credentials and server details. This MUST be called once, early in your application's lifecycle (e.g., in AppDelegate or App struct initializer). It triggers internal setup, including legacy authentication and socket connection attempts.

Parameters:
  • projectId (String): Your unique Project ID from the CMSCure dashboard.
  • apiKey (String): Your API Key for authenticating API requests.
  • projectSecret (String): Your Project Secret, used for legacy encryption and socket handshake.
  • serverUrlString (String): Optional. Base URL for the CMSCure API. Defaults to 'https://app.cmscure.com'.
  • socketIOURLString (String): Optional. URL for the CMSCure Socket.IO server. Defaults to 'wss://app.cmscure.com'.
// Swift / Android
var debugLogsEnabled: Bool { get set }

Controls whether detailed SDK diagnostic messages are printed to the console. Defaults to true. Set to false for production builds.

// Swift / Android
var pollingInterval: TimeInterval { get set }

The interval (in seconds) at which the SDK periodically polls for content updates if socket connection is unavailable or as a fallback. Defaults to 300 seconds (5 minutes). Min: 60s, Max: 600s.

Language Management

// Swift / Android
setLanguage(_ language: String, force: Bool = false, completion: (() -> Void)? = nil)

Sets the current active language for retrieving translations. Persists the preference and triggers content updates for the new language.

Parameters:
  • language (String): The language code to set (e.g., "en", "fr").
  • force (Bool): Optional. If true, forces updates even if the language is unchanged. Defaults to false.
  • completion ((() -> Void)?): Optional. A closure called after all tabs have attempted to sync for the new language.
// Swift / Android
getLanguage() -> String

Retrieves the currently active language code.

Returns:

The current language code (e.g., "en").

// Swift / Android
availableLanguages(completion: @escaping ([String]) -> Void)

Asynchronously fetches the list of available language codes from the backend. Falls back to languages inferred from the local cache if the server request fails.

Parameters:
  • completion (([String]) -> Void): A closure called with an array of language code strings.

Content Accessors

// Swift / Android
translation(for key: String, inTab screenName: String) -> String

Retrieves a translation for a specific key within a given tab (screen name), using the currently set language. Returns an empty string if the translation is not found in the cache.

Parameters:
  • key (String): The key for the desired translation.
  • screenName (String): The name of the tab/screen where the translation key is located.
Returns:

The translated string for the current language, or an empty string if not found.

// Swift / Android
colorValue(for key: String) -> String?

Retrieves a color hex string for a given global color key. Colors are typically stored in a special tab named `__colors__`. Returns nil if the color key is not found.

Parameters:
  • key (String): The key for the desired color (e.g., "primary_brand_color").
Returns:

The color hex string (e.g., "#RRGGBB") or nil if not found.

// Swift / Android
imageUrl(for key: String, inTab screenName: String) -> URL?

Retrieves a URL for an image associated with a given key and tab, in the current language. The underlying translation for the key is expected to be a valid URL string. Returns nil if not found, empty, or not a valid URL.

Parameters:
  • key (String): The key for the desired image URL.
  • screenName (String): The name of the tab/screen where the image URL key is located.
Returns:

A URL object if a valid URL string is found, otherwise nil.

Synchronization & Cache

// Swift / Android
sync(screenName: String, completion: @escaping (Bool) -> Void)

Manually triggers a network fetch for the latest content of a specific screen name (tab). Updates the local cache and notifies handlers upon completion.

Parameters:
  • screenName (String): The name of the tab/screen to synchronize.
  • completion ( (Bool) -> Void): A closure called with true if synchronization was successful (even if no new data), false otherwise.
// Swift / Android
isTabSynced(_ tabName: String) -> Bool

Checks if the specified tab's content exists in the local cache, indicating it has been synced at least once and has data.

Parameters:
  • tabName (String): The name of the tab/screen to check.
Returns:

True if the tab has cached content, false otherwise.

// Swift / Android
clearCache()

Clears all cached data from memory and disk, including translations, colors, known tabs list, and any persisted legacy configuration. Also resets the runtime SDK configuration, requiring `configure()` to be called again for subsequent use. Stops active socket connections and polling.

Real-time Updates (Socket.IO)

// Swift / Android
startListening()

Attempts to establish or re-establish the Socket.IO connection if the SDK is configured and necessary credentials (like projectSecret for legacy handshake) are available. Called automatically after successful configuration and when the app becomes active.

// Swift / Android
stopListening()

Explicitly disconnects the Socket.IO client and releases related resources.

// Swift / Android
isConnected() -> Bool

Returns true if the Socket.IO client is currently connected to the server, false otherwise.

Returns:

A Boolean indicating the connection status.

// Swift / Android
onTranslationsUpdated(for screenName: String, handler: @escaping ([String: String]) -> Void)

Registers a handler to be called when translations for a specific screen name (tab) are updated. The handler is called immediately with cached data upon registration and then subsequently when that tab's content changes due to sync or socket events.

Parameters:
  • screenName (String): The name of the tab/screen to observe.
  • handler (([String: String]) -> Void): A closure that receives a dictionary of key-value translations for the current language.

NotificationCenter: The SDK also posts a Notification.Name.translationsUpdated notification on the main thread when content updates. The userInfo dictionary may contain a \"screenName\": String key indicating which tab was updated (or `__ALL__`).

SwiftUI Integration

For SwiftUI applications, CMSCureSDK provides ObservableObject wrappers and convenience extensions to create reactive UIs that automatically update when content changes.

ObservableObject Wrappers

Use these with @StateObject in your SwiftUI views.

// Swift / Android
class CureString: ObservableObject { get set }

An ObservableObject that provides a reactive translated string. Initialize with a key and tab name. Access the string via its `value` property.

// Swift / Android
class CureColor: ObservableObject { get set }

An ObservableObject that provides a reactive `SwiftUI.Color?`. Initialize with a color key (from the `__colors__` tab). Access the color via its `value` property.

// Swift / Android
class CureImage: ObservableObject { get set }

An ObservableObject that provides a reactive `URL?` for an image. Initialize with a key and tab name. Access the URL via its `value` property, typically used with `AsyncImage`.

String Extension

// Swift / Android
"your_key".cure(tab: "your_tab_name") -> String

A convenience extension on `String` to directly get a translation within SwiftUI views. This also triggers view updates when the underlying translation changes.

Parameters:
  • tab (String): The name of the tab/screen where the key is located.
Returns:

The translated string.

Utilities & Error Handling

The SDK includes some utilities and defines an error enum for more robust error handling.

Color Extension (SwiftUI)

// Swift / Android
extension Color { init?(hex: String?) }

An initializer for `SwiftUI.Color` that attempts to create a color from a hexadecimal string (e.g., "#RRGGBB" or "RRGGBB").

Parameters:
  • hex (String?): The hexadecimal color string.
Returns:

A `SwiftUI.Color` instance, or `nil` if the hex string is invalid.

Error Type

// Swift / Android
public enum CMSCureSDKError: Error, LocalizedError { get set }

Defines common errors encountered by the SDK, such as configuration issues, network problems, decoding failures, or sync errors. Conforms to `LocalizedError` for user-friendly descriptions.

Refer to the SDK source code for specific error cases and their localized descriptions.

This reference covers JavaScript, Android, React Native, and iOS (Swift/SwiftUI) SDK APIs. Unity, Flutter, and other platform APIs will be documented as they become available. The core concepts of tabs, keys, and real-time updates remain consistent across all platforms.

CMSCure - Headless CMS for Dynamic UI Content