# 🍇 GrapesJS Studio SDK

![GrapesJS Studio SDK editor](https://grapesjs.com/docs/studio-banner.jpg)

**Studio SDK** is a developer toolkit that helps you embed **production-ready visual builders** into your applications faster than ever.

Built on top of the battle-tested GrapesJS, it’s designed for companies that want to focus on their **core product value** while delivering a world-class no-code editing experience for their users, without the hassle.

With Studio SDK, you can create:

- A [**Website/Landing page builder**](https://app.grapesjs.com/docs-sdk/project-types/web)
- A [**Newsletter/Email builder**](https://app.grapesjs.com/docs-sdk/project-types/email)
- A [**Document editor**](https://app.grapesjs.com/docs-sdk/project-types/document)
- A no-code editor with your **own React components** (via [React Renderer plugin](https://app.grapesjs.com/docs-sdk/plugins/custom-renderer/react)).

## 🚀 Why Studio SDK?

- ⚡ **Fast to production**: Save months of dev time with advanced built-in capabilities.

- 🧑‍💻 **Works with any frontend stack**: React, Vue, Angular, or plain JavaScript, no framework lock-in.

- 🔓 **No vendor lock-in**: All data and assets stay in your infrastructure.

- 🛠 **Embedded in your codebase**: No iframes or external SaaS platforms, Studio SDK lives inside your app with no third-party dependency risk.

- 🔌 **Leverage the GrapesJS ecosystem**: Studio SDK is built on top of GrapesJS, allowing you to use existing GrapesJS plugins and reuse custom components you already built.

- 🧑‍💻 **Built for developers**: A clean API surface that works with any modern JS stack.

## ✨ Features

- 🧱 **Custom Blocks & Components**

  Build reusable [Blocks](https://app.grapesjs.com/docs-sdk/configuration/blocks) or register your own [Components](https://app.grapesjs.com/docs-sdk/configuration/components/overview) for users to drag & drop.

- 📄 **Multi-Page Support**

  Create [multi-page websites](https://app.grapesjs.com/docs-sdk/configuration/pages) with [built-in SEO controls](https://app.grapesjs.com/docs-sdk/configuration/pages#settings) for meta, titles, and favicons.

- 🎨 **Themes & Layout API**

  Match the editor UI to your brand with [Themes](https://app.grapesjs.com/docs-sdk/configuration/themes) and [Layouts](https://app.grapesjs.com/docs-sdk/configuration/layout/overview) for **perfect white-label integration**.

- 🌐 **Global Styles**

  Apply [Global Styles](https://app.grapesjs.com/docs-sdk/configuration/global-styles) as a design system of your templates and manage typography, colors, and spacing at scale.

- 📂 **Enhanced Asset & Fonts Manager**

  Fully control the [Asset Manager](https://app.grapesjs.com/docs-sdk/configuration/assets/overview) and [Font Manager](https://app.grapesjs.com/docs-sdk/configuration/fonts), and extend them with custom [Asset Providers](https://app.grapesjs.com/docs-sdk/configuration/assets/asset-providers) for any storage or API.

- 🗂 **Template Manager**

  Let users pick from your pre-defined [Templates](https://app.grapesjs.com/docs-sdk/configuration/templates) to get started quickly.

- 🔌 **Data Sources & Template Engines**

  Connect the editor to your [Data Sources](https://app.grapesjs.com/docs-sdk/configuration/datasources/overview), integrate with any [Template Engine](https://app.grapesjs.com/docs-sdk/configuration/datasources/template-engines), and let users build dynamic, data-driven content.

## 📦 Installation

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

## 🏗 Quick Start

Here’s how easy it is to embed Studio SDK in your React application:

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

export function YourApp() {
  return (
    <StudioEditor
      options={{
        // ...
        // Any license key is valid from localhost, you can play with locally with no restrictions
        licenseKey: 'DEV_LICENSE_KEY',
        project: {
          type: 'web',
          // The default project to use for new projects
          default: { pages: [{ name: 'Home', component: '<h1>Home page</h1>' }] }
        }
      }}
    />
  );
}
```

You can use the same initialization pattern in other JavaScript frameworks.

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

// ...
createStudioEditor({
  // ...
  root: '#studio', // indicate where to mount the editor
  licenseKey: 'DEV_LICENSE_KEY',
  project: {
    type: 'web',
    default: { pages: [{ name: 'Home', component: '<h1>Home page</h1>' }] }
  }
});
```

You now have a fully functional no-code builder.

## 📖 Documentation

- 📘 [Overview of Studio SDK Configuration](https://app.grapesjs.com/docs-sdk/configuration/overview): Learn how to customize and configure Studio SDK for your use case.

- 🧑‍💻 [Examples](https://app.grapesjs.com/docs-sdk/examples/overview): Practical examples and recipes for common integrations.

- 🔌 [Official Plugins](https://app.grapesjs.com/docs-sdk/plugins/overview): Extend functionality with official Studio SDK plugins.

Check out the full docs here 👉 [**Studio SDK Docs**](https://app.grapesjs.com/docs-sdk)