@djangocfg/playground

@djangocfg/playground

Interactive component playground for exploring and testing DjangoCFG UI libraries

Part of DjangoCFG — a modern Django framework for building production-ready SaaS applications. All @djangocfg/* packages are designed to work together, providing type-safe configuration, real-time features, and beautiful admin interfaces out of the box.

An interactive environment for exploring and testing React components from the DjangoCFG UI library ecosystem.

Features

• Three-Panel Layout — Navigation, Preview, and Properties panels for efficient component exploration
• Fixture-Based — Each component has a fixture with live preview, code examples, and props documentation
• Interactive Controls — Modify component props in real-time using useValue, useSelect, useBoolean hooks
• Responsive Preview — Test components in Desktop, Tablet, and Mobile viewports
• AI-Ready Export — Copy all component documentation for AI assistants (Claude, ChatGPT)
• Mobile Optimized — Adaptive layout with sheet panels for mobile devices
• Type-Safe — Full TypeScript support with exported types

Installation

pnpm add @djangocfg/playground

Components

PlaygroundApp

Main entry point that renders the complete playground interface with all panels and functionality.

Root

Core layout component providing the three-panel architecture with resizable panels and mobile adaptation.

Panels

• NavPanel — Left sidebar with searchable component tree organized by categories
• PreviewPanel — Center area with live component preview, code tab, and viewport controls
• ControlPanel — Right sidebar with interactive props controls and component metadata

HomeOverlay

Landing page shown when no component is selected, featuring library overview and category navigation.

Hooks

• useValue — Text input control for string props
• useNumber — Number input with slider for numeric props
• useSelect — Dropdown for enum/union type props
• useBoolean — Toggle switch for boolean props
• useColor — Color picker for color props
• useDrag — Panel resize functionality

Documentation

Full documentation available at djangocfg.com

Contributing

Issues and pull requests are welcome at GitHub

License

MIT - see LICENSE for details