[json] Add a note reminding people to put json: in config to use json

[ChadMatsalla]

Description:

It wasn't obvious that one should include json: in the config to parse json in a lambda.

Related issue (if applicable): fixes

Pull request in esphome with YAML changes (if applicable):

• esphome/esphome#

Checklist:

• I am merging into next because this is new documentation that has a matching pull-request in esphome as linked above.
  or

• I am merging into current because this is a fix, change and/or adjustment in the current documentation and is not for a new component or feature.

• Link added in /components/index.rst when creating new documents for new components or cookbook.

New Component Images

If you are adding a new component to ESPHome, you can automatically generate a standardized black and white component name image for the documentation.

To generate a component image:

1. Comment on this pull request with the following command, replacing COMPONENT_NAME with your component name in UPPER_CASE format with underscores (e.g., BME280, SHT3X, DALLAS_TEMP):

   @esphomebot generate image COMPONENT_NAME
   

2. The ESPHome bot will respond with a downloadable ZIP file containing the SVG image.

3. Extract the SVG file and place it in the images/ folder of this repository.

4. Use the image in your component's index table entry in /components/index.rst.

Example: For a component called "DHT22 Temperature Sensor", use:

@esphomebot generate image DHT22

[coderabbitai]

Walkthrough

Updated the JSON component documentation: added a root-config requirement note, expanded the Parsing JSON example with payload {"status":"play","vol":"42","mute":"0"} and a template/number extraction snippet that handles missing keys, and changed See Also links to display-name + path pairs.

Changes

Cohort / File(s)	Summary
Docs: JSON component content/components/json.md	Added note that the json component must be declared in the root config; replaced Parsing JSON payload with {"status":"play","vol":"42","mute":"0"}, added a template/number extraction snippet showing handling for a missing vol key; updated See Also entries to use display-name + path pairs (HTTP Request, json_util.h).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Add documentation for json component #4349 — Parallel documentation update with the same JSON parsing example and missing-vol handling.

Suggested reviewers

• jesserockz

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	The description explains that the pull request adds documentation clarifying the need to include json: in the ESPHome configuration to parse JSON in a lambda and includes relevant checklist and context, which aligns with the actual changes made.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Title Check	✅ Passed	The title succinctly indicates the addition of a documentation note reminding users to include the json: component in their root configuration. It clearly focuses on the main change and references the affected component. This ensures a teammate scanning history immediately understands the purpose of the update.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f872ec1 and 799719a.

📒 Files selected for processing (1)

• content/components/json.md (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**

⚙️ CodeRabbit configuration file

• Do not generate or add any sequence diagrams

Files:

• content/components/json.md

🪛 GitHub Actions: Lint

content/components/json.md

[error] 61-61: MD031/blanks-around-fences Fenced code blocks should be surrounded by blank lines [Context: "```"]

🔇 Additional comments (1)

content/components/json.md (1)

124-125: apiref supports two arguments (label + path) — the two apiref lines are correct.

themes/esphome-theme/layouts/shortcodes/apiref.html documents the two-argument form and many content files use that pattern.

[netlify]

✅ Deploy Preview for esphome ready!

Name	Link
🔨 Latest commit	370cd39
🔍 Latest deploy log	https://app.netlify.com/projects/esphome/deploys/68d43745b3ee78000a9b31c4
😎 Deploy Preview	https://deploy-preview-5397--esphome.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.