Easyblocks

https://docs.easyblocks.io/
Admin
Easyblocks is an open-source React toolkit for building customizable visual page builders, enabling...
Tokens:24,190
Snippets:76
Trust Score:4.5
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Easyblocks Packages

Source: https://docs.easyblocks.io/getting-started

Installs the necessary Easyblocks editor and core packages using npm.

```bash
npm install @easyblocks/editor @easyblocks/core
```

--------------------------------

### Create Easyblocks Editor Page

Source: https://docs.easyblocks.io/getting-started

Sets up the Easyblocks editor page with a configuration object, including backend access, locales, and custom components like DummyBanner. It also defines the structure and styling for the DummyBanner component.

```typescript
import { EasyblocksEditor } from"@easyblocks/editor";
import { Config, EasyblocksBackend } from"@easyblocks/core";
import { ReactElement } from"react";

const easyblocksConfig: Config = {
  backend: new EasyblocksBackend({
    accessToken: "<<< your access token >>>", // read below how to aquire access token
  }),
  locales: [
    {
      code: "en-US",
      isDefault: true,
    },
    {
      code: "de-DE",
      fallback: "en-US",
    },
  ],
  components: [
    {
      id: "DummyBanner",
      label: "DummyBanner",
      schema: [
        {
          prop: "backgroundColor",
          label: "Background Color",
          type: "color",
        },
        {
          prop: "padding",
          label: "Pading",
          type: "space",
        },
        {
          prop: "Title",
          type: "component",
          required: true,
          accepts: ["@easyblocks/rich-text"],
        },
      ],
      styles: ({ values }) => {
        return {
          styled: {
            Root: {
              backgroundColor: values.backgroundColor,
              padding: values.padding,
            },
          },
        };
      },
    },
  ],
  tokens: {
    colors: [
      {
        id: "black",
        label: "Black",
        value: "#000000",
        isDefault: true,
      },
      {
        id: "white",
        label: "White",
        value: "#ffffff",
      },
      {
        id: "coral",
        label: "Coral",
        value: "#ff7f50",
      },
    ],
    fonts: [
      {
        id: "body",
        label: "Body",
        value: {
          fontSize: 18,
          lineHeight: 1.8,
          fontFamily: "sans-serif",
        },
        isDefault: true,
      },
      {
        id: "heading",
        label: "Heading",
        value: {
          fontSize: 24,
          fontFamily: "sans-serif",
          lineHeight: 1.2,
          fontWeight: 700,
        },
      },
    ],
    space: [
      {
        id: "0",
        label: "0",
        value: "0px",
        isDefault: true,
      },
      {
        id: "1",
        label: "1",
        value: "1px",
      },
      {
        id: "2",
        label: "2",
        value: "2px",
      },
      {
        id: "4",
        label: "4",
        value: "4px",
      },
      {
        id: "6",
        label: "6",
        value: "6px",
      },
      {
        id: "8",
        label: "8",
        value: "8px",
      },
      {
        id: "12",
        label: "12",
        value: "12px",
      },
      {
        id: "16",
        label: "16",
        value: "16px",
      },
      {
        id: "24",
        label: "24",
        value: "24px",
      },
      {
        id: "32",
        label: "32",
        value: "32px",
      },
      {
        id: "48",
        label: "48",
        value: "48px",
      },
      {
        id: "64",
        label: "64",
        value: "64px",
      },
      {
        id: "96",
        label: "96",
        value: "96px",
      },
      {
        id: "128",
        label: "128",
        value: "128px",
      },
      {
        id: "160",
        label: "160",
        value: "160px",
      },
    ],
  },
  hideCloseButton: true,
};

export function DummyBanner(props: {
  Root: ReactElement;
  Title: ReactElement;
}) {
  const { Root, Title } = props;
  return (
    <Root.type {...Root.props}>
      <Title.type {...Title.props} />
    </Root.type>
  );
}

export default function EasyblocksEditorPage() {
  return <EasyblocksEditor config={easyblocksConfig} components={{ DummyBanner }} />;
}

```

--------------------------------

### Define Spacing Tokens in Easyblocks

Source: https://docs.easyblocks.io/essentials/configuration

This example demonstrates defining spacing tokens in Easyblocks. It includes standard pixel values and responsive values using viewport width units (`vw`). The `id`, `label`, and `value` structure is used, with `value` supporting responsive objects.

```typescript
export const config: Config = {
  // ...,
  tokens: {
    // ...,
    space: [
      {
        id: "0",
        label: "0",
        value: "0px",
      },
      {
        id: "1",
        label: "1",
        value: "1px",
      },
      {
        id: "2",
        label: "2",
        value: "2px",
      },
      {
        id: "4",
        label: "4",
        value: "4px",
      },
      {
        id: "6",
        label: "6",
        value: "6px",
      },
      {
        id: "8",
        label: "8",
        value: "8px",
      },
      {
        id: "12",
        label: "12",
        value: "12px",
      },
      {
        id: "16",
        label: "16",
        value: "16px",
      },
      {
        id: "24",
        label: "24",
        value: "24px",
      },
      {
        id: "32",
        label: "32",
        value: "32px",
      },
      {
        id: "48",
        label: "48",
        value: "48px",
      },
      {
        id: "64",
        label: "64",
        value: "64px",
      },
      {
        id: "96",
        label: "96",
        value: "96px",
      },
      {
        id: "128",
        label: "128",
        value: "128px",
      },
      {
        id: "160",
        label: "160",
        value: "160px",
      },
      {
        id: "containerMargin.standard",
        label: "Standard",
        value: {
          // responsive value
          $res: true,
          md: "5vw", // vw units are allowed for "space" type
          lg: "8vw",
        },
      },
      {
        id: "containerMargin.large",
        label: "Large",
        value: {
          // repsonsive value
          $res: true,
          xs: "5vw",
          md: "8vw",
          lg: "12vw",
        },
      },
    ],
    // ...
  },
};
```

--------------------------------

### Custom Backend Interface Definition

Source: https://docs.easyblocks.io/essentials/backend

This TypeScript interface defines the contract for a custom Easyblocks backend. It specifies the methods required for managing documents (get, create, update) and templates (get, getAll, create, update, delete).

```typescript
export type Backend = {
  documents: {
    get: (payload: { id: string; locale?: string }) => Promise<Document>;
    create: (payload: Omit<Document, "id" | "version">) => Promise<Document>;
    update: (payload: Omit<Document, "type">) => Promise<Document>;
  };
  templates: {
    get(payload: { id: string }): Promise<UserDefinedTemplate>;
    getAll: () => Promise<UserDefinedTemplate[]>;
    create: (payload: {
      label: string;
      entry: NoCodeComponentEntry;
      width?: number;
      widthAuto?: boolean;
    }) => Promise<UserDefinedTemplate>;
    update: (payload: {
      id: string;
      label: string;
    }) => Promise<Omit<UserDefinedTemplate, "entry">>;
    delete: (payload: { id: string }) => Promise<void>;
  };
};

export type Document = {
  id: string;
  version: number;
  entry: NoCodeComponentEntry;
};

export type UserDefinedTemplate = {
  id: string;
  label: string;
  thumbnail?: string;
  thumbnailLabel?: string;
  entry: NoCodeComponentEntry;
  isUserDefined: true;
  width?: number;
  widthAuto?: boolean;
};
```

--------------------------------

### Defining No-Code Components in Easyblocks

Source: https://docs.easyblocks.io/essentials/configuration

Specifies the No-Code Component Definitions available in the Easyblocks setup. Each component has an ID and a schema defining its properties.

```typescript
importtype { Config } from'@easyblocks/core';
constconfig:Config= {
  ...,
  components: [
    {
      id:'MyNoCodeComponent',
      schema: [
        {
          prop:'title',
          type:'string',
          label:'Title'
        }
      ]
    }
  ]
};
```

--------------------------------

### Resolve Product References in Fetcher

Source: https://docs.easyblocks.io/essentials/external-data

This example demonstrates a complete fetcher implementation within the `onExternalDataChange` callback. It filters external references for the 'product' widget, finds matching products from a local array, and returns the resolved data or an error if a product is not found.

```javascript
const products = [
  {
    id: "1",
    title: "Product 1",
    price: 25.0,
  },
  {
    id: "2",
    title: "Product 2",
    price: 10.0,
  },
  {
    id: "3",
    title: "Product 3",
    price: 50.0,
  },
  {
    id: "4",
    title: "Product 4",
    price: 150.0,
  },
];
const [externalDataValues, setExternalDataValues] = useState<ExternalData>(
  {}
);
<EasyblocksEditor
  ...
  onExternalDataChange={async externals => {
    // (1)
    const productReferences = Object.entries(externals)
      .filter(([, reference]) => {
        // Why do we check `widgetId` instead of `type`?
        // We could rely on `type` field, but we could have multiple widgets for
        // the same type and they could be resolved differently.
        // Why do we check for empty `id`? 
        // Changing from non empty value to empty is also a change
        return reference.widgetId === 'product' && reference.id !== null;
      });
    const resolvedProducts = Object.fromEntries(
      productReferences.map(([id, reference]) => {
        // (2)
        const product = products.find(p => p.id === reference.id);
        // (3)
        if (!product) {
          // If product wasn't resolved/found, we report an error
          return [id, { error: new Error(
            `Product with id ${reference.id} was not found`
          )}]
        }
        // (3) If found, return it as resolved external data
        return [id, { type: 'product', value: product }];
    }));
    // We inform editor about change by updating `externalDataValues` state variable
    // with new data
    setExternalDataValues({
      ...externalDataValues,
      ...resolvedProducts
    });
  }}
/>
```

--------------------------------

### No-Code Entry with Selected Product ID

Source: https://docs.easyblocks.io/essentials/external-data

This JSON snippet shows an example of a No-Code Entry storing the 'id' and 'widgetId' of a selected product, demonstrating that only the identifier is stored, not the full data.

```json
{
  "product": {
    "id": "3",
    "widgetId": "product"
  }
}
```

--------------------------------

### Define Compound Type for Product Data

Source: https://docs.easyblocks.io/essentials/external-data

Illustrates how to structure compound data in Easyblocks, returning multiple basic data types within a single object. This example shows returning a product's title, primary image, and the full product object.

```javascript
{
  type: "object",
  value: {
    productTitle: {
      type: "text",
      value: product.title
    },
    productPrimaryImage: {
      type: "image",
      value: product.images[0]
    },
    self: {
      type: "product",
      value: product
    }
  ]
}
```

--------------------------------

### SimpleBanner No-Code Component Definition and Usage

Source: https://docs.easyblocks.io/essentials/no-code-components

Defines a 'SimpleBanner' No-Code Component with properties for background color, border, padding, and layout. It includes a React component implementation and configuration examples for integrating it into Easyblocks.

```TypeScript
// No-Code Component Definition
import { NoCodeComponentDefinition } from"@easyblocks/core";
exportconstsimpleBannerDefinition:NoCodeComponentDefinition= {
  id:"SimpleBanner",
  label:"SimpleBanner",
  type:"section",
  schema: [
    {
      prop:"backgroundColor",
      label:"Background Color",
      type:"color"
    },
    {
      prop:"hasBorder",
      label:"Has Border?",
      type:"boolean",
      responsive:true
    },
    {
      prop:"padding",
      label:"Pading",
      type:"space"
    },
    {
      prop:"gap",
      label:"Gap",
      type:"space"
    },
    {
      prop:"buttonsGap",
      label:"Buttons gap",
      type:"space"
    },
    {
      prop:"Title",
      type:"component",
      required:true,
      accepts: ["@easyblocks/text"]
    },
    {
      prop:"Buttons",
      type:"component-collection",
      accepts: ["Button"],
      placeholderAppearance: {
        height:36,
        width:100,
        label:"Add button"
      }
    }
  ],
styles: ({ values }) => {
return {
      styled: {
        Root: {
          backgroundColor:values.backgroundColor,
          border:values.hasBorder ?"2px solid black":"none",
          padding:values.padding
        },
        Wrapper: {
          maxWidth:600,
          display:"flex",
          flexDirection:"column",
          gap:values.gap
        },
        ButtonsWrapper: {
          display:"flex",
          flexDirection:"row",
          flexWrap:"wrap",
          gap:values.buttonsGap
        }
      }
    }
  },
editing: ({ values, editingInfo}) => {
return {
      components: {
        Buttons:values.Buttons.map(() => ({
          direction:"horizontal",
        })),
        Title: {
          fields: [
            {
...editingInfo.fields.find(field =>field.path ==="gap")!,
              label:"Bottom gap"
            }
          ]
        }
      },
    };
  },
};
// Component code
import { ReactElement } from"react";
typeSimpleBannerProps= {
  Root:ReactElement;
  Title:ReactElement;
  Wrapper:ReactElement;
  Buttons:ReactElement[];
  ButtonsWrapper:ReactElement
}
exportfunctionSimpleBanner(props:SimpleBannerProps) {
const { Root,Title,Wrapper,Buttons,ButtonsWrapper } = props;
return (
    <Root.type {...Root.props}>
      <Wrapper.type {...Wrapper.props}>
        <Title.type {...Title.props} />
        <ButtonsWrapper.type {...ButtonsWrapper.props}>
          {Buttons.map((Button, index) => <Button.type {...Button.props} key={index} />)}
        </ButtonsWrapper.type>
      </Wrapper.type>
    </Root.type>
  )
}

```

```TypeScript
// easyblocks.config.ts
export const easyblocksConfig = {
  components: {
    // ...other component definitions,
    simpleSectionDefinition,
  },
};

```

```JavaScript
<EasyblocksEditor
  config={easyblocksConfig}
  components={{ ...otherComponents, SimpleSection }}
/>

```

--------------------------------

### Handle Easyblocks Editor Events

Source: https://docs.easyblocks.io/essentials/editor-page

This example shows how to listen for postMessage events sent from the Easyblocks editor within an iframe. It uses a `useEffect` hook to add and remove an event listener to the iframe's content window, allowing you to handle events like `@easyblocks/closed` and `@easyblocks/content-saved`.

```JavaScript
// We use state instead of ref on purpose to exactly know when the node is attached
// so we could react to it.
const [iframeNode, setIframeNode] = useState<HTMLIFrameElement | null>(null);
useEffect(() => {
  function handleMessage(event: MessageEvent) {
    if (event.data.type === "@easyblocks/closed") {
      // handle closed event
    }
    if (event.data.type === "@easyblocks/content-saved") {
      // handle content saved event
    }
  }
  iframeNode?.contentWindow?.addEventListener("message", handleMessage);
  return () => {
    iframeNode?.contentWindow?.removeEventListener("message", handleMessage);
  };
}, [iframeNode]);
return (
  <iframe
    src={`/your-editor-page?rootContainer=myContainer&mode=app`}
    ref={setIframeNode}
  ></iframe>
);
```

--------------------------------

### Build Easyblocks Document

Source: https://docs.easyblocks.io/essentials/rendering-content

Prepares an Easyblocks document for rendering by processing it through a build phase. Requires document ID, configuration, and locale.

```javascript
import { buildDocument } from"@easyblocks/core";
const { renderableDocument } =await buildDocument({
  documentId:"<your_document_id>",
  config: easyblockConfig,
  locale:"<your_desired_locale>",
});
```

--------------------------------

### Implement Product Picker Widget with SimplePicker

Source: https://docs.easyblocks.io/essentials/external-data

Demonstrates how to use the SimplePicker component from '@easyblocks/design-system' to create a product selection widget. It shows how to implement `getItems` for searching and `getItemById` for fetching item details.

```typescript
import { WidgetComponentProps } from "@easyblocks/core";
import { SimplePicker } from "@easyblocks/design-system";

const products = [
  {
    id: "1",
    title: "Product 1",
    price: 25.0,
  },
  {
    id: "2",
    title: "Product 2",
    price: 10.0,
  },
  {
    id: "3",
    title: "Product 3",
    price: 50.0,
  },
  {
    id: "4",
    title: "Product 4",
    price: 150.0,
  },
];

function ProductPickerWidget(props: WidgetComponentProps) {
  return (
    <SimplePicker
      value={props.id}
      onChange={props.onChange}
      getItems={async (query) => {
        const filteredItems = products.filter((p) => p.title.includes(query));
        return filteredItems.map((i) => {
          return {
            id: i.id,
            name: i.title,
          };
        });
      }}
      getItemById={async (id) => {
        const item = products.find((p) => p.id === id);
        return {
          id: item.id,
          name: item.title,
        };
      }}
    />
  );
}
```

--------------------------------

### Create Easyblocks Editor Page

Source: https://docs.easyblocks.io/essentials/editor-page

This snippet demonstrates how to create a dedicated editor page for Easyblocks. It imports the EasyblocksEditor component and the project's configuration, then renders the editor with the provided configuration and no-code component instances. The editor page should be a blank canvas with only the EasyblocksEditor component.

```TypeScript
import { EasyblocksEditor } from"@easyblocks/editor";
import { easyblocksConfig } from"../easyblocks.config.ts";
functionEditorPage() {
return (
    <EasyblocksEditor
config={easyblocksConfig}
components={yourNoCodeComponentInstances}
    />
  );
}
```

--------------------------------

### Easyblocks SimpleBanner Editing Function Example

Source: https://docs.easyblocks.io/essentials/no-code-components/editing-function

Demonstrates how to define an 'editing' function for a SimpleBanner component in Easyblocks. This function customizes the sidebar display, component selection behavior, and property passing to child components.

```typescript
import { NoCodeComponentDefinition } from"@easyblocks/core";
exportconstsimpleBannerDefinition:NoCodeComponentDefinition= {
// ...
editing: ({ values, editingInfo }) => {
return {
      components: {
        Buttons:values.Buttons.map(() => ({
          direction:"horizontal",
        })),
        Title: {
          fields: [
            {
...editingInfo.fields.find((field) =>field.path ==="gap")!,
              label:"Bottom gap",
            },
          ],
        },
      },
    };
  },
};
```

--------------------------------

### Configuring Easyblocks Backend

Source: https://docs.easyblocks.io/essentials/configuration

Sets the backend service for managing documents and templates, including saving, updating, and versioning. Requires an access token for authentication.

```typescript
importtype { Config, EasyblocksBackend } from"@easyblocks/core";
constconfig:Config= {
  backend:newEasyblocksBackend({ accessToken:MY_ACCESS_TOKEN }),
// ...
};
```

--------------------------------

### Easyblocks: Compute Props with styles function

Source: https://docs.easyblocks.io/essentials/no-code-components/styles-function

Demonstrates how to compute and pass properties to a React component using the 'props' field within the Easyblocks 'styles' function. In this example, 'computedProp' is added as a property to the SimpleBanner React component.

```TypeScript
// No-Code Component Definition
import { NoCodeComponentDefinition } from "@easyblocks/core";
export const simpleBannerDefinition: NoCodeComponentDefinition = {
  // ...
  styles: ({ values }) => {
    return {
      styled: {
        // ...
      },
      props: {
        computedProp: 10
      }
    }
  },
  // ...
};
```

--------------------------------

### Easyblocks Cloud Backend Configuration

Source: https://docs.easyblocks.io/essentials/backend

This snippet shows how to configure Easyblocks to use its default cloud backend service by providing an access token. Ensure you obtain a valid access token from app.easyblocks.io.

```typescript
import { Config, EasyblocksBackend } from"@easyblocks/core";

export const easyblocksConfig: Config = {
  backend: new EasyblocksBackend({
    accessToken: "<<< your access token >>>",
  }),
  // ...
};
```

--------------------------------

### Easyblocks Space Field Type

Source: https://docs.easyblocks.io/essentials/no-code-components/schema

Describes the 'space' field type in Easyblocks, used for selecting spacing values from design tokens. It provides examples of the UI representation and the No-Code Entry format, showing tokenId and pixel values.

```javascript
{
  prop: "marginBottom",
  type: "space",
  label: "Margin bottom"
}
```

```javascript
{
  "bottomMargin": {
    "$res": true,
    "xl": {
      "tokenId": "32",
      "value": "32px"
    }
  }
}
```

--------------------------------

### Create Easyblocks Editor Page (TypeScript)

Source: https://docs.easyblocks.io/essentials

This snippet shows how to create a React component for the Easyblocks editor page. It requires importing `EasyblocksEditor` and a configuration object, and passing instances of No-Code Components.

```typescript
import { EasyblocksEditor } from"@easyblocks/editor";
import { easyblocksConfig } from"../easyblocks.config.ts";
functionEditorPage() {
return (
    <EasyblocksEditor
config={easyblocksConfig}
components={yourNoCodeComponentInstances}
    />
  );
}
```

--------------------------------

### Select Type Configuration

Source: https://docs.easyblocks.io/essentials/no-code-components/schema

Configures a select input for a component, allowing users to choose one option from a predefined list. Options can be simple strings or objects with custom labels. This type supports responsiveness.

```json
{
  "prop": "position",
  "type": "select",
  "params": {
    "options": ["top", "bottom", "left"]
  }
}
```

--------------------------------

### Define Product Type with Widget

Source: https://docs.easyblocks.io/essentials/external-data

This TypeScript snippet demonstrates defining a custom 'product' type with a widget configuration, including its ID and label. It also shows the basic structure of a React widget component.

```typescript
// Widgets definition
const easyblocksConfig: Config = {
  ...,
  types: {
    product: {
      type: "external",
      widgets: [
        {
          "id": "product",
          "label": "Product"
        }
      ],
    }
  }
}
// Widget's component
import { WidgetComponentProps } from "@easyblocks/core";
function ProductPickerWidget(props: WidgetComponentProps<string>) {
  return null;
}
<EasyblocksEditor
  config={easyblocksConfig}
  widgets={{ product: ProductPickerWidget }}
/>
```

--------------------------------

### Dynamically Render Product Page with External Data

Source: https://docs.easyblocks.io/essentials/external-data

This JavaScript code demonstrates how to dynamically render a product page in Easyblocks. It uses the `buildDocument` function to fetch content and external data, then customizes the '$.product' external data with an ID from URL parameters before passing it to the `Easyblocks` component for rendering.

```JavaScript
import {
  Easyblocks,
  buildDocument,
  RequestedExternalData,
} from "@easyblocks/core";
import { easyblocksConfig } from "./path-to-your-easyblocks-config";

async function myFetcher(externalData: RequestedExternalData) {
  // Your custom fetcher logic
}

function ProductPage({ params }: Record<string, string>) {
  const { renderableDocument, externalData } = await buildDocument({
    documentId: "<DOCUMENT_ID_OF_PRODUCT_PAGE_CONTENT>",
    config: easyblocksConfig,
    locale: "en-US",
  });

  const fetchedExternalData = await myFetcher({
    ...externalData,
    "$.product": {
      ...externalData["$.product"],
      id: params.id,
    },
  });

  return (
    <Easyblocks
      renderableDocument={renderableDocument}
      externalData={fetchedExternalData}
    />
  );
}

```

--------------------------------

### Aspect Ratios Configuration

Source: https://docs.easyblocks.io/essentials/configuration

Defines a list of aspect ratios that can be used in the application. Each aspect ratio has an ID, a human-readable label, and a value representing the ratio.

```javascript
aspectRatios: [
      {
        id: "panoramic",
        label: "Panoramic (2:1)",
        value: "2:1",
      },
      {
        id: "landscape",
        label: "Landscape (16:9)",
        value: "16:9",
      },
      {
        id: "portrait",
        label: "Portrait (4:5)",
        value: "4:5",
      },
      {
        id: "square",
        label: "Square (1:1)",
        value: "1:1",
      },
    ]
```

--------------------------------

### Render Document with Easyblocks Component

Source: https://docs.easyblocks.io/essentials/rendering-content

Renders the prepared Easyblocks document using the `Easyblocks` component. Requires the `renderableDocument` and a mapping of custom components.

```jsx
import { Easyblocks } from "@easyblocks/core";
<Easyblocks
  renderableDocument={renderableDocument}
  components={yourNoCodeComponentInstancesObject}
/>;
```

--------------------------------

### Templates Configuration

Source: https://docs.easyblocks.io/essentials/configuration

Demonstrates how to configure templates within the Easyblocks project. It shows importing a template configuration and assigning it to a specific ID.

```typescript
import type { Config } from '@easyblocks/core';
import bannerTemplate1 from "bannerTemplate1.json"
const config: Config = {
  ...,
  templates: [
    {
      id: "BannerSection",
      entry: bannerTemplate1
    }
  ]
};
```

--------------------------------

### Box Shadows Configuration

Source: https://docs.easyblocks.io/essentials/configuration

Provides a collection of predefined box shadow styles, ranging from 'none' to '2xl'. Each style includes an ID, a label, and the corresponding CSS `box-shadow` value.

```javascript
boxShadows: [
      {
        id: "none",
        label: "None",
        value: "none",
      },
      {
        id: "sm",
        label: "sm",
        value: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
      },
      {
        id: "md",
        label: "md",
        value:
          "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
      },
      {
        id: "lg",
        label: "lg",
        value:
          "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
      },
      {
        id: "xl",
        label: "xl",
        value:
          "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
      },
      {
        id: "2xl",
        label: "2xl",
        value: "0 25px 50px -12px rgb(0 0 0 / 0.25)",
      },
    ]
```

--------------------------------

### Define ProductPage Component with Root Parameter

Source: https://docs.easyblocks.io/essentials/external-data

This TypeScript code defines a configuration for an Easyblocks component named 'ProductPage'. It specifies a 'data' property that accepts a collection of 'item' components and a root parameter 'product' which is a selectable field in the editor, linked to a 'product' widget.

```TypeScript
import type { Config } from "@easyblocks/core";
const easyblocksConfig: Config = {
  ...,
  components: [
    {
      id: "ProductPage",
      schema: [
        {
          prop: "data",
          type: "component-collection",
          accepts: ["item"]
        }
      ],
      rootParams: [
        {
          prop: "product",
          label: "Product",
          widgets: [{
            id: "product",
            label: "Product"
          }]
        },
      ]
    }
  ]
};

```

--------------------------------

### Easyblocks External Data Fetching

Source: https://docs.easyblocks.io/essentials/external-data

Demonstrates how Easyblocks fetches and provides external data to its components. Data is dynamically fetched and passed via the `externalData` prop to `EasyblocksEditor` or `Easyblocks` components.

```javascript
import { EasyblocksEditor, Easyblocks } from '@easyblocks/react';

// ... inside your component

const MyComponent = ({ externalData }) => {
  // Use externalData for editing or rendering
  return (
    <div>
      {/* Render content using externalData */}
      <EasyblocksEditor externalData={externalData} />
      <Easyblocks externalData={externalData} />
    </div>
  );
};

// Fetching data would happen here, e.g.:
// async function fetchData() {
//   const data = await fetch('/api/my-data').then(res => res.json());
//   return data;
// }

// Example usage:
// <MyComponent externalData={fetchData()} />
```

--------------------------------

### Easyblocks No-Code Component Schema Definition

Source: https://docs.easyblocks.io/essentials/no-code-components/schema

Defines the schema for a `SimpleBanner` No-Code Component, including basic properties like color and spacing, boolean flags for responsiveness, and subcomponents for text and button collections. It showcases how to configure property types, labels, and constraints.

```TypeScript
exportconstsimpleBannerDefinition:NoCodeComponentDefinition= {
// ...,
  schema: [
    {
      prop:"backgroundColor",
      label:"Background Color",
      type:"color",
    },
    {
      prop:"hasBorder",
      label:"Has Border?",
      type:"boolean",
      responsive:true,
    },
    {
      prop:"padding",
      label:"Pading",
      type:"space",
    },
    {
      prop:"gap",
      label:"Gap",
      type:"space",
    },
    {
      prop:"buttonsGap",
      label:"Buttons gap",
      type:"space",
    },
    {
      prop:"Title",
      type:"component",
      required:true,
      accepts: ["@easyblocks/text"],
    },
    {
      prop:"Buttons",
      type:"component-collection",
      accepts: ["Button"],
      placeholderAppearance: {
        height:36,
        width:100,
        label:"Add button",
      },
    },
  ],
// ...
};
```

--------------------------------

### Define Font Tokens in Easyblocks

Source: https://docs.easyblocks.io/essentials/configuration

This code illustrates how to define font tokens in Easyblocks, including font size, line height, font family, and font weight. It supports both static and responsive font definitions using a `$res: true` flag.

```typescript
export const config: Config = {
  // ...,
  tokens: {
    // ...,
    fonts: [
      {
        id: "body",
        label: "Body",
        value: {
          fontSize: 20,
          lineHeight: 1.8,
          fontFamily: "test-soehne-mono",
        },
      },
      {
        id: "body2",
        label: "Body small",
        value: {
          fontSize: 13,
          lineHeight: 1.8,
          fontFamily: "test-soehne-mono",
        },
      },
      {
        id: "heading1",
        label: "Heading 1",
        value: {
          $res: true,
          sm: {
            fontSize: 36,
            fontFamily: "test-national-2",
            lineHeight: 1.2,
            fontWeight: 700,
          },
          md: {
            fontSize: 48,
            fontFamily: "test-national-2",
            lineHeight: 1.2,
            fontWeight: 700,
          },
        },
      },
      {
        id: "heading2",
        label: "Heading 2",
        value: {
          $res: true,
          sm: {
            fontFamily: "test-national-2",
            fontSize: 24,
            lineHeight: 1.2,
            fontWeight: 700,
          },
          md: {
            fontFamily: "test-national-2",
            fontSize: 36,
            lineHeight: 1.2,
            fontWeight: 700,
          },
        },
      },
    ],
    // ...
  },
};
```

--------------------------------

### Define Product Data Structure

Source: https://docs.easyblocks.io/essentials/external-data

This snippet shows the structure of a product list, which is an array of product objects. Each product has an id, title, and price.

```json
[
  {
"id":"1",
"title":"Product 1",
"price":25.0
  },
  {
"id":"2",
"title":"Product 2",
"price":10.0
  },
  {
"id":"3",
"title":"Product 3",
"price":50.0
  },
  {
"id":"4",
"title":"Product 4",
"price":150.0
  }
]
```

--------------------------------

### Accepting Custom Components in Easyblocks

Source: https://docs.easyblocks.io/essentials/no-code-components/schema

Demonstrates how to configure the 'accepts' property in an Easyblocks 'component' field to allow specific custom components by their ID or a shared type.

```javascript
// "MyComponent" No-Code Component definiton
{
  id: "MyComponent",
  schema: [...]
}
// Component field of type "MyComponent"
{
  prop: "Component",
  type: "component",
  accepts: ["MyComponent"]
}
```

```javascript
// Section1 definition
{
  id: "Section1",
  type: "section",
  schema: [...]
}
// Section2 definition
{
  id: "Section2",
  type: "section",
  schema: [...]
}
// Component field of "section" type
{
  prop: "Section",
  type: "component",
  accepts: ["section"]
}
```

--------------------------------

### Implement Product Display Component

Source: https://docs.easyblocks.io/essentials/external-data

This JSX snippet defines a React component named 'Product' that receives a 'product' prop and displays its title and price. It also shows how to integrate this component with Easyblocks Editor.

```jsx
function Product({ product }: ProductProps) {
  return (
    <div>
      <h1>{product.title}</h1>
      <p>{product.price}</p>
    </div>
  );
}
// Editor component
<EasyblocksEditor
  config={easyblocksConfig}
  components={{ Product }}
  widgets={{ product: ProductPickerWidget }}
/>
```

--------------------------------

### Define Color Tokens in Easyblocks

Source: https://docs.easyblocks.io/essentials/configuration

This snippet shows how to define a list of color tokens for use in Easyblocks. Each token has an `id`, `label`, and a `value` representing the color. This allows for consistent color usage across the project.

```typescript
export const config: Config = {
  // ...,
  tokens: {
    colors: [
      {
        id: "grey_05",
        label: "Dark",
        value: "#252525",
      },
      {
        id: "grey_01",
        label: "Light",
        value: "#f9f8f3",
      },
      {
        id: "beige_01",
        label: "Beige",
        value: "#f1f0ea",
      },
      {
        id: "yellow",
        label: "Lemonade Yellow",
        value: "#FCF0C5",
      },
      {
        id: "golden-yellow",
        label: "Golden Yellow",
        value: "#FCF0C5",
      },
      {
        id: "lavender",
        label: "Lavender",
        value: "#E1E2ED",
      },
      {
        id: "olive",
        label: "Olive",
        value: "#A9A886",
      },
    ],
    // ...
  },
};
```

--------------------------------

### Component with Required and Optional Fields

Source: https://docs.easyblocks.io/essentials/no-code-components/schema

Demonstrates a component structure with a mandatory 'Heading' component and an optional 'Subheading' component, illustrating how to enforce required elements.

```javascript
{
  id: "Card",
  schema: [
    {
      prop: "Heading",
      type: "component",
      accepts: ["@easyblocks/rich-text"],
      required: true
    },
    {
      prop: "Subheading",
      type: "component",
      accepts: ["@easyblocks/rich-text"],
    }
  ]
}
```

--------------------------------

### Implement SimpleBanner React Component

Source: https://docs.easyblocks.io/index

This snippet provides the React implementation for the 'SimpleBanner' component. It defines the necessary props for rendering the different parts of the banner and structures the JSX to display the title and buttons.

```jsx
import { ReactElement } from "react";
type SimpleBannerProps = {
  Root: ReactElement;
  Title: ReactElement;
  Wrapper: ReactElement;
  Buttons: ReactElement[];
  ButtonsWrapper: ReactElement;
};
export function SimpleBanner(props: SimpleBannerProps) {
  const { Root, Title, Wrapper, Buttons, ButtonsWrapper } = props;
  return (
    <Root.type {...Root.props}>
      <Wrapper.type {...Wrapper.props}>
        <Title.type {...Title.props} />
        <ButtonsWrapper.type {...ButtonsWrapper.props}>
          {Buttons.map((Button, index) => (
            <Button.type {...Button.props} key={index} />
          ))}
        </ButtonsWrapper.type>
      </Wrapper.type>
    </Root.type>
  );
}
```

--------------------------------

### Define Fetcher with onExternalDataChange

Source: https://docs.easyblocks.io/essentials/external-data

This snippet shows how to set up the `EasyblocksEditor` component with the `onExternalDataChange` prop to handle custom data fetching. It initializes state for external data and defines an asynchronous callback to process external references.

```typescript
import { ExternalData } from '@easyblocks/core';
// State variable for storing fetched external data during editing
const [externalDataValues, setExternalDataValues] = useState<ExternalData>(
  {}
);
<EasyblocksEditor
  config={easyblocksConfig}
  externalData={externalDataValues}
  onExternalDataChange={async externals => {
    // fetch external data
  }} 
  components={{ Product }}
  widgets={{ product: ProductPickerWidget }}
/>
```

--------------------------------

### Customizing Easyblocks Device Breakpoints

Source: https://docs.easyblocks.io/essentials/configuration

Allows reconfiguration of default devices and their visibility. You can control which device breakpoints are shown in the editor's device switch.

```typescript
import type { Config } from '@easyblocks/core';
const config: Config = {
  ...,
  devices: {
    sm: { hidden: false },
    lg: { hidden: false }
  }
};
```

--------------------------------

### Easyblocks Core Configuration

Source: https://docs.easyblocks.io/essentials/configuration

Defines the central configuration object for Easyblocks, required by the editor and rendering functions. It holds essential settings for the framework.

```typescript
importtype { Config } from"@easyblocks/core";
exportconsteasyblocksConfig:Config= {
/* config properties */
};
```

--------------------------------

### Implement Product Picker Widget

Source: https://docs.easyblocks.io/essentials/external-data

This JavaScript snippet implements a React widget component for selecting a product from a predefined list. It uses a select element and the WidgetComponentProps to manage the selected product ID.

```javascript
import { WidgetComponentProps } from "@easyblocks/core";
import { SimplePicker } from "@easyblocks/design-system";
const products = [
  {
    "id": "1",
    "title": "Product 1",
    "price": 25.0,
  },
  {
    "id": "2",
    "title": "Product 2",
    "price": 10.0,
  },
  {
    "id": "3",
    "title": "Product 3",
    "price": 50.0,
  },
  {
    "id": "4",
    "title": "Product 4",
    "price": 150.0,
  },
];
function ProductPickerWidget(props: WidgetComponentProps<string>) {
  return (
    <select
      value={props.id ?? ""}
      onChange={(event) => {
        props.onChange(event.target.value === "" ? null : event.target.value);
      }}
    >
      <option value={""}>Select a product</option>
      {products.map((p) => (
        <option value={p.id} key={p.id}>
          {p.title}
        </option>
      ))}
    </select>
  );
}
```

--------------------------------

### Text Type Configuration (Localizable String)

Source: https://docs.easyblocks.io/essentials/no-code-components/schema

Configures a localizable text property for a component, allowing different values for different locales, such as titles or descriptions. The UI provides a text input that handles localization. Values are stored in a locale-specific object.

```json
{
  "prop": "title",
  "type": "text",
  "label": "Title"
}
```

```json
{
  "title": {
    "en-US": "Hello world"
  }
}
```
Tokens:
Raw