React Widget System
An earlier release
These pages document @evanion/react-widget 0.2.0. npm install @evanion/react-widget gives you 0.3.3, documented here. Values on this page were produced by running 0.2.0 in CI at d50a1c6 and are not re-executed.
A powerful and flexible widget system for building dynamic, composable React applications with TypeScript support.
Overview
The React Widget System allows you to create dynamic, data-driven user interfaces by defining reusable widget components and rendering them from configuration data. Perfect for CMS-driven layouts, dashboards, and any application that needs flexible, composable UI.
Key Features
- 🎯 TypeScript First - Full type safety with generic widget definitions
- 🧩 Composable - Build complex layouts from simple widget components
- 🎨 Customizable - Custom chrome (wrappers) and styling
- 🚀 Performance - Memoized rendering and error boundaries
- 🔄 Dynamic - Render widgets from configuration data
- 🛡️ Robust - Built-in error handling and loading states
- 🧪 Tested - Comprehensive test coverage
Quick Start
npm install @evanion/react-widgetTry It Live
Edit the code below to see the widget system in action:
The interactive example this release showed here runs against the current source, so it is on the same page under /next/ and not on this one.
Use Cases
- CMS-Driven Layouts - Render page layouts from CMS data
- Dashboards - Dynamic admin panels with configurable widgets
- Blog Sidebars - Composable sidebar components
- E-commerce - Product showcases and promotional layouts
- Content Management - Flexible content editing interfaces
Documentation Sections
- Getting Started - Installation and basic concepts
- API Reference - Complete API documentation
- Examples - Real-world usage patterns
- Advanced Patterns - Custom chrome and nested widgets
- Migration Guide - Upgrading between versions