Document hybrid_property in the Vars section

[masenf]

Type of change

• Documentation

Note

Stacked on #6621 — base branch is claude/hybrid-property-backend-var-guard. This PR contains only the docs; CI won't run until the base is main.

Description

Adds a Hybrid Properties page to the Vars section (docs/vars/hybrid_properties.md) and registers it in the sidebar right after Computed Vars.

The page contrasts hybrid properties with computed vars — the key distinction being that a computed var computes on the server and caches/sends the result (duplicating data), whereas a hybrid property compiles to a client-side expression over existing vars and sends nothing extra, making it a convenient way to reformat frontend data when needed. It also covers:

• a live demo deriving full_name from first_name/last_name
• the separate frontend implementation via @<name>.var
• the backend-var restriction (can't reference _-prefixed vars in frontend logic)
• nested-object usage (dataclass / pydantic / SQLAlchemy via an object var)

Changes

• docs/vars/hybrid_properties.md — new page
• docs/app/reflex_docs/templates/docpage/sidebar/sidebar_items/learn.py — sidebar entry

https://claude.ai/code/session_01DKFiYGnWRQG8wMNKFW7obm

---

Generated by Claude Code

[codspeed-hq]

Merging this PR will not alter performance

✅ 26 untouched benchmarks
⏩ 8 skipped benchmarks¹

---

_{Comparing claude/hybrid-property-docs (6e7821b) with main (8945367)}

Footnotes

1. 8 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[greptile-apps]

Greptile Summary

Adds a new Hybrid Properties documentation page (docs/vars/hybrid_properties.md) and registers it in the Vars sidebar section immediately after Computed Vars. The page explains how hybrid_property differs from @rx.var computed vars — no extra server-computed state is sent; instead the property compiles to a client-side expression over existing vars.

• The page covers basic usage (full_name demo), the comparison table with computed vars, the @<name>.var decorator for separate frontend implementations, and nested-object (dataclass/Pydantic/SQLAlchemy) support.
• The f-string interpolation used in code examples (f"Hello, {cls.name}!") is correct: Reflex's Var.__format__ embeds a sentinel tag in the string that LiteralStringVar.create later decodes into a proper JS concatenation expression.
• The sidebar entry (vars.hybrid_properties) resolves automatically from the auto-discovered markdown file path via the docs namespace pipeline.

Confidence Score: 5/5

Pure documentation addition with no runtime code changes; safe to merge once the base PR (#6621) lands.

The change is two files: a new markdown page and a one-line sidebar registration. The doc content was verified against the actual hybrid_property implementation in reflex-base — the f-string Var interpolation examples are correct, the API surface described matches the code, and the sidebar wiring follows the existing auto-discovery pattern correctly.

No files require special attention.

Important Files Changed

Filename	Overview
docs/vars/hybrid_properties.md	New docs page for hybrid_property: covers basic usage, comparison with computed vars, separate frontend implementation via @name.var, and nested object support. Code examples are accurate — f-string interpolation works via Reflex's Var.format sentinel mechanism.
docs/app/reflex_docs/templates/docpage/sidebar/sidebar_items/learn.py	Adds vars.hybrid_properties to the Vars sidebar section, placed correctly between computed_vars and var_operations.

_{Reviews (3): Last reviewed commit: "Merge branch 'main' into claude/hybrid-p..." | Re-trigger Greptile}

The base branch was changed.