Skip to content
Docs

Developing Your First Widget

🎯 Overview

This tutorial is designed for frontend developers working in organizations that already have a 1fe instance set up. You’ll learn the complete widget development workflow, from initial setup to deployment preparation, using both standard 1fe tools and organization-specific implementations.

👥 Who This Tutorial Is For

Frontend Developers who need to:

  • Build widgets for an existing 1fe ecosystem
  • Understand the widget development workflow
  • Learn to use development tools like the Playground
  • Configure and customize widget behavior
  • Prepare widgets for deployment

🏢 Important: Check With Your Organization First

Before starting, always check with your platform team or organization admin. Your organization may have:

  • Custom Widget Starter Kits - Organization-specific templates with company standards
  • Custom Playground Instances - Internal development environments
  • Specific Development Guidelines - Company-specific workflows and requirements
  • Custom CI/CD Pipelines - Organization deployment processes

⚡ What You’ll Build

By completing this tutorial, you’ll create a fully functional widget and understand:

  • Widget development environment - Set up and configure your development workspace
  • Playground-driven development - Use the playground for rapid iteration and testing
  • Widget configuration - Understand and customize widget behavior through configuration
  • Build and deployment - Prepare your widget for deployment

📚 Tutorial Steps

🚀 Step 1: Getting Started with Widget Development

Set up your development environment by cloning the widget starter kit, installing dependencies, and understanding the project structure.

→ Start with Step 1: Getting Started

🛝 Step 2: Using the Playground for Development

Learn to use the 1fe Playground as your primary development environment for testing and iterating on widgets.

→ Continue to Step 2: Using the Playground

⚙️ Step 3: Understanding Widget Configuration

Deep dive into widget configuration, contracts, and how widgets integrate with the 1fe platform.

→ Continue to Step 3: Widget Configuration

🏗️ Step 4: Building and Testing Your Widget

Learn the complete build process, testing strategies, and how to prepare your widget for deployment.

→ Complete with Step 4: Building and Testing

🔗 Prerequisites

Before starting this tutorial, ensure you have:

  • Node.js 22+ - Required for widget development
  • yarn - Package manager for dependencies
  • Code editor - VS Code or your preferred editor
  • Access to 1fe instance - Your organization’s 1fe instance or demo.1fe.com
  • Basic React knowledge - Widgets are built using React

🎯 Learning Objectives

After completing this tutorial, you’ll be able to:

✅ Development Setup:

  • Set up a complete widget development environment
  • Understand widget project structure and tooling

✅ Development Workflow:

  • Use the playground for rapid development and testing
  • Implement real-time development with hot reloading

✅ Widget Configuration:

  • Configure widgets using .1fe.config.ts
  • Understand widget contracts and platform integration

✅ Production Readiness:

  • Build and validate widgets for deployment
  • Understand the deployment workflow
  • Know how to integrate with organization CI/CD processes

👉 Ready to Start?

Widget development in 1fe is designed to be intuitive and powerful. Let’s dive in and build your first widget!

→ Step 1: Getting Started with Widget Development

🤝 Need Help?

The 1fe community is here to support your widget development journey: