Web

Studio SDK allows you to create a wide range of web projects, including but not limited to websites, landing pages, and other web-based applications.

React

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>' },
      ]
    },
    }
  }}
/>

JS

import createStudioEditor from '@grapesjs/studio-sdk';
import '@grapesjs/studio-sdk/style';

// ...
createStudioEditor({
  // ...
  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>' },
    ]
  },
  }
})

🍇 Demo