@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}
    />
  );
};

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

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

4.0.0-dev-20240301T1141-36ee20e.0

1 year ago

4.0.0-dev-20240301T0825-2077838.0

1 year ago

4.0.0-alpha.32

1 year ago

4.0.0-dev-20240301T1651-639da6f.0

1 year ago

4.0.0-dev-20240301T1114-b49cb1f.0

1 year ago

4.0.0-dev-20240301T0858-5753a6b.0

1 year ago

4.0.0-dev-20240229T1641-ef2694d.0

1 year ago

4.0.0-alpha.31

1 year ago

4.0.0-dev-20240228T1915-9fe8e6d.0

1 year ago

4.0.0-alpha.30

1 year ago

4.0.0-dev-20240229T0008-acba895.0

1 year ago

4.0.0-dev-20240228T2336-09f08af.0

1 year ago

4.0.0-dev-20240227T201201.0

1 year ago

4.0.0-dev-20240228T1432-55d0dea.0

1 year ago

4.0.0-dev-20240228T133720.0

1 year ago

4.0.0-dev-20240228T1714-0405484.0

1 year ago

4.0.0-dev-20240228T072857.0

1 year ago

4.0.0-dev-20240227T224154.0

1 year ago

4.0.0-alpha.29

1 year ago

4.0.0-dev-20240226T110000.0

1 year ago

4.0.0-alpha.28

1 year ago

4.0.0-dev-20240223T164419.0

1 year ago

4.0.0-dev-20240224T024241.0

1 year ago

4.0.0-dev-20240222T140142.0

1 year ago

4.0.0-dev-20240221T130700.0

1 year ago

4.0.0-dev-20240221T125937.0

1 year ago

4.0.0-dev-20240221T122315.0

1 year ago

4.0.0-alpha.27

1 year ago

4.0.0-dev-20240220T094503.0

1 year ago

4.0.0-dev-20240219T074747.0

1 year ago

4.0.0-dev-20240219T080523.0

1 year ago

4.0.0-dev-20240219T040811.0

1 year ago

4.0.0-dev-20240219T080543.0

1 year ago

4.0.0-dev-20240219T080533.0

1 year ago

4.0.0-dev-20240216T153149.0

1 year ago

4.0.0-dev-20240216T194947.0

1 year ago

4.0.0-alpha.26

1 year ago

4.0.0-dev-20240215T204254.0

1 year ago

4.0.0-dev-20240215T180527.0

1 year ago

4.0.0-dev-20240215T075116.0

1 year ago

4.0.0-dev-20240216T095248.0

1 year ago

4.0.0-dev-20240215T094307.0

1 year ago

4.0.0-alpha.25

1 year ago

4.0.0-dev-20240214T140224.0

1 year ago

4.0.0-dev-20240214T014925.0

1 year ago

4.0.0-dev-20240214T222834.0

1 year ago

4.0.0-alpha.24

1 year ago

4.0.0-dev-20240213T222050.0

1 year ago

4.0.0-dev-20240213T142336.0

1 year ago

4.0.0-dev-20240213T162514.0

1 year ago

4.0.0-dev-20240212T163139.0

1 year ago

4.0.0-dev-20240212T074315.0

1 year ago

4.0.0-dev-20240212T074331.0

1 year ago

4.0.0-dev-20240209T144118.0

1 year ago

4.0.0-alpha.23

1 year ago

4.0.0-dev-20240209T142120.0

1 year ago

4.0.0-dev-20240207T210058.0

1 year ago

4.0.0-dev-20240208T120131.0

1 year ago

4.0.0-alpha.22

1 year ago

4.0.0-dev-20240207T142449.0

1 year ago

4.0.0-dev-20240207T165556.0

1 year ago

4.0.0-alpha.21

1 year ago

4.0.0-dev-20240207T101058.0

1 year ago

4.0.0-dev-20240207T133716.0

1 year ago

4.0.0-dev-20240207T165609.0

1 year ago

4.0.0-dev-20240207T004336.0

1 year ago

4.0.0-dev-20240206T141212.0

1 year ago

4.0.0-dev-20240206T155951.0

1 year ago

4.0.0-dev-20240206T163329.0

1 year ago

4.0.0-dev-20240206T222826.0

1 year ago

4.0.0-alpha.20

1 year ago

4.0.0-dev-20240205T162512.0

1 year ago

4.0.0-dev-20240205T100610.0

1 year ago

4.0.0-dev-20240202T175016.0

1 year ago

4.0.0-dev-20240201T171402.0

1 year ago

4.0.0-dev-20240201T200428.0

1 year ago

4.0.0-dev-20240201T223744.0

1 year ago

4.0.0-alpha.19

1 year ago

4.0.0-dev-20240201T171346.0

1 year ago

4.0.0-dev-20240202T175759.0

1 year ago

4.0.0-dev-20240201T171010.0

1 year ago

4.0.0-dev-20240131T150952.0

1 year ago

4.0.0-dev-20240131T163620.0

1 year ago

4.0.0-dev-20240130T141000.0

1 year ago

4.0.0-dev-20240130T142903.0

1 year ago

4.0.0-dev-20240130T142049.0

1 year ago

4.0.0-dev-20240130T141342.0

1 year ago

4.0.0-dev-20240130T111859.0

1 year ago

4.0.0-dev-20240130T170320.0

1 year ago

4.0.0-dev-20240130T142448.0

1 year ago

4.0.0-pre-20240129T160544.0

1 year ago

4.0.0-pre-20240130T130110.0

1 year ago

4.0.0-dev-20240130T141917.0

1 year ago

4.0.0-dev-20240130T142626.0

1 year ago

4.0.0-dev-20240130T142811.0

1 year ago

4.0.0-dev-20240130T143521.0

1 year ago

4.0.0-dev-20240130T141503.0

1 year ago

4.0.0-dev-20240130T142259.0

1 year ago

4.0.0-dev-20240130T142510.0

1 year ago

4.0.0-dev-20240130T141622.0

1 year ago

4.0.0-pre-20240130T160939.0

1 year ago

4.0.0-pre-20240126T200453.0

1 year ago

4.0.0-pre-20240126T174102.0

1 year ago

4.0.0-dev-20240126T165525.0

1 year ago

4.0.0-dev-20240125T171203.0

1 year ago

4.0.0-dev-20240125T172255.0

1 year ago

4.0.0-dev-20240124T083132.0

1 year ago

4.0.0-alpha.17

1 year ago

4.0.0-dev-20240125T171015.0

1 year ago

4.0.0-dev-20240124T164233.0

1 year ago

4.0.0-dev-20240125T182239.0

1 year ago

4.0.0-pre-20240125T155052.0

1 year ago

4.0.0-pre-20240125T111131.0

1 year ago

4.0.0-dev-20240124T212554.0

1 year ago

4.0.0-dev-20240125T170307.0

1 year ago

4.0.0-dev-20240126T162648.0

1 year ago

4.0.0-pre-20240124T202821.0

1 year ago

4.0.0-pre-20240124T090650.0

1 year ago

4.0.0-dev-20240123T155500.0

1 year ago

4.0.0-dev-20240123T181312.0

1 year ago

4.0.0-alpha.16

1 year ago

4.0.0-pre-20240123T134837.0

1 year ago

4.0.0-dev-20240123T185211.0

1 year ago

4.0.0-dev-20240122T162243.0

1 year ago

4.0.0-dev-20240122T122052.0

1 year ago

4.0.0-dev-20240122T175744.0

1 year ago

4.0.0-dev-20240119T155144.0

1 year ago

4.0.0-dev-20240119T160915.0

1 year ago

4.0.0-dev-20240118T083208.0

1 year ago

4.0.0-dev-20240117T144523.0

1 year ago

4.0.0-alpha.15

1 year ago

4.0.0-dev-20240117T171338.0

1 year ago

4.0.0-dev-20240117T162628.0

1 year ago

4.0.0-alpha.14

1 year ago

4.0.0-alpha.13

1 year ago

4.0.0-alpha.12

1 year ago

4.0.0-dev-20240115T110024.0

1 year ago

4.0.0-dev-20240116T085738.0

1 year ago

4.0.0-dev-20240114T223125.0

1 year ago

4.0.0-dev-20240112T232102.0

1 year ago

4.0.0-alpha.9

1 year ago

4.0.0-alpha.8

1 year ago

4.0.0-dev-20240111T161303.0

1 year ago

4.0.0-dev-20240111T161239.0

1 year ago

4.0.0-dev-20240111T170105.0

1 year ago

4.0.0-dev-20240111T170006.0

1 year ago

4.0.0-dev-20240111T183316.0

1 year ago

4.0.0-alpha.11

1 year ago

4.0.0-alpha.10

1 year ago

4.0.0-dev-20240111T183705.0

1 year ago

4.0.0-dev-20240111T153121.0

1 year ago

4.0.0-dev-20240112T011634.0

1 year ago

4.0.0-alpha.7

1 year ago

4.0.0-alpha.6

1 year ago

4.0.0-dev-20240110T185239.0

1 year ago

4.0.0-dev-20240110T190752.0

1 year ago

4.0.0-alpha.5

1 year ago

4.0.0-alpha.4

1 year ago

4.0.0-dev-20240109T183659.0

1 year ago

4.0.0-dev-20240109T204640.0

1 year ago

4.0.0-dev-20240109T175127.0

1 year ago

4.0.0-dev-20240109T193526.0

1 year ago

4.0.0-dev-20240109T225303.0

1 year ago

4.0.0-dev-20240109T202858.0

1 year ago

4.0.0-dev-20240109T182545.0

1 year ago

4.0.0-dev-20240109T201224.0

1 year ago

4.0.0-dev-20240108T234655.0

1 year ago

4.0.0-dev-20240108T200448.0

1 year ago

4.0.0-dev-20240108T154933.0

1 year ago

4.0.0-alpha.3

1 year ago

4.0.0-dev-20240108T210256.0

1 year ago

4.0.0-alpha.1

1 year ago

4.0.0-alpha.2

1 year ago

4.0.0-alpha.0

1 year ago

4.0.0-dev-20240108T201647.0

1 year ago

4.0.0-dev-20240108T214822.0

1 year ago

4.0.0-dev-20240108T180225.0

1 year ago

4.0.0-dev-20240108T164658.0

1 year ago

4.0.0-dev-20240108T175800.0

1 year ago

4.0.0-dev-20240108T171128.0

1 year ago

4.0.0-dev-20240108T223557.0

1 year ago

4.0.0-dev-20240108T185538.0

1 year ago

4.0.0-dev-20240108T195253.0

1 year ago

4.0.0-dev-20240105T191806.0

1 year ago

3.5.3-dev-20240105T183641.0

1 year ago

4.0.0-dev-20240105T191023.0

1 year ago

4.0.0-dev-20240105T190156.0

1 year ago

3.5.2

1 year ago

3.5.1

1 year ago

3.5.1-pre-20231221T224329.0

1 year ago

3.0.2-pre-20231221T214952.0

1 year ago

3.5.1-dev-20231221T233400.0

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3.0.2-pre-20231218T182907.0

2 years ago

3.3.0

2 years ago

3.0.2-pre-20231216T233946.0

2 years ago

3.0.2-pre-20231217T135230.0

2 years ago

3.1.2

2 years ago

3.1.1

2 years ago

3.1.0

2 years ago

3.0.2-pre-20231214T205813.0

2 years ago

3.0.2-pre-20231214T201317.0

2 years ago

3.0.2-pre-20231214T204602.0

2 years ago

3.0.2-pre-20231214T203619.0

2 years ago

3.0.2-pre-20231214T100441.0

2 years ago

3.0.4

2 years ago

3.0.2-pre-20231214T100109.0

2 years ago

3.0.2-pre-20231214T100032.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago