Like any good project, let’s start with a Hello World react component, and then understand how to make this available in Embeddable’s no-code builder.

A simple React component might look like this:

<HelloWorldComponent 
  title='Hello'
  body='World'
/>

To create such a component in React, you might write something simple like this:

import React from 'react';

type Props = {
  title: string;
  body: string;
};

export default (props: Props) => {
  return (
      <div>
        <h1>{props.title}</h1>
        <div>{props.body}</div>
      </div>
    )
}

It takes two props as input, title and body, and renders them in some basic HTML.

In Embeddable we want our users to be able to customise this component via the UI:

So all we need to do is tell Embeddable how to do that:

import { defineComponent } from '@embeddable.com/react';

import Component from './index';

export const meta = {
  name: 'HelloWorldComponent', 
  label: 'Hello World',
  inputs: [
    {
      name: 'title',
			label: 'Title',
      type: 'string',
    },
    {
      name: 'body',
      label: 'Body',
      type: 'string',
    },
  ]
};

export default defineComponent(Component, meta, {
  props: (inputs) => {
    return {
      title: inputs.title,
      body: inputs.body
    };
  }
});

Let’s break this down:

• meta contains the metadata that tells Embeddable what inputs to ask for when your team want to add this component to the Embeddable no-code builder canvas
• name must be a unique name that identifies this component when Embeddable is saving metadata about it (so try not to change this name later). This name must match the name of the file it is in (in this case HelloWorldComponent.emb.ts).
• label is the human readable name that will be shown in the UI (see screenshot above)
• inputs are the input fields that you are asking your team to enter
  • name is again a unique name that identifies this input in this component when we’re saving metadata about it in the Embeddable platform (so again try not to change this name later), but it only needs to be unique within this component (i.e. it’s fine if other components have similarly named inputs).
  • label is the human readable name that will be shown in the UI (see screenshot above)
  • type tells Embeddable which type of value you want to receive and therefore which type of input to render in the UI. Built-in native types include string, number, boolean, time and timeRange.
    • For this full list of native types, click here.
    • You can even define your own custom types.
• defineComponent is the function that tells the SDK to include this component in the bundle to send to the no-code builder.
• Component is the react component that we defined above (can be any react component).