Plugin Docs

Appearance

This plugin is new and currently in beta. For the stable version, please use the previous version of the plugin.

Tutorials ​

Welcome to the Stripo Extensions SDK tutorials! This section provides practical how-to guides and real-world examples to help you build powerful extensions for the Stripo email editor.

Available How-To Guides ​

Template Modifications ​

Learn how to programmatically modify email templates at runtime:

  • Dynamic attribute updates - Add tracking parameters and modify link attributes
  • HTML node manipulation - Add, remove, or replace template elements
  • Text content manipulation - Update placeholders and dynamic content
  • Node configuration storage - Store custom metadata in template nodes
  • Conditional display logic - Control visibility based on user data
  • CSS style modifications - Programmatically update custom styles
  • Structure layout adjustments - Reorganize multi-column layouts and container widths
  • Localized version history - Provide clear, translated modification descriptions

Template Aliases ​

Simplify block development with template alias shortcuts:

  • Cross-client compatibility - Ensure consistent appearance across email clients
  • Simple block creation - Build single-cell blocks with standard elements
  • Container creation - Create grouping containers with interaction controls
  • Structure creation - Build multi-column layouts with flexible widths
  • Empty containers - Add placeholders for user-populated content
  • Quick-add icons - Customize available blocks in empty containers

Settings Panel Configuration ​

Customize the settings panel for blocks:

  • Add new controls - Insert custom controls into existing tabs
  • Remove controls - Simplify the interface by hiding unnecessary options
  • Reorder controls - Organize controls for better user experience
  • Multiple tabs - Structure controls across multiple logical groupings
  • Custom tab labels - Provide localized labels for custom tabs
  • Block-specific customization - Configure settings for both built-in and custom blocks

Working with APIs ​

Master the extension API system:

  • Editor configuration - Access and use editor initialization settings
  • Translation and internationalization - Support multiple languages in extensions
  • Custom font management - Dynamically add fonts to the editor
  • Editor state management - Monitor and respond to editor state changes
  • Click outside behavior - Control deselection behavior for custom toolbars
  • AI and emoji popovers - Open built-in AI assistant and emoji picker
  • Document root access - Traverse and query the document structure
  • Control API - Manage UI element values, visibility, and attributes
  • UI Element API - Build custom UI components with value change notifications

Real-World Examples ​

Explore complete implementation examples organized by category:

Custom Blocks ​

Learn how to create custom content blocks with these comprehensive tutorials:

  • Coupon Block - Create a custom coupon code block with styling controls

External Integrations ​

Connect the Stripo editor to your external systems and services:

Prerequisites ​

Before starting these tutorials, ensure you have:

  • Completed the Getting Started guide
  • Basic understanding of JavaScript and HTML/CSS
  • Familiarity with the Architecture Overview
  • A development environment set up with the Stripo Extensions SDK

Tutorial Approach ​

Each how-to guide is structured to:

  • Focus on specific tasks - Solve concrete problems you'll encounter
  • Provide complete examples - Include all necessary code with explanations
  • Show multiple approaches - Compare different solutions when applicable
  • Highlight best practices - Recommend optimal patterns and techniques
  • Include real scenarios - Use practical use cases from actual implementations

Getting Help ​

If you encounter issues while following these tutorials:

© 2025 Stripо.email — Next Generation Email Editor.