@consensys/ds3-playground

Playground

🚧 Note: This package is under active development. While we're working hard to make it production-ready, please be aware that APIs and features may change. We welcome your feedback and contributions as we continue to improve!

🎮 Interactive playground for DS3 components with live code editing and real-time preview

Build, test, and explore DS3 components in real-time with a powerful interactive playground that supports live code editing, syntax highlighting, and instant preview across all platforms.

// Interactive playground with live preview
import { Playground, CodeBlock, Markdown } from '@consensys/ds3-playground';

✨ Features

🎮 Interactive Playground - Real-time component testing with live code editing and instant preview

📝 Live Code Execution - Write, edit, and execute JSX code directly in the browser with instant feedback

🎨 Syntax Highlighting - Beautiful code display with Prism.js integration and DS3 theme support

📖 Markdown Rendering - Rich markdown support with live code blocks and custom styling

🔍 Component Examples - Comprehensive library of DS3 component examples organized by category

🚀 Get Started

pnpm add @consensys/ds3-playground

📚 Components

Core Components

• Playground - Main interactive playground with category navigation and live editing
• CodeBlock - Syntax-highlighted code display with optional live preview
• Markdown - Rich markdown rendering with live code execution
• Highlight - Syntax highlighting component with Prism.js integration

Example Library

The playground includes a comprehensive collection of DS3 component examples:

• Buttons - Interactive button variants and compositions
• Inputs - Form input examples with validation states
• Checkboxes - Selection controls with various configurations
• Switches - Toggle controls and state management
• Fields - Form field components with validation
• Icons - Icon usage patterns and styling
• Typography - Text components and hierarchy
• Colors - Color system and theme tokens
• Design - Design system fundamentals

🎯 Quick Examples

Basic Playground

import { Playground } from '@consensys/ds3-playground';

function App() {
  return <Playground />;
}

🛠️ Development

# Install dependencies
pnpm i

# Type checking
pnpm type-check

📖 Documentation

For detailed component documentation, see the individual README files:

• CodeBlock Documentation
• Markdown Documentation
• Highlight Documentation
• Examples Documentation

🤝 Contributing

We welcome contributions! Check out our Contributing Guidelines for detailed information on our development workflow, code standards, and how to submit changes.

📜 License

MIT