### Basic Asset Provider Setup (React/JS)

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/sdk.md

Configures a basic Asset Provider using Lorem Picsum images. This example demonstrates how to define a provider with an ID, label, asset type, and an onLoad function to fetch assets. It's suitable for integrating image sources.

```javascript
import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    project: {
      default: {
        pages: [{ name: "Home", component: '<div><p>Double click the image below to open the AssetManager</p><img id="picture"/></div>' }],
      }
    },
    assets: {
      // Select by default the Lorem Picsum provider when the asset manager opens
      providerId: "picsum-pictures",
      providers: [{
        id: "picsum-pictures",
        label: "Lorem Picsum pictures",
        types: "image",
        onLoad: async (props) => {
          return Array(30)
            .fill(0)
            .map((v, i) => ({
              src: `https://picsum.photos/seed/${i + 1}/300/300.jpg`,
              name: `Image #${i + 1}`
            }));
        }
      }]
    }
  }}
/>


```

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

### Wistia Video Gallery Example

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Illustrates the setup for a Wistia video within a LightGallery, including the media source, poster image, and associated caption.

```html
<a data-src="https://private-sharing.wistia.com/medias/mwhrulrucj" data-poster="https://embed-ssl.wistia.com/deliveries/dfcb95bfd3e8cb39022e8d195e24931c2117ef05.webp?image_crop_resized=300x200" data-sub-html="Sample Wistia video">
    <h2>Wistia video</h2>
    <img width="200" src="https://embed-ssl.wistia.com/deliveries/dfcb95bfd3e8cb39022e8d195e24931c2117ef05.webp?image_crop_resized=224x126"/>
</a>
```

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

### Install Studio SDK

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/sdk.md

Installs the GrapesJS Studio SDK package using npm. This is the first step to integrate the SDK into your project.

```bash
npm i @grapesjs/studio-sdk
```

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

### Inline Styles Example

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/sdk.md

An example of how to apply inline styles to a component using a JavaScript object.

```javascript
{
  "color": "red",
  "fontSize": "14px"
}
```

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

### Install Studio SDK Plugins

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the necessary Studio SDK plugins package using npm.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### Install Studio SDK Plugins

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the Studio SDK plugins package using npm. This is the first step to using the YouTube Asset Provider.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### GrapesJS Templates Configuration

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/sdk.md

Enable users to select and start with pre-configured designs using the Template manager. Facilitates easy project setup with various design starting points.

```javascript
/*
  Configuration for GrapesJS Templates.
  Allows users to select and start with pre-configured designs via the Template manager.
  See: https://app.grapesjs.com/docs-sdk/configuration/templates
*/
const editor = grapesjs.init({
  // ... other configurations
  // Example: Load templates from a remote source
  // templates: [
  //   { label: 'Basic Template', content: '...' },
  //   { label: 'Advanced Template', content: '...' },
  // ],
  // ...
});
```

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

### Install Studio SDK Plugins

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the necessary Studio SDK plugins package using npm.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### Install GrapesJS Studio SDK Plugins

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Instructions for installing the GrapesJS Studio SDK plugins package using npm, pnpm, yarn, or CDN.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### Install Studio SDK Plugins

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the necessary Studio SDK plugins package using npm.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### Install Studio SDK Plugins

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the necessary Studio SDK plugins package using npm. This is the first step to using the Studio SDK plugins.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### Install Studio SDK Plugins

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the Studio SDK plugins package using npm. This is the first step to integrate the plugins into your project.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### Install Studio SDK Plugins

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the Studio SDK plugins package using npm. This is the first step to integrate the FsLightbox plugin into your project.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### Custom Templates Example

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/sdk.md

An example demonstrating a custom array of templates to be displayed in a panel, including template ID, name, and data with nested components and styles.

```javascript
templates: [{
  id: 'template1',
  name: 'Template 1',
  data: {
    pages: [
      {
        name: 'Home',
        component: '<h1 class="title">Template 1</h1><style>.title { color: red; font-size: 10rem; text-align: center }</style>'
      }
    ]
  }
}]
```

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

### Install GrapesJS Studio SDK Plugins

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the Studio SDK plugins package using npm. This is the first step to using the table plugin in your project.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### Install Studio SDK Plugins Package

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the necessary Studio SDK plugins package using npm. This is the first step to using the Google Fonts asset provider.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### GrapesJS Studio Component Styling Examples

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/sdk.md

Demonstrates adding components with inline styles, class-based styles, and controlling style property editability using GrapesJS Studio's API. This example showcases `style`, `styles`, `stylable`, and `unstylable` properties within component defaults.

```javascript
import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    plugins: [
      editor => {
        editor.Components.addType('component-style', {
          model: {
            defaults: {
              style: { color: 'red', padding: '20px' },
              components: 'Styles per component',
            }
          }
        });

        editor.Components.addType('component-style-class', {
          model: {
            defaults: {
              attributes: { class: 'component-style' },
              styles: '.component-style { color: green; padding: 20px }',
              components: 'Styles with class selector',
            }
          }
        });

        editor.Components.addType('component-only-color', {
          model: {
            defaults: {
              stylable: ['color'],
              style: { color: 'blue', padding: '20px' },
              components: 'Allow updating only the color change',
            }
          }
        });

        editor.Components.addType('component-skip-color', {
          model: {
            defaults: {
              unstylable: ['color'],
              style: { color: 'darkblue', padding: '20px' },
              components: 'Do not allow updating the color',
            }
          }
        });

        editor.onReady(() => {
          editor.getWrapper().append([
            { type: 'component-style' },
            { type: 'component-style-class' },
            { type: 'component-only-color' },
            { type: 'component-skip-color' },
          ]);
        });
      }
    ],
    project: {
      // Empty project for our demo purpose
      default: { pages: [{ name: 'Home' }] }
    },
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'canvasSidebarTop',
            sidebarTop: {
                leftContainer: { buttons: [] },
                rightContainer: {
                  buttons: ({ items }) => [{
                    ...items.find(item => item.id === 'showCode'),
                    variant: 'outline',
                    label: 'Show code'
                  }],
                },
            }
          },
          { type: 'panelSidebarTabs', style: { width: 300 } }
        ]
      }
    }
  }}
/>

```

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

### Install Studio SDK Plugins

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the necessary Studio SDK plugins package using npm. This is the first step to integrating the plugins into your project.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### Install Studio SDK Plugins

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the necessary Studio SDK plugins package using npm. This is the first step to integrate the flex component plugin into your project.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### Install Studio SDK Plugins Package

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the necessary package for Studio SDK plugins, including the LightGallery component.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### Install GrapesJS Studio SDK Plugins

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the necessary Studio SDK plugins package using npm. This is a prerequisite for using the EJS plugin.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### Install GrapesJS Studio SDK Plugins

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the necessary package for GrapesJS Studio SDK plugins via npm.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### Install Studio SDK Plugins

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the Studio SDK plugins package using npm. This is the first step to enable advanced features like custom empty states.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### Install Studio SDK Plugins

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the necessary Studio SDK plugins package using npm. This is the first step to using the accordion component in your project.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### Install Studio SDK Plugins

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the necessary Studio SDK plugins package using npm. This is the first step to integrate the SDK's features into your project.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### FsLightbox Integration Examples

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Demonstrates how to use the FsLightbox plugin to display different types of content, including images, videos, and custom elements within a GrapesJS project.

```html
<a data-fslightbox="image-group-1" href="https://placehold.co/500/777/white.png?text=Image+2+(Open)">
  <img src="https://placehold.co/200/777/white.png?text=Image+2">
</a>
<a data-fslightbox="image-group-1" href="https://placehold.co/500/777/white.png?text=Image+3+(Open)">
  <img src="https://placehold.co/200/777/white.png?text=Image+3">
</a>

<h1>Videos</h1>
<a data-fslightbox="videos" data-gjs-source-type="video" href="https://www.youtube.com/watch?v=kJyRVdnRwZA">
  <h2>YouTube video</h2>
  <img src="https://i.ytimg.com/vi/kJyRVdnRwZA/maxresdefault.jpg" style="height: 300px">
</a>
<a data-fslightbox="videos" data-gjs-source-type="video" href="https://videos.pexels.com/video-files/15462514/15462514-uhd_2560_1440_30fps.mp4">
  <h2>HTML video</h2>
  <img src="https://images.pexels.com/videos/15462514/pexels-photo-15462514.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=300">
</a>

<h1>Custom types</h1>
<a data-fslightbox="custom-types" href="#vimeo-video">Vimeo Video (iframe)</a>
<a data-fslightbox="custom-types" href="#google-maps">Google Maps</a>
<a data-fslightbox="custom-types" href="#custom-element">Custom element</a>
<div style="display: none">
    <iframe id="vimeo-video" data-gjs-type="default" src="https://player.vimeo.com/video/22439234" width="1200" height="600" frameBorder="0" allow="autoplay; fullscreen" allowFullScreen></iframe>
    <iframe id="google-maps" data-gjs-type="default" src="https://maps.google.com/maps?&amp;z=1&amp;t=q&amp;output=embed" frameborder="0" width="1200" height="600"></iframe>
    <div id="custom-element">
      <div class="custom-element">Custom content</div>
    </div>
</div>
```

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

### Iframe Gallery Examples (Website, Maps, PDF)

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Provides examples of using LightGallery to display content via iframes, including external websites, Google Maps embeds, and PDF documents.

```html
<a data-iframe="true" data-src="https://example.com/" data-sub-html="Website Caption">
    <img src="https://placehold.co/100/777/white.png?text=Website" />
</a>
<a data-iframe="true" data-src="https://www.google.com/maps/embed" data-sub-html="Google Maps Caption">
    <img src="https://placehold.co/100/777/white.png?text=Google+Maps" />
</a>
<a data-iframe="true" data-src="https://pdfobject.com/pdf/sample.pdf" data-sub-html="PDF Caption">
    <img src="https://placehold.co/100/777/white.png?text=PDF" />
</a>
```

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

### Install Studio SDK Plugins

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the necessary Studio SDK plugins package using npm. This is the first step to integrate GrapesJS Studio SDK with your React project.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### Vimeo Video Gallery Example

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Shows how to configure a gallery item for a Vimeo video, specifying the video source, poster image, and descriptive subtitle.

```html
<a data-src="https://vimeo.com/112836958" data-poster="https://i.vimeocdn.com/video/506427660-2e93a42675715090a52de8e6645d592c5f58c1a7e388231d801072c9b2d9843d-d?mw=2880&q=70" data-sub-html="Nature">
    <h2>Vimeo video</h2>
    <img width="200" src="https://i.vimeocdn.com/video/506427660-2e93a42675715090a52de8e6645d592c5f58c1a7e388231d801072c9b2d9843d-d?mw=300"/>
</a>
```

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

### Install Studio SDK Plugins Package

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the necessary Studio SDK plugins package using npm, pnpm, or yarn. This is the first step to using the Swiper component plugin.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### GrapesJS Studio Context Menu Configuration

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/sdk.md

Example of configuring the context menu globally and for specific components (Heading and Image) in GrapesJS Studio using React.

```javascript
import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    project: {
      default: {
        pages: [
          {
            name: 'Home',
            component: `
              <div style="padding: 20px; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column;">
                <h1 style="font-size: 3rem">Heading component</h1>
                <div style="margin: 20px 0; font-size: 2rem">Text component</div>
                <img src="https://picsum.photos/seed/image1/300/300"/>
              <div>
            `
          }
        ]
      }
    },
    plugins: [
      editor => {
        // Update context menu for the Heading components
        editor.Components.addType('heading', {
          model: {
            defaults: {
              contextMenu: ({ items, component }) => [
                ...items, // default component items
                {
                  id: 'headingHTML',
                  label: 'Heading HTML',
                  icon: '<svg viewBox="0 0 24 24"><path d="m14.6 16.6 4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4m-5.2 0L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4Z"/></svg>',
                  onClick: () => alert('Heading HTML: ' + component.toHTML())
                }
              ]
            }
          }
        });
        // Update context menu for the Image components
        editor.Components.addType('image', {
          model: {
            defaults: {
              contextMenu: ({ component }) => [
                // skipping default items
                {
                  id: 'imageItems',
                  label: 'Image items',
                  icon: 'image',
                  items: [
                    { id: 'i1', label: 'Item 1', icon: 'check' },
                    { id: 'i2', label: 'Item 2', onClick: () => alert('Item 2') },
                    {
                      id: 'i3',
                      label: 'Item 3',
                      items: [
                        {
                          id: 'i3-1',
                          label: 'Replace image',
                          icon: 'refresh',
                          onClick: () =>
                            component.set({ src: `https://picsum.photos/seed/${Math.random()}/300/300` })
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          }
        });
      }
    ],
    components: {
      contextMenu: ({ items, component, type, source }) => {
        return [
          {
            id: 'globalBefore',
            label: 'Global: Disabled',
            disabled: true
          },
          // default items that you can 'map' and filter'
          ...items,
          {
            id: 'globalAfter',
            label: 'Global: Info',
            onClick: () => alert(`Type: ${type} 
Source: ${source} 
HTML: ${component.toHTML()}`)
          }
        ];
      }
    },
  }}
/>

```

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

### Basic Swiper Configuration

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Demonstrates a basic Swiper setup with slides per view and spacing. This is a foundational example for creating carousel components.

```html
<div class="swiper" style="height: 200px" data-gjs-space-between="30" data-gjs-slides-per-view="2">
  <div class="swiper-wrapper">
    <div class="swiper-slide swiper-slide-bg">Slide 1</div>
    <div class="swiper-slide swiper-slide-bg">Slide 2</div>
    <div class="swiper-slide swiper-slide-bg">Slide 3</div>
    <div class="swiper-slide swiper-slide-bg">Slide 4</div>
    <div class="swiper-slide swiper-slide-bg">Slide 5</div>
    <div class="swiper-slide swiper-slide-bg">Slide 6</div>
  </div>
  <div class="swiper-pagination"></div>
</div>
```

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

### GrapesJS Studio Toolbar Configuration Example

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/sdk.md

Demonstrates how to configure the GrapesJS Studio toolbar globally and for specific components (heading and image) using React and JavaScript. Includes adding custom commands for updating component content, copying HTML, and fetching images.

```javascript
import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    project: {
      default: {
        pages: [
          {
            name: 'Home',
            component: `
              <div style="padding: 20px; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column;">
                <h1 style="font-size: 3rem">Heading component</h1>
                <div style="margin: 20px 0; font-size: 2rem">Text component</div>
                <img src="https://picsum.photos/seed/image1/300/300"/>
              <div>
            `
          }
        ]
      }
    },
    plugins: [
      editor => {
        // Update toolbar for the Heading components
        editor.Components.addType('heading', {
          model: {
            defaults: {
              toolbarItems: ({ items, component }) => [
                ...items, // default component items
                {
                  id: 'component-update',
                  label:
                    '<svg viewBox="0 0 24 24"><path d="M21,10.12H14.22L16.96,7.3C14.23,4.6 9.81,4.5 7.08,7.2C4.35,9.91 4.35,14.28 7.08,17C9.81,19.7 14.23,19.7 16.96,17C18.32,15.65 19,14.08 19,12.1H21C21,14.08 20.12,16.65 18.36,18.39C14.85,21.87 9.15,21.87 5.64,18.39C2.14,14.92 2.11,9.28 5.62,5.81C9.13,2.34 14.76,2.34 18.27,5.81L21,3V10.12M12.5,8V12.25L16,14.33L15.28,15.54L11,13V8H12.5Z" /></svg>',
                  command: () => {
                    component.components('Updated heading: ' + new Date().toLocaleTimeString());
                  }
                }
              ]
            }
          }
        });
        // Update toolbar for the Image components
        editor.Components.addType('image', {
          model: {
            defaults: {
              toolbarItems: ({ component }) => [
                // skipping default items
                {
                  id: 'component-copy-html',
                  label:
                    '<svg viewBox="0 0 24 24"><path d="M12.89,3L14.85,3.4L11.11,21L9.15,20.6L12.89,3M19.59,12L16,8.41V5.58L22.42,12L16,18.41V15.58L19.59,12M1.58,12L8,5.58V8.41L4.41,12L8,15.58V18.41L1.58,12Z" /></svg>',
                  command: () => {
                    navigator.clipboard.writeText(component.toHTML());
                    alert('Image HTML copied to clipboard');
                  }
                },
                {
                  id: 'component-fetch-image',
                  label:
                    '<svg viewBox="0 0 24 24"><path d="M8.5 13.5L5 18H13.03C13.11 19.1 13.47 20.12 14.03 21H5C3.9 21 3 20.11 3 19V5C3 3.9 3.9 3 5 3H19C20.1 3 21 3.89 21 5V11.18C20.5 11.07 20 11 19.5 11C17.78 11 16.23 11.67 15.07 12.76L14.5 12L11 16.5L8.5 13.5M19 20C17.62 20 16.5 18.88 16.5 17.5C16.5 17.1 16.59 16.72 16.76 16.38L15.67 15.29C15.25 15.92 15 16.68 15 17.5C15 19.71 16.79 21.5 19 21.5V23L21.25 20.75L19 18.5V20M19 13.5V12L16.75 14.25L19 16.5V15C20.38 15 21.5 16.12 21.5 17.5C21.5 17.9 21.41 18.28 21.24 18.62L22.33 19.71C22.75 19.08 23 18.32 23 17.5C23 15.29 21.21 13.5 19 13.5Z" /></svg>',
                  command: async () => {
                    await fetch('https://picsum.photos/200').then(async ({ url }) => {
                      component.setAttributes({ src: url });
                    });
                  }
                }
              ]
            }
          }
        });
      }
    ],
    components: {
      toolbar: ({ items, component }) => {
        return [
          {
            id: 'global-preview',
            label:
              '<svg viewBox="0 0 24 24"><path d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" /></svg>',
            command: 'core:preview'
          },
          // default items that you can 'map' and filter'
          ...items,
          {
            id: 'global-info',
            label:
              '<svg viewBox="0 0 24 24"><path d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>',
            command: () => {

```

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

### PanelPageSettings Usage in React

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/sdk.md

Demonstrates how to integrate the PanelPageSettings component within a React application using the GrapesJS Studio SDK. This example shows the basic setup of the StudioEditor with project and layout configurations, including the placement of the PanelPageSettings component.

```jsx
import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    project: {
      default: {
        pages: [{ name: 'Home', component: '<h1>Home page</h1>'}]
      }
    },
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'column',
            style: { width: 300 },
            children: { type: 'panelPageSettings' }
          },
          { type: 'canvas' }
        ]
      },
    }
  }}
/>
```

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

### Initialize Global Styles in GrapesJS Studio

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/sdk.md

Demonstrates how to initialize GrapesJS Studio with global styles enabled. This example shows setting up styles for 'h1' elements, including color and font size, and how to trigger the global style panel on editor readiness.

```react
import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    plugins: [
      editor =>
        editor.onReady(() => {
          // let's show the global style panel on start
          editor.runCommand('studio:layoutToggle', {
            id: 'gs',
            layout: 'panelGlobalStyles',
            header: { label: 'Global Styles' },
            placer: { type: 'absolute', position: 'right' }
          });
        })
    ],
    project: {
      default: {
        pages: [
          { name: 'Home', component: '<h1>Home page</h1>'},
          { name: 'About', component: '<h1>About page</h1>'},
        ]
      }
    },
    globalStyles: {
      default: [
        {
          id: 'h1Color',
          property: 'color',
          field: 'color',
          defaultValue: 'red',
          selector: 'h1',
          label: 'H1 color'
        },
        {
          id: 'h1Size',
          property: 'font-size',
          field: { type: 'number', min: 0.1, max: 10, step: 0.1, units: ['rem'] },
          defaultValue: '2rem',
          selector: 'h1',
          label: 'H1 size'
        }
      ]
    }
  }}
/>

```

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

### Initialize Web Project with Default Pages

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/sdk.md

Demonstrates how to initialize a GrapesJS Studio SDK project of type 'web' and define default pages with their content. This setup is suitable for multi-page web applications.

```javascript
import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    project: {
      type: 'web',
      // The default project to use for new projects
      default: {
        pages: [
          { name: 'Home', component: '<h1>Home page</h1>' },
          { name: 'About', component: '<h1>About page</h1>' },
          { name: 'Contact', component: '<h1>Contact page</h1>' },
        ]
      },
    }
  }}
/>


```

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

### Setup Web Project with Studio SDK

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/sdk.md

Integrates the Studio SDK into a web project, specifically for building web pages. It demonstrates how to use the StudioEditor component with options for project type and default pages.

```jsx
import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    project: {
      type: 'web',
      // The default project to use for new projects
      default: {
        pages: [
          { name: 'Home', component: '<h1>Home page</h1>' },
          { name: 'About', component: '<h1>About page</h1>' },
          { name: 'Contact', component: '<h1>Contact page</h1>' },
        ]
      },
    }
  }}
/>
```

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

### Install Studio SDK Plugins

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/plugins.md

Installs the necessary Studio SDK plugins package using npm. This package includes the TinyMCE RTE plugin.

```bash
npm i @grapesjs/studio-sdk-plugins
```

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

### Studio Editor Initialization and Command Usage

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/sdk.md

Demonstrates how to initialize the StudioEditor component in a React application and use commands to toggle page settings and add pages. It includes event handlers like onReady and functions to interact with editor commands.

```javascript
import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
const onReady = (editor) => {
  // store the editor in your state manager
};

const toggleAddPage = () => {
  const config = editor.runCommand(StudioCommands.getPagesConfig) || {};
  editor.runCommand(StudioCommands.setPagesConfig, {
    config: { add: !config.add }
  });
}
const togglePageSettings = () => {
  const state = editor.runCommand(StudioCommands.getPageSettings) || {};
  editor.runCommand(StudioCommands.setPageSettings, { isOpen: !state.isOpen });
}

// ...
<StudioEditor
  options={{
    onReady,
  }}
/>
```

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

### GrapesJS Studio SDK Data Sources Initialization (React)

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/sdk.md

Demonstrates how to initialize the GrapesJS Studio SDK with Data Sources enabled. This includes enabling Data Source blocks, providing global data, and setting up a project with data-bound components like variables, conditions, and collections.

```javascript
import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    dataSources: {
      blocks: true, // This enables the Data Source specific blocks
      globalData: { // Provide default globalData for the project
        user: { firstName: 'Alice', isCustomer: true },
        products: [
          { name: 'Laptop Pro X15', price: 1200.0 },
          { name: 'Wireless Mouse M2', price: 25.99 }
        ]
      },
    },
    project: {
      default: {
        pages: [
          {
            name: 'Data Sources demo',
            component: `
              <h1>Variable</h1>
              <data-variable data-gjs-data-resolver='{"path": "globalData.user.data.firstName", "defaultValue": "Guest"}'></data-variable>

              <h1>Condition</h1>
              <div> Hey,
                <data-condition data-gjs-data-resolver='{"condition": {"logicalOperator": "and", "statements": [{"left": { "type":"data-variable", "path":"globalData.user.data.isCustomer" }, "operator": "equals", "right": true}] }}'>
                  <data-condition-true-content>welcome back, valued customer!</data-condition-true-content>
                  <data-condition-false-content>please register to see more!</data-condition-false-content>
                </data-condition>
              </div>

              <h1>Collection</h1>
              <ul data-gjs-type="data-collection"
                data-gjs-data-resolver='{"collectionId": "myCollectionId", "dataSource": {"type":"data-variable", "path":"globalData.products.data" } }'
              >
                <li data-gjs-type="data-collection-item">
                  <b>Product Name</b>: <data-variable data-gjs-data-resolver='{"collectionId": "myCollectionId", "variableType": "currentItem", "path": "name" }'></data-variable>
                  - <b>Price</b>: <data-variable data-gjs-data-resolver='{"collectionId": "myCollectionId", "variableType": "currentItem", "path": "price" }'></data-variable>
                </li>
              </ul>
            `
          },
        ]

    },
    },
    // Custom editor layout for demo purpose
    layout: {
      default: {
        type: 'row',
        style: { height: '100%' },
        children: [
          {
            type: 'panelBlocks',
            header: { label: 'Blocks', collapsible: false, style: { width: '300px' } },
            symbols: false,
          },
          { type: 'canvas' }
        ]
      }
    },
  }}
/>

```

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

### Row Layout Component Example

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/sdk.md

Demonstrates how to use the Row layout component within the GrapesJS Studio SDK to arrange child components horizontally. It shows customization options like className and style, and includes examples of nesting different component types.

```javascript
import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

// ...
<StudioEditor
  options={{
    // ...
    layout: {
      default: {
        type: 'column',
        style: { height: '100%' },
        children: [
          {
            type: 'row',
            className: 'custom-classname-row',
            style: { color: 'white', padding: 3, height: 30, gap: 10 },
            children: [
              { type: 'text', style: { backgroundColor: 'green' }, content: 'Text 1' },
              { type: 'text', style: { backgroundColor: 'green' }, content: 'Text 2' },
              'Text 3'
            ]
          },
          { type: 'canvas' },
          { type: 'row', children: 'Footer text' }
        ]
      },
    }
  }}
/>


```

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

### Asset Provider onLoad Function Examples

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/sdk.md

Defines how to fetch assets. Supports returning an array of assets, or an array of Page objects for endless scrolling using pageIndex for offset-based or token-based pagination.

```javascript
async () => {
  // Simple asset array
  return [
    { src: 'https://www.example.com/items/1' },
    { src: 'https://www.example.com/items/2' },
    { src: 'https://www.example.com/items/3' }
  ]
}
```

```javascript
async ({ pageIndex }) => {
  // Offset based pagination
  const pageSize = 20;
  const params = new URLSearchParams({ page: pageIndex, pageSize })
  const response = await fetch(`https://www.example.com/items?${params}`)
  const page = await response.json()
  const itemCount = pageSize * pageIndex + page.items.length
  return {
    items: page.items,
    isLastPage: itemCount >= page.total
  }
}
```

```javascript
async ({ pageCustomData }) => {
  // Token based pagination.
  const params = new URLSearchParams({ pageToken: pageCustomData?.token })
  const response = await fetch(`https://www.example.com/items?${params}`)
  const page = await response.json()
  return {
    items: page.items,
    nextPageCustomData: { token: page.nextPageToken },
    isLastPage: !page.nextPageToken
  }
}
```

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

### Project Files Command Options

Source: https://github.com/sidb03/grapesjs-studio-docs/blob/main/sdk.md

Configuration options for the `studio:projectFiles` command. These options control how project files, including pages, assets, and styles, are exported.

```APIDOC
studio:projectFiles command options:

page:
  Type: Page
  Description: Export specific page. By default, all pages are exported.

assetsFolder:
  Type: string
  Description: If the HTML contains base64 images, they will be exported as separate files and placed in the specified folder name.
  Default: assets

filenameCss:
  Type: string
  Description: Filename for CSS file.
  Default: style.css

styles:
  Type: string
  Description: Indicate how to export styles. By default, styles are exported in a separate CSS file.

skipProject:
  Type: boolean
  Description: Skip project file (project JSON).
  Default: false

exportConfig:
  Description: Configuration options for exporting data resolvers.
  Default: undefined

optionsHtml:
  Description: Options for HTML export.
```