@contentful/experience-builder NPM

@contentful/experience-builder

Experience builder SDK by Contentful.

Documentation

Please find more information about this sdk on our Wiki page

Installation

npm install @contentful/experience-builder

Example Component:

function MyButton({ buttonTitle, buttonUrl, ...props }) {
  // WARNING:
  //  - you must spread the props as last argument to enable canvas interactions and proper rendering on canvas
  //  - be sure to ensure that onClick handlers are above the {...props} spreading so that they are stubbed
  //    during EDITOR mode
  return (
    <button onClick={() => (window.location.href = buttonUrl)} {...props}>
      {buttonTitle}
    </button>
  );
}

Setup example

Please find more setup examples on a dedicated Wiki page

import {
  defineComponents,
  defineDesignTokens,
  ExperienceRoot,
  useFetchBySlug,
} from '@contentful/experience-builder';

import { createClient } from 'contentful';

// component example can be found at the top of this document
import { MyButton } from './components/MyButton';

const client = createClient({
  space: 'YOUR_SPACE_ID',
  environment: 'YOUR_ENVIRONMENT_ID',
  host: 'preview.contentful.com', // Supported values: 'preview.contentful.com' or 'cdn.contentful.com',
  accessToken: 'YOUR_PREVIEW_OR_DELIVERY_TOKEN', // needs to be preview token if host = 'preview.contentful.com' and delivery token if 'cdn.contentful.com'
});

// 1. Define components outside of React
defineComponents([
  {
    component: MyButton, // example component defined above in this file
    definition: {
      id: 'my-button',
      name: 'MyButton',
      variables: {
        buttonTitle: { type: 'Text', defaultValue: 'Click me' },
        buttonUrl: {
          type: 'Text',
          defaultValue: 'https://www.contentful.com/',
        },
      },
    },
  },
]);

// 2. Define design tokens (optional)
defineDesignTokens({
  spacing: { XS: '4px', S: '16px', M: '32px', L: '64px', XL: '128px' },
  color: { Slate: '#94a3b8', Azure: 'azure', Orange: '#fdba74' },
});

const Home = () => {

  // You could pull these values from your router, state, etc...
  const localeCode = 'en-US';  // the initial locale to use
  const slug = 'homePage'; // the slug of the experience to fetch
  const mode = 'delivery'; // 'delivery' or 'preview'
  const experienceTypeId = 'layout'; // the content id of the experience to fetch

  // 3. Fetch the experience
  const { experience, error, isLoading } = useFetchBySlug({
    client,
    slug,
    mode,
    experienceTypeId,
    localeCode,
  });

  // 4. Handle loading state
  if(isLoading) {
    return <div>Loading...</div>
  }

  // 5. Handle errors
  if (error) {
    return <div>{error.message}</div>;
  }

  // 6. Render the experience
  return (
    <ExperienceRoot
      experience={experience}
      // The locale that will appear on the website first
      locale={locale}
    />
  );
};

@contentful/experience-builder-components @contentful/experience-builder-core @contentful/experience-builder-visual-editor @contentful/rich-text-types classnames csstype immer lodash-es md5 style-inject vite-plugin-css-injected-by-js

@everything-registry/sub-chunk-196 @contentful/experience-builder-storybook-addon

4.0.0-dev-20240301T1141-36ee20e.0

2 months ago

4.0.0-dev-20240301T0825-2077838.0

2 months ago

4.0.0-alpha.32

2 months ago

4.0.0-dev-20240301T1651-639da6f.0

2 months ago

4.0.0-dev-20240301T1114-b49cb1f.0

2 months ago

4.0.0-dev-20240301T0858-5753a6b.0

2 months ago

4.0.0-dev-20240229T1641-ef2694d.0

2 months ago

4.0.0-alpha.31

2 months ago

4.0.0-dev-20240228T1915-9fe8e6d.0

2 months ago

4.0.0-alpha.30

2 months ago

4.0.0-dev-20240229T0008-acba895.0

2 months ago

4.0.0-dev-20240228T2336-09f08af.0

2 months ago

4.0.0-dev-20240227T201201.0

2 months ago

4.0.0-dev-20240228T1432-55d0dea.0

2 months ago

4.0.0-dev-20240228T133720.0

2 months ago

4.0.0-dev-20240228T1714-0405484.0

2 months ago

4.0.0-dev-20240228T072857.0

2 months ago

4.0.0-dev-20240227T224154.0

2 months ago

4.0.0-alpha.29

2 months ago

4.0.0-dev-20240226T110000.0

2 months ago

4.0.0-alpha.28

2 months ago

4.0.0-dev-20240223T164419.0

2 months ago

4.0.0-dev-20240224T024241.0

2 months ago

4.0.0-dev-20240222T140142.0

2 months ago

4.0.0-dev-20240221T130700.0

2 months ago

4.0.0-dev-20240221T125937.0

2 months ago

4.0.0-dev-20240221T122315.0

2 months ago

4.0.0-alpha.27

2 months ago

4.0.0-dev-20240220T094503.0

2 months ago

4.0.0-dev-20240219T074747.0

2 months ago

4.0.0-dev-20240219T080523.0

2 months ago

4.0.0-dev-20240219T040811.0

2 months ago

4.0.0-dev-20240219T080543.0

2 months ago

4.0.0-dev-20240219T080533.0

2 months ago

4.0.0-dev-20240216T153149.0

2 months ago

4.0.0-dev-20240216T194947.0

2 months ago

4.0.0-alpha.26

2 months ago

4.0.0-dev-20240215T204254.0

2 months ago

4.0.0-dev-20240215T180527.0

2 months ago

4.0.0-dev-20240215T075116.0

2 months ago

4.0.0-dev-20240216T095248.0

2 months ago

4.0.0-dev-20240215T094307.0

2 months ago

4.0.0-alpha.25

2 months ago

4.0.0-dev-20240214T140224.0

2 months ago

4.0.0-dev-20240214T014925.0

2 months ago

4.0.0-dev-20240214T222834.0

2 months ago

4.0.0-alpha.24

2 months ago

4.0.0-dev-20240213T222050.0

2 months ago

4.0.0-dev-20240213T142336.0

3 months ago

4.0.0-dev-20240213T162514.0

2 months ago

4.0.0-dev-20240212T163139.0

3 months ago

4.0.0-dev-20240212T074315.0

3 months ago

4.0.0-dev-20240212T074331.0

3 months ago

4.0.0-dev-20240209T144118.0

3 months ago

4.0.0-alpha.23

3 months ago

4.0.0-dev-20240209T142120.0

3 months ago

4.0.0-dev-20240207T210058.0

3 months ago

4.0.0-dev-20240208T120131.0

3 months ago

4.0.0-alpha.22

3 months ago

4.0.0-dev-20240207T142449.0

3 months ago

4.0.0-dev-20240207T165556.0

3 months ago

4.0.0-alpha.21

3 months ago

4.0.0-dev-20240207T101058.0

3 months ago

4.0.0-dev-20240207T133716.0

3 months ago

4.0.0-dev-20240207T165609.0

3 months ago

4.0.0-dev-20240207T004336.0

3 months ago

4.0.0-dev-20240206T141212.0

3 months ago

4.0.0-dev-20240206T155951.0

3 months ago

4.0.0-dev-20240206T163329.0

3 months ago

4.0.0-dev-20240206T222826.0

3 months ago

4.0.0-alpha.20

3 months ago

4.0.0-dev-20240205T162512.0

3 months ago

4.0.0-dev-20240205T100610.0

3 months ago

4.0.0-dev-20240202T175016.0

3 months ago

4.0.0-dev-20240201T171402.0

3 months ago

4.0.0-dev-20240201T200428.0

3 months ago

4.0.0-dev-20240201T223744.0

3 months ago

4.0.0-alpha.19

3 months ago

4.0.0-dev-20240201T171346.0

3 months ago

4.0.0-dev-20240202T175759.0

3 months ago

4.0.0-dev-20240201T171010.0

3 months ago

4.0.0-dev-20240131T150952.0

3 months ago

4.0.0-dev-20240131T163620.0

3 months ago

4.0.0-dev-20240130T141000.0

3 months ago

4.0.0-dev-20240130T142903.0

3 months ago

4.0.0-dev-20240130T142049.0

3 months ago

4.0.0-dev-20240130T141342.0

3 months ago

4.0.0-dev-20240130T111859.0

3 months ago

4.0.0-dev-20240130T170320.0

3 months ago

4.0.0-dev-20240130T142448.0

3 months ago

4.0.0-pre-20240129T160544.0

3 months ago

4.0.0-pre-20240130T130110.0

3 months ago

4.0.0-dev-20240130T141917.0

3 months ago

4.0.0-dev-20240130T142626.0

3 months ago

4.0.0-dev-20240130T142811.0

3 months ago

4.0.0-dev-20240130T143521.0

3 months ago

4.0.0-dev-20240130T141503.0

3 months ago

4.0.0-dev-20240130T142259.0

3 months ago

4.0.0-dev-20240130T142510.0

3 months ago

4.0.0-dev-20240130T141622.0

3 months ago

4.0.0-pre-20240130T160939.0

3 months ago

4.0.0-pre-20240126T200453.0

3 months ago

4.0.0-pre-20240126T174102.0

3 months ago

4.0.0-dev-20240126T165525.0

3 months ago

4.0.0-dev-20240125T171203.0

3 months ago

4.0.0-dev-20240125T172255.0

3 months ago

4.0.0-dev-20240124T083132.0

3 months ago

4.0.0-alpha.17

3 months ago

4.0.0-dev-20240125T171015.0

3 months ago

4.0.0-dev-20240124T164233.0

3 months ago

4.0.0-dev-20240125T182239.0

3 months ago

4.0.0-pre-20240125T155052.0

3 months ago

4.0.0-pre-20240125T111131.0

3 months ago

4.0.0-dev-20240124T212554.0

3 months ago

4.0.0-dev-20240125T170307.0

3 months ago

4.0.0-dev-20240126T162648.0

3 months ago

4.0.0-pre-20240124T202821.0

3 months ago

4.0.0-pre-20240124T090650.0

3 months ago

4.0.0-dev-20240123T155500.0

3 months ago

4.0.0-dev-20240123T181312.0

3 months ago

4.0.0-alpha.16

3 months ago

4.0.0-pre-20240123T134837.0

3 months ago

4.0.0-dev-20240123T185211.0

3 months ago

4.0.0-dev-20240122T162243.0

3 months ago

4.0.0-dev-20240122T122052.0

3 months ago

4.0.0-dev-20240122T175744.0

3 months ago

4.0.0-dev-20240119T155144.0

3 months ago

4.0.0-dev-20240119T160915.0

3 months ago

4.0.0-dev-20240118T083208.0

3 months ago

4.0.0-dev-20240117T144523.0

3 months ago

4.0.0-alpha.15

3 months ago

4.0.0-dev-20240117T171338.0

3 months ago

4.0.0-dev-20240117T162628.0

3 months ago

4.0.0-alpha.14

3 months ago

4.0.0-alpha.13

3 months ago

4.0.0-alpha.12

3 months ago

4.0.0-dev-20240115T110024.0

3 months ago

4.0.0-dev-20240116T085738.0

3 months ago

4.0.0-dev-20240114T223125.0

3 months ago

4.0.0-dev-20240112T232102.0

4 months ago

4.0.0-alpha.9

4 months ago

4.0.0-alpha.8

4 months ago

4.0.0-dev-20240111T161303.0

4 months ago

4.0.0-dev-20240111T161239.0

4 months ago

4.0.0-dev-20240111T170105.0

4 months ago

4.0.0-dev-20240111T170006.0

4 months ago

4.0.0-dev-20240111T183316.0

4 months ago

4.0.0-alpha.11

4 months ago

4.0.0-alpha.10

4 months ago

4.0.0-dev-20240111T183705.0

4 months ago

4.0.0-dev-20240111T153121.0

4 months ago

4.0.0-dev-20240112T011634.0

4 months ago

4.0.0-alpha.7

4 months ago

4.0.0-alpha.6

4 months ago

4.0.0-dev-20240110T185239.0

4 months ago

4.0.0-dev-20240110T190752.0

4 months ago

4.0.0-alpha.5

4 months ago

4.0.0-alpha.4

4 months ago

4.0.0-dev-20240109T183659.0

4 months ago

4.0.0-dev-20240109T204640.0

4 months ago

4.0.0-dev-20240109T175127.0

4 months ago

4.0.0-dev-20240109T193526.0

4 months ago

4.0.0-dev-20240109T225303.0

4 months ago

4.0.0-dev-20240109T202858.0

4 months ago

4.0.0-dev-20240109T182545.0

4 months ago

4.0.0-dev-20240109T201224.0

4 months ago

4.0.0-dev-20240108T234655.0

4 months ago

4.0.0-dev-20240108T200448.0

4 months ago

4.0.0-dev-20240108T154933.0

4 months ago

4.0.0-alpha.3

4 months ago

4.0.0-dev-20240108T210256.0

4 months ago

4.0.0-alpha.1

4 months ago

4.0.0-alpha.2

4 months ago

4.0.0-alpha.0

4 months ago

4.0.0-dev-20240108T201647.0

4 months ago

4.0.0-dev-20240108T214822.0

4 months ago

4.0.0-dev-20240108T180225.0

4 months ago

4.0.0-dev-20240108T164658.0

4 months ago

4.0.0-dev-20240108T175800.0

4 months ago

4.0.0-dev-20240108T171128.0

4 months ago

4.0.0-dev-20240108T223557.0

4 months ago

4.0.0-dev-20240108T185538.0

4 months ago

4.0.0-dev-20240108T195253.0

4 months ago

4.0.0-dev-20240105T191806.0

4 months ago

3.5.3-dev-20240105T183641.0

4 months ago

4.0.0-dev-20240105T191023.0

4 months ago

4.0.0-dev-20240105T190156.0

4 months ago

3.5.2

4 months ago

3.5.1

4 months ago

3.5.1-pre-20231221T224329.0

4 months ago

3.0.2-pre-20231221T214952.0

4 months ago

3.5.1-dev-20231221T233400.0

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

3.0.2-pre-20231218T182907.0

4 months ago

3.3.0

4 months ago

3.0.2-pre-20231216T233946.0

4 months ago

3.0.2-pre-20231217T135230.0

4 months ago

3.1.2

4 months ago

3.1.1

5 months ago

3.1.0

5 months ago

3.0.2-pre-20231214T205813.0

5 months ago

3.0.2-pre-20231214T201317.0

5 months ago

3.0.2-pre-20231214T204602.0

5 months ago

3.0.2-pre-20231214T203619.0

5 months ago

3.0.2-pre-20231214T100441.0

5 months ago

3.0.4

5 months ago

3.0.2-pre-20231214T100109.0

5 months ago

3.0.2-pre-20231214T100032.0

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago