Raxol Examples
View SourceA collection of examples demonstrating Raxol's features and capabilities.
Directory Structure
graph TD
A[Examples] --> B[Basic]
A --> C[Advanced]
A --> D[Display]
A --> E[Interactive]
A --> F[Layout]
A --> G[Showcase]
A --> H[Without Runtime]
B --> B1[Counter]
B --> B2[MultipleViews]
B --> B3[Rendering]
B --> B4[Subscriptions]
B --> B5[TableFeatures]
C --> C1[Commands]
C --> C2[DocumentationBrowser]
C --> C3[Editor]
C --> C4[Snake]
D --> D1[ProgressBar]
D --> D2[Charts]
D --> D3[TreeMaps]
E --> E1[FormValidation]
E --> E2[EventHandling]
E --> E3[KeyboardShortcuts]
F --> F1[Dashboard]
F --> F2[AdvancedLayout]
F --> F3[Responsive]
G --> G1[ComponentShowcase]
G --> G2[ArchitectureDemo]
G --> G3[ProgressBarDemo]
H --> H1[HelloWorld]
H --> H2[Clock]
H --> H3[EventViewer]
Quick Start
# Run basic example
mix run examples/basic/counter.exs | cat
# Run showcase example
mix run examples/showcase/component_showcase.exs | cat
Example Categories
Basic Examples
- Counter: Simple state management
- MultipleViews: View composition
- Rendering: Basic rendering patterns
- Subscriptions: Event subscriptions
- TableFeatures: Table component usage
Advanced Examples
- Commands: Command pattern implementation
- DocumentationBrowser: Documentation viewer
- Editor: Text editor implementation
- Snake: Game implementation
Display Examples
- ProgressBar: Progress visualization
- Charts: Data visualization
- TreeMaps: Hierarchical data display
Interactive Examples
- FormValidation: Form handling
- EventHandling: Event system usage
- KeyboardShortcuts: Shortcut implementation
Layout Examples
- Dashboard: Dashboard layout
- AdvancedLayout: Complex layouts
- Responsive: Responsive design
Showcase Examples
- ComponentShowcase: Component library
- ArchitectureDemo: Architecture patterns
- ProgressBarDemo: Progress bar variations
Without Runtime Examples
- HelloWorld: Basic terminal output
- Clock: Real-time updates
- EventViewer: Event debugging
Creating Your Own Example
defmodule MyApp do
use Raxol.Component
alias Raxol.View.Elements
@impl Raxol.Component
def mount(_params, _session, socket) do
{:ok, assign(socket, :message, "Hello from Raxol!")}
end
@impl Raxol.Component
def handle_event("some_event", _payload, socket) do
{:noreply, assign(socket, :message, "Event handled!")}
end
@impl Raxol.Component
def render(assigns) do
~V"""
<.panel title="My App">
<.text>{assigns.message}</.text>
<.button rax-click="some_event">Click Me</.button>
</.panel>
"""
end
end
Component Flow
sequenceDiagram
participant U as User
participant C as Component
participant E as Event Handler
participant R as Renderer
U->>C: Interact
C->>E: Handle Event
E->>C: Update State
C->>R: Render
R->>U: Update UI
Best Practices
Structure
- Follow directory organization
- Use appropriate category
- Include documentation
Implementation
- Use component behaviour
- Handle events properly
- Follow naming conventions
Documentation
- Add file header
- Document dependencies
- Include usage examples
Related Documentation
For more examples, check the examples directory.