Examples
Annotated walkthroughs that show Zero Framework and ShadowComponent working together in real code.
Each example walks through a complete, working piece of code — not pseudocode or snippets, but the actual source files you would find in a real project. Start with the fundamentals and work your way up.
waving_hand HelloWorld Module
Learn the fundamentals of Zero Framework modules — routing, views, security attributes, and input handling — by reading through the real HelloWorld source code.
Beginner
add_circle Counter Component
Build your first ShadowComponent from scratch — observable properties, event handling, and Shadow DOM styling in a simple counter widget.
Beginner
checklist Todo App
Combine both frameworks in a full-stack example — a Zero module serves the API while a ShadowComponent handles the interactive frontend.
Intermediate
How to Read These
Each walkthrough follows a consistent structure:
- Overview — What the example builds and which concepts it covers
- File structure — The directory layout so you know where everything lives
- Annotated source — The complete code with explanations between each section
- Key takeaways — The patterns and principles worth remembering
Code blocks show the real source files. You can copy any example and it will work in a Zero Framework project without modification.
These examples assume you have read the Zero Framework overview. You don't need to memorize the docs — just understand what a module is and how URLs map to methods.