---
url: https://plugin.stripo.email/extensions/tutorials.md
---
# Tutorials and Examples

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](/extensions/tutorials/how-to/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](/extensions/tutorials/how-to/template-aliases.md)

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](/extensions/tutorials/how-to/settings-panel.md)

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](/extensions/tutorials/how-to/working-with-apis.md)

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](/extensions/tutorials/examples/coupon-block)** - Create a custom coupon code block with styling controls

### External Integrations

Connect the Stripo editor to your external systems and services:

* **[External Images Library](/extensions/tutorials/examples/integrations/external-image-library)** - Integrate your image hosting service or CDN
* **[External Image Library Tab](/extensions/tutorials/examples/integrations/external-image-library-tab)** - Add a custom tab in the native image gallery
* **[External Video Library](/extensions/tutorials/examples/integrations/external-video-library)** - Connect video hosting platforms
* **[External Smart Elements Library](/extensions/tutorials/examples/integrations/external-smart-elements-library)** - Integrate product catalogs and dynamic content
* **[External Merge Tags Selector](/extensions/tutorials/examples/integrations/external-merge-tags-selector)** - Connect to CRM or customer data platforms
* **[External AI Assistant](/extensions/tutorials/examples/integrations/external-ai-assistant)** - Add AI-powered text enhancement capabilities
* **[External Display Conditions](/extensions/tutorials/examples/integrations/external-display-conditions)** - Create conditional content rules
* **[External Custom Font](/extensions/tutorials/examples/integrations/external-custom-font)** - Add custom web fonts to the editor

## Prerequisites

Before starting these tutorials, ensure you have:

* Basic understanding of JavaScript and HTML/CSS
* Familiarity with the [Core Concepts](/extensions/core-concepts)
* Completed the [Getting Started](/extensions/getting-started) guide

## 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:

* Check the [API Reference](/extensions/reference) for detailed method documentation
* Review the [Core Concepts](/extensions/core-concepts) for foundational knowledge
* Study the [Component Guides](/extensions/components/block) for component-specific details