DOCSEARCHbyAlgolia
Submit Docs

Builder.io SDKs and Tools

repository·main·Indexed 27 days ago

https://github.com/builderio/builder

A visual development platform to turn Figma designs into code and manage content via a drag-and-drop editor. This repository includes the Admin API SDK (@builder.io/admin-sdk), Android SDK for Jetpack Compose, Angular SDK (@builder.io/angular), Core SDK (@builder.io/sdk), and a CLI for space management and Next.js integration. It also provides the create-builder.io project initializer and tools for Figma synchronization and fiddle embedding.

Tokens
66.2K
Snippets
208
Records
434
Agent score
93%

What's inside Builder.io

  1. Overview of the Salesforce Commerce Cloud (SFCC) Sync Plugin

    main
    The SFCC Sync plugin enables a connection between your Builder.io instance and your Salesforce Commerce Cloud instance. It allows you to synchronize the content of any Builder model to a specific library of your choice within Salesforce Commerce Cloud.

  3. Overview of the Builder.io platform

    main
    Builder.io is a visual development platform that connects to your existing website or application. It allows you to visually edit content and generate code using your own existing components. Developers can use Figma designs or a drag-and-drop editor to create experiences and then publish updates via Builder.io SDKs.

  5. Understand Content State management in Builder.io SDKs

    main

    In Builder.io SDKs, the content state is determined by a combination of props provided by the user. These props are used to generate the initial value of the context within the Content component. The three primary props that dictate content state are:

    • content: The JSON representation of the content.
    • data: The data object used for data bindings within the content.
    • locale: Provides locale-specific overrides for the content.

  7. Use Action Shortcuts in Builder

    main

    Action shortcuts allow content creators to perform complex tasks without writing code. They simplify workflows by enabling non-developers to:

    • Trigger tracking events (e.g., sending events to Google Analytics on submit or click).
    • Set up conditional values.
    • Set specific values on state.

    This plugin example demonstrates how to define an action shortcut that triggers Google Analytics events on specified element events.

  8. Understand the Builder.io Personalization Container

    main

    The Personalization Container is a core component in Builder's SDK that enables targeting and scheduling capabilities at the block level. It renders different content variants based on user attributes (stored in cookies) and targeting criteria.

    Key behaviors:

    • SSR (Server-Side Rendering): Renders all variants but initially displays only the default variant to support SEO and prevent layout shifts.
    • Targeting: Evaluates rules against user attributes to determine the winning variant.
    • DOM Updates: Updates the DOM to show the winning variant as quickly as possible.
    • Events: Dispatches events when variants are loaded or displayed.

  9. Understand SSR A/B testing behavior

    main

    Builder.io uses a hybrid Server-Side Rendering (SSR) and Client-Side Rendering (CSR) approach to handle A/B testing variants without causing layout shifts or hydration mismatches.

    SSR Phase:

    • The server renders every single variant in the HTML.
    • The default variant is shown.
    • All other variants are hidden using CSS (display: none) and HTML attributes (hidden, aria-hidden).

    CSR Phase (Pre-hydration):

    • Inlined scripts (updateCookieAndStyles and updateVariantVisibility) execute immediately before the web framework hydrates.
    • These scripts read/set a cookie to determine the winning variant.
    • The scripts modify the DOM to show the winning variant and hide/remove the losing ones.
    • The scripts and associated style tags 'self-destruct' (remove themselves) once their task is complete to clean up the DOM.

  11. Understand Gen2 SDK build outputs and environments

    main

    Gen2 SDKs are generated using Mitosis and are built for three specific environments to handle environment-specific code (such as the evaluator for arbitrary JS).

    Each SDK produces three bundles, typically located in the following directories within the SDK's output folder:

    • lib/browser: For browser environments.
    • lib/node: For NodeJS environments.
    • lib/edge: For edge runtimes.