Examples

HUML Template Examples

Working examples demonstrating the three merge patterns with HUML templates.

See the GitHub repository examples directory for complete HUML code.

Counter & State

00_simple_counter.huml

• State management, computed values, button actions
• String interpolation, conditional rendering
• Basic layout and styling

Forms & Submissions

04_form_submissions.huml

• Complete form handling with validation
• Persistent storage in submissionsDoc (Loro CRDT)
• Multiple forms, character counters
• Push-only pattern - viewers submit, publisher receives

02_form_blocks.huml

• All input types: text, textarea, checkbox, select, radio
• Email validation, dynamic validation
• Form state management

Content & Navigation

03_content_blocks.huml

• External links (open in system browser)
• SPA navigation between screens
• Images with dynamic sizing
• Multi-screen apps

17_viewer_navigation.huml

• Navigation patterns for viewers
• Screen transitions
• Link handling

Media Galleries

08_image_gallery.huml - Image grid with controls

07_video_gallery.huml - Video player gallery

11_audio_player.huml - Audio playback controls

Canvas & Graphics

13_canvas_patterns.huml - Geometric patterns

14_canvas_interactive.huml - Interactive canvas

15_canvas_mathematical.huml - Math visualizations

16_canvas_kaleidoscope.huml - Kaleidoscope patterns

CEL expressions compile to GPU shaders - 500+ FPS performance.

Sync Patterns

sync_test_simple.huml - Basic sync demonstration

sync_test_template.huml - Full sync pattern testing

Demonstrates pull-only (read), push-only (submit), and bidirectional (collaborate) patterns.

How to Use

1. Copy HUML from GitHub examples
2. Create new resource in Sthalam
3. Paste template code
4. Preview in Publisher mode
5. Modify and experiment

Learn More

• HUML Syntax: See /sthalam/docs/specs/HUML_TEMPLATE_GUIDE_ACCURATE.md in repository
• Architecture: Review Architecture section
• Permits: Understand Permits for authorization

Build your own. Infinite combinations possible.