Skip to main content

Introduction

widgemo-core is a React component library for rendering structured data as interactive widgets — tables, grids, carousels, boards, and charts — from a single declarative config object.

You pass your data and a config that describes zones, mode, fields, and actions. Widgemo handles layout, sorting, filtering, rendering, theming, and responsive switching.

What it looks like​

Simple Widgemo Example

Table mode with field renderers, sorting, and a header zone — configured entirely via the config prop.

Team Directory

Rendered with widgemo-core

Name
Department
Status
Salary
Score
Aurora ChenEngineeringactive$142,000.00
High91%
Priya NairOperationsactive$134,000.00
High88%
Samir KhanEngineeringinactive$127,000.00
Medium61%
Mateo SilvaDesignpending$119,500.00
Good74%

What widgemo-core gives you​

  • Five built-in modes — table, grid, carousel, board, chart, with responsive switching between them.
  • Field renderers — badge, currency, progress, rating, sparkTrend, scoreMeter, compositionBar, temporal renderers, and more — applied per field via renderAs.
  • Zone-based layout — compose header, content, and footer zones independently.
  • Sorting, filtering, grouping, and pagination — declared in config; no event wiring needed.
  • Gestures — item-click, item-drag-start, and item-drop are declared in config; Widgemo fires an InteractionContext payload to your handler. What the host app does with that context is app logic.
  • Theming — CSS variables and a WidgemoThemeProvider for light/dark/custom themes.
  • Extension points — custom renderers, field types, modes, and icons via a registry API.

What it is not​

  • Not a form library — widgemo-core renders and interacts with data, it does not manage form state.
  • Not a charting library — chart mode is a mode for data widgets, not a general-purpose charting toolkit.
  • Not an opinionated data-fetching layer — you bring your data; Widgemo renders it.

Stack requirements​

  • React 18 or 19
  • React-DOM matching your React version
  • Any bundler: Vite, Next.js, CRA, custom Webpack

Start here​

  1. Installation — install the package and set up the stylesheet.
  2. Quick Start — first Widgemo in under five minutes.
  3. Your First Widgemo — step-by-step path to a production-safe baseline.