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 degrade performance by 15.79%

⚠️ Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

❌ 10 regressed benchmarks
✅ 16 untouched benchmarks
⏩ 8 skipped benchmarks¹

Warning

Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
❌	test_evaluate_page[_complicated_page]	27.3 ms	38.7 ms	-29.52%
❌	test_evaluate_page_with_hooks[_complicated_page]	28 ms	39.5 ms	-29.11%
❌	test_evaluate_page[_stateful_page]	5.1 ms	6.5 ms	-22.37%
❌	test_evaluate_page_with_hooks[_stateful_page]	5.8 ms	7.4 ms	-21.27%
❌	test_compile_all_artifacts[_complicated_page]	64.3 ms	77.5 ms	-17.02%
❌	test_compile_all_artifacts[_stateful_page]	27.2 ms	29.9 ms	-9.03%
❌	test_compile_page[_complicated_page]	115.7 ms	127.1 ms	-9%
❌	test_compile_page[_stateful_page]	30.7 ms	33.3 ms	-7.83%
❌	test_compile_page_full_context[_complicated_page]	136.4 ms	141.7 ms	-3.7%
❌	test_compile_page_full_context[_stateful_page]	35.8 ms	37.1 ms	-3.69%

Tip

Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.

---

_{Comparing claude/hybrid-property-docs (52d6b4d) with claude/hybrid-property-backend-var-guard (c44fc0a)}

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 page to the Vars section of the docs and registers it in the sidebar. The page explains the distinction between hybrid properties (client-side expression compiled from existing vars, no extra data sent) and computed vars (server-side evaluation with cached result), backed by live editable demos.

• docs/vars/hybrid_properties.md — new page covering basic usage, frontend/backend comparison table, separate @<name>.var override pattern, and nested-object (dataclass/Pydantic/SQLAlchemy) usage.
• docs/app/reflex_docs/templates/docpage/sidebar/sidebar_items/learn.py — one-line sidebar entry inserting the new page between Computed Vars and Var Operations.

Confidence Score: 5/5

Safe to merge — purely additive documentation with no code changes to the framework itself.

The two changed files are a new Markdown doc and a one-line sidebar addition. The examples in the doc were cross-checked against the implementation in hybrid_property.py and the integration/unit tests — the f-string-with-Var pattern works correctly via Var.format's tagged-string encoding, rx._x.hybrid_property is confirmed exported, and the sidebar entry is auto-resolved by the dynamic namespace builder in init.py. No factual inaccuracies or broken patterns found.

No files require special attention.

Important Files Changed

Filename	Overview
docs/vars/hybrid_properties.md	New docs page introducing hybrid_property with live demos, a comparison table, separate-frontend-impl section, and nested-object example. Examples are technically correct — the f-string-with-Var mechanism is confirmed by the tagged-string encoding in Var.format.
docs/app/reflex_docs/templates/docpage/sidebar/sidebar_items/learn.py	Adds vars.hybrid_properties to the sidebar between computed_vars and var_operations; the entry is auto-resolved from the new .md file via the dynamic namespace builder in init.py.

_{Reviews (1): Last reviewed commit: "docs: document hybrid_property in the Va..." | Re-trigger Greptile}