---
url: https://plugin.stripo.email/extensions/getting-started.md
---
# Getting Started
## Installation
### Prerequisites
Before you begin, ensure you have:
* **Node.js v22.x or higher** installed on your system
* **npm or yarn** package manager
* **A text editor** (VS Code recommended for the best development experience)
* **Basic JavaScript knowledge** and familiarity with modern web development
### Step 1: Set Up Your Project
Create a new directory for your extension project and initialize it:
```bash
mkdir extension-starter
cd extension-starter
npm init -y
```
**Expected result:** A new `package.json` file will be created in your directory.
### Step 2: Install the Extensions SDK
Install the Stripo Editor Extensions SDK:
```bash
npm install @stripoinc/ui-editor-extensions
```
For development, you will also need a bundler. We recommend using Vite:
```bash
npm install --save-dev vite
```
**Expected result:** The packages will be installed in the `node_modules` directory and listed in your `package.json` dependencies.
### Step 3: Create Your Project Structure
Create the following file structure:
```bash
extension-starter/
├── index.html
├── src/
│ ├── creds.js
│ ├── index.js
│ └── extension.js
├── package.json
└── vite.config.js
```
Create each file with the following content:
#### Create `index.html`:
```html
Stripo Plugin
Stripo Plugin
⚠️ Please be advised: The header shown above is not part of the plugin. It is intended solely for demonstration purposes and can be implemented independently in any desired way.
Please set PLUGIN_ID and SECRET_KEY to run the editor
```
#### Create `vite.config.js`:
```javascript
import { defineConfig } from 'vite';
export default defineConfig({
server: {
port: 3000
}
});
```
#### Create `src/creds.js`:
:::warning Important
Replace the placeholder values `YOUR_PLUGIN_ID` and `YOUR_SECRET_KEY` with your actual plugin credentials.
:::
```javascript
export const PLUGIN_ID = 'YOUR_PLUGIN_ID';
export const SECRET_KEY = 'YOUR_SECRET_KEY';
export const EDITOR_URL = 'https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js';
export const USER_ID = '1';
export const EMAIL_ID = `${PLUGIN_ID}_${USER_ID}_1`;
```
### Step 4: Create Your First Extension
#### Create `src/extension.js`:
```javascript
import { ExtensionBuilder } from '@stripoinc/ui-editor-extensions';
// Create your first extension
const extension = new ExtensionBuilder()
// Add custom styles to change the blocks panel background
.addStyles(`
.block-thumb {
background-color: #33CC4D
}
`)
.build();
export default extension;
```
**What's happening here:**
* We import the [ExtensionBuilder](/extensions/reference/core/ExtensionBuilder) from the SDK
* We create an extension using the builder pattern for clean, readable code
* We add custom CSS styles that will be injected into the editor interface
* We build and export the extension for use in the editor initialization
### Step 5: Initialize the Editor
#### Create `src/index.js`:
```javascript
import extension from './extension.js';
import { PLUGIN_ID, SECRET_KEY, EDITOR_URL, EMAIL_ID, USER_ID } from './creds';
// Load the Stripo editor script dynamically
function loadStripoEditor() {
const script = document.createElement('script');
script.id = 'UiEditorScript';
script.src = EDITOR_URL;
script.type = 'module';
script.onload = _initializeEditor;
document.head.appendChild(script);
}
// Initialize the editor with a demo template
function _initializeEditor() {
_loadDemoTemplate(template => {
_runEditor(template, extension);
});
}
// Run the editor with the provided template and extension
function _runEditor(template, extension) {
window.UIEditor.initEditor(
document.querySelector('#stripoEditorContainer'),
{
html: template.html,
css: template.css,
metadata: {
emailId: EMAIL_ID
},
locale: 'en',
onTokenRefreshRequest: function (callback) {
_request('POST', 'https://plugins.stripo.email/api/v1/auth',
JSON.stringify({
pluginId: PLUGIN_ID,
secretKey: SECRET_KEY,
userId: USER_ID,
role: 'user'
}),
function(data) {
callback(JSON.parse(data).token);
}
);
},
codeEditorButtonSelector: '#codeEditor',
undoButtonSelector: '#undoButton',
redoButtonSelector: '#redoButton',
versionHistoryButtonSelector: '#versionHistoryButton',
mobileViewButtonSelector: '#mobileViewButton',
desktopViewButtonSelector: '#desktopViewButton',
extensions: [
extension
]
}
);
}
// Helper function to make HTTP requests
function _request(method, url, data, callback) {
const req = new XMLHttpRequest();
req.onreadystatechange = function () {
if (req.readyState === 4 && req.status === 200) {
callback(req.responseText);
} else if (req.readyState === 4 && req.status !== 200) {
console.error('Cannot complete request. Please check that you have entered valid PLUGIN_ID and SECRET_KEY values');
}
};
req.open(method, url, true);
if (method !== 'GET') {
req.setRequestHeader('content-type', 'application/json');
}
req.send(data);
}
// Load a demo template from GitHub
function _loadDemoTemplate(callback) {
_request('GET', 'https://raw.githubusercontent.com/ardas/stripo-plugin/master/Public-Templates/Basic-Templates/Trigger%20newsletter%20mockup/Trigger%20newsletter%20mockup.html', null, function(html) {
_request('GET', 'https://raw.githubusercontent.com/ardas/stripo-plugin/master/Public-Templates/Basic-Templates/Trigger%20newsletter%20mockup/Trigger%20newsletter%20mockup.css', null, function(css) {
callback({ html: html, css: css });
});
});
}
// Start loading when the page is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', loadStripoEditor);
} else {
loadStripoEditor();
}
```
### Step 6: Add npm Scripts
Update your `package.json` with development scripts:
```json
{
"scripts": {
"dev": "vite",
"build": "vite build"
}
}
```
### Step 7: Run Your Extension
Start the development server:
```bash
npm run dev
```
Open your browser and navigate to `http://localhost:3000`.
**Expected result:**
* The Stripo editor loads successfully with your custom styles applied
* The blocks panel displays thumbnails with your custom background color
* Your extension is properly integrated and functioning
## What You've Accomplished
Congratulations! You've successfully:
✅ **Set up a development environment** for Stripo extensions\
✅ **Created your first extension** using ExtensionBuilder\
✅ **Added custom styles** to the editor interface\
✅ **Initialized the editor** with your custom extension\
✅ **Verified your changes** are reflected in real-time
## Common Issues and Solutions
### Issue: Editor Does Not Load
**Possible solutions:**
* Ensure the Stripo script URL is accessible and not blocked by network policies
* Check the browser console for any JavaScript errors that might prevent loading
* Verify that your plugin credentials are correct and valid
### Issue: Styles Do Not Appear
**Possible solutions:**
* Check for CSS syntax errors in your extension styles
* Ensure the extension is properly registered in the editor configuration
* Verify that CSS selectors are targeting the correct elements
### Issue: Module Not Found Errors
**Possible solutions:**
* Run `npm install` to ensure all dependencies are properly installed
* Check that import paths are correct and match your file structure
* Verify that the Stripo Extensions SDK is installed and up to date