Skip to main content

React PKL Documentation

Welcome to the React PKL v0.2.0 documentation! This guide will help you navigate all available documentation.

🚀 Quick Start: Jump to Getting Started Guide to build your first plugin system.

🆕 v0.2.0 Highlights: Context-driven architecture, theme system with layout overrides, style context, and static plugin support!

📚 Documentation Overview​

For Getting Started​

  1. Getting Started Guide - Step-by-step tutorial for creating your first plugin system
  2. Examples Guide - Detailed walkthrough of example applications and plugins

For Development​

  1. API Reference - Complete API documentation for all classes, methods, and types (v0.2.0 updated)
  2. Quick Reference - Fast lookup for common tasks and code snippets
  3. Advanced Usage - Advanced patterns, techniques, and best practices
  4. Theme System - Comprehensive guide to the v0.2.0 theme system ⭐ NEW

For Understanding​

  1. Architecture Overview - System design, data flow, and architectural decisions (v0.2.0 updated)
  2. Contributing Guide - How to contribute to the project

📖 Reading Path by Role​

I'm building a plugin system​

  1. Read Getting Started Guide to create your SDK
  2. Review Theme System to understand theming capabilities (v0.2.0)
  3. Check Examples Guide to see how it works in practice
  4. Refer to API Reference as you build
  5. Use Advanced Usage for sophisticated features

I'm developing plugins​

  1. Your SDK should provide its own documentation
  2. Use Quick Reference for common patterns
  3. Check Theme System if building a theme plugin
  4. Check Examples Guide for plugin examples
  5. Refer to your SDK's documentation for context-specific APIs

I'm contributing to React PKL​

  1. Study Architecture Overview to understand the v0.2.0 system
  2. Follow Contributing Guide for development workflow
  3. Use API Reference to understand the codebase

I'm evaluating React PKL​

  1. Browse Examples Guide to see it in action
  2. Check Architecture Overview for design decisions (v0.2.0 updated)
  3. Review API Reference to assess API quality
  4. Explore Theme System to understand theming capabilities

🆕 What's New in v0.2.0​

Context-Driven Architecture​

Components use hooks instead of props, eliminating prop drilling:

// Old
<AppHeader toolbar={items} user={user} />

// New
function AppHeader() {
  const { toolbar } = useAppLayout();
  const { user } = useAppContext();
}

Theme System​

Plugins can override entire layout components:

onThemeEnable(slots) {
  slots.set(AppHeader, DarkHeader);
  slots.set(AppSidebar, DarkSidebar);
}

Style Context​

Type-safe theme variables:

const styles = useStyles();
<div style={{ background: styles.bgPrimary }}>...</div>

Static Plugins​

Plugins without lifecycle methods for simple extensions:

export default {
  meta: { id: 'toolbar', name: 'Toolbar', version: '1.0.0' },
  entrypoint: () => <Button />
};

See Architecture and Theme System for full details.

🔍 Finding Information​

I want to...​

...create my first plugin system → Getting Started Guide

...look up a specific API → API Reference

...find a code snippet quickly → Quick Reference

...implement an advanced feature → Advanced Usage

...see working examples → Examples Guide

...understand the theme system → Theme System Guide

...understand the architecture → Architecture Overview

...contribute to the project → Contributing Guide

💡 Tips for Using Documentation​

For Learning​

  1. Follow Getting Started Guide step-by-step
  2. Study Examples Guide to see real code
  3. Keep Quick Reference handy while coding
  4. Dive into Advanced Usage when needed

For Reference​

  1. Use Quick Reference for fast lookups
  2. Consult API Reference for detailed specs
  3. Check Examples Guide for patterns
  4. Review Advanced Usage for complex scenarios

🎯 Next Steps​

Choose your path:

Happy coding with React PKL! 🎉

For questions, issues, or contributions, visit the GitHub Repository.