Extensions

Overview

Extensions are modular pieces of code that customize, enhance, or modify Webiny’s behavior. They are the primary way to extend Webiny to meet specific needs. Even core features like identity providers are implemented as extensions, making the system highly modular and customizable.

What Extensions Do

Extensions allow you to:

• Add custom GraphQL schemas and resolvers
• Customize Admin UI with themes and branding
• Modify cloud infrastructure configuration
• Hook into lifecycle events
• Add custom business logic
• Create custom CLI commands

Extension Philosophy

Webiny follows an opt-in customization approach:

“Here’s what you need, extend when you want.”

Webiny provides sensible defaults. You create extensions only for specific customizations you need. The platform handles everything else automatically.

Thewebiny.config.tsxFile

Extensions are registered in webiny.config.tsx, the central configuration file for your project.

Basic Configuration

A minimal configuration:

This sets AWS region and enables Cognito authentication.

Extended Configuration

As you add customizations:

Configuration uses React components for type safety, auto-completion, and maintainability.

Configuration Types

webiny.config.tsx typically includes:

1. Infrastructure - AWS region, tags, resource settings, OpenSearch
2. Identity providers - Cognito, Auth0, Okta, custom authentication
3. Extensions - References to custom code
4. Environment-specific settings - Different configs per environment

Types of Extensions

API Extensions

Customize the backend GraphQL API:

• Custom GraphQL schemas, queries, mutations
• Lifecycle hooks
• Custom resolvers and business logic
• Security enhancements

Example implementation:

Admin Extensions

Customize the Admin UI:

• White-label branding
• Custom views and pages
• Tenant-level theming
• Custom components

Example implementation:

Admin extensions are regular React components. Use hooks, context, and React patterns you’re familiar with.

Infrastructure Extensions

Modify AWS infrastructure using Pulumi:

• Custom resources (CloudWatch alarms, S3 buckets, Lambda functions)
• Modify existing resources (memory, timeout, environment variables)
• Conditional infrastructure per environment

CLI Extensions

Add custom commands to Webiny CLI:

• Deployment scripts
• Data migrations
• Code generators
• Project-specific tooling

Environment-Specific Extensions

Load extensions conditionally by environment:

Useful for:

• Different infrastructure per environment
• Development-only debugging tools
• Production-only monitoring

Installing Pre-Built Extensions

Webiny provides official extensions at github.com/webiny/extensions.

Install with:

This command:

1. Downloads extension code
2. Adds it to extensions/ folder
3. Updates webiny.config.tsx to register it

Installed extensions live in your project, so you can customize them as needed.

Extension Implementation

File Location

Extension implementation code lives in the /extensions folder. When you reference src={"/extensions/MyExtension.ts"} in webiny.config.tsx, Webiny loads that file at the appropriate time.

Organization

Organize extensions however you prefer: