Skip to main content

Overview

Superblocks allows you to bring your own React components into applications as Custom Components. Import any components from the React ecosystem, from your codebase, or build components from scratch, then drag them onto your application like built-in Superblocks components.

Getting Started​

To get started building Custom Components:

  1. Read through the remainder of this page to familiarize yourself with the core concepts
  2. Complete the quickstart guide, which will walk you through the process of building a component end-to-end
  3. Start building your own components! As you develop, please refer to the detailed dedicated reference articles for deep breakdowns of each relevant concept for Custom Components. You can also refer to the FAQ for any questions you have!

Properties & Events​

In each Custom Component you build, you will leverage properties and events to integrate your component with the Superblocks Application so it functions as any other built-in Superblocks component.

Properties & Events are defined in your config.ts file and accessed in your React code using the Custom Components React API.

Properties​

Properties comprise the state of the component. You will configure whether each property is:

  • Displayed in the properties panel, as well as how it displayed. You should expose a property in the properties panel if you want the developer building the Superblocks App to set the (initial) value.
  • Readable throughout other parts of the application.
  • Settable by other parts of the application (via Set/Reset Component Property)

Events​

You will define the set of Events the component exposes in Superblocks. You will trigger these events in your React code, and you can configure handlers for these events in the relevant section of the properties panel for the component in your Superblocks Application.

Custom Component Development Lifecycle​

Custom Components are developed locally within your own filesystem and IDE. During development, you will leverage the Superblocks CLI and a dedicated Local Development Mode to use and test the component within the Superblocks Application Builder. Once you are ready, you will upload your component to Superblocks so that it can be used in your production applications!

Diagram showing the phases of custom components

Custom components can either be:

  1. Scoped to a single application
  2. [Coming Soon] Scoped to your organization - components can be packaged and published as a Library for reuse across multiple applications. See FAQ for more details.
info

Learn more about the Custom Components Development Lifecycle.