Clearer example for x-bind

[sa-]

Hey, first of all thanks for making alpine - it's a breath of fresh air to use in the modern web stack for someone who is not a "frontend guy"

While I was reading through the docs I was quite confused because placeholder was both a variable name and an attribute for the input field. It took me unreasonably long to figure it out and I believe changing the variable name slightly would have helped me grok it faster.

Cheers

[sa-]

I don't think my changes are related to the failing test does not initialise components twice when contained in multiple mutations

[ekwoka]

The failed tests are related to some things Caleb is working on, not yours.

[ekwoka]

Makes sense! Just remove the ambiguity

[calebporzio]

PR Review: #4430 — Clearer example for x-bind

Type: Docs
Verdict: Close (superseded by #4742)

What's happening (plain English)

The x-bind docs page has this example:

<div x-data="{ placeholder: 'Type here...' }">
    <input type="text" x-bind:placeholder="placeholder">
</div>

The variable name placeholder is identical to the HTML attribute name placeholder. For someone learning Alpine, it's unclear which placeholder is the Alpine variable and which is the attribute. This PR renames the variable to disambiguate.

Other approaches considered

1. placeholderText (camelCase) — Matches JS conventions and Alpine docs patterns. Best option.
2. placeholder_text (snake_case) — What this PR uses. Not idiomatic JS, and no other x-data example in the docs uses snake_case.
3. myPlaceholder — Works but my prefix is a lazy naming pattern.

Changes Made

Created #4742 which cherry-picks this change but uses placeholderText (camelCase) instead of placeholder_text (snake_case) to match JavaScript conventions and Alpine's doc patterns.

Test Results

Docs-only change — no tests needed or affected.

Code Review

The contributor correctly identified a real readability issue. The only problem is the naming convention: placeholder_text uses snake_case, which is the only instance of snake_case in any x-data example across the entire docs directory. Changed to placeholderText in #4742.

Security

No security concerns identified.

Verdict

This is a good catch — the ambiguity between placeholder (variable) and placeholder (attribute) is genuinely confusing for learners. I've opened #4742 with the camelCase fix since I couldn't push to the contributor's fork. Recommend closing this in favor of #4742.

---

Reviewed by Claude