Dynamic JSON
Create a badge from any JSON API using JSONPath queries.
GET/badge/dynamic/json.svg
URL to a public JSON document.
JSONPath expression to extract the value.
Text to prepend to the extracted value.
Text to append to the extracted value.
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/badge/dynamic/json.svg?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fvercel%2Fnext.js&query=%24.stargazers_count&mode=dark"><img alt="badge" src="https://shieldcn.dev/badge/dynamic/json.svg?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fvercel%2Fnext.js&query=%24.stargazers_count&mode=light"></picture>
JSONPath syntax
| Expression | Description |
|---|---|
$.key | Top-level field |
$.nested.key | Nested field |
$.array[0] | First array element |
$.array.length | Array length |
Examples
GitHub stars count
Secondary variant
Outline variant
Custom label
Copy-paste examples
Default — pull any value from any public JSON API
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/badge/dynamic/json.svg?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fvercel%2Fnext.js&query=%24.stargazers_count&mode=dark"><img alt="dynamic json" src="https://shieldcn.dev/badge/dynamic/json.svg?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fvercel%2Fnext.js&query=%24.stargazers_count&mode=light"></picture>Secondary — softer look for README rows
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/badge/dynamic/json.svg?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fvercel%2Fnext.js&query=%24.stargazers_count&variant=secondary&mode=dark"><img alt="dynamic json" src="https://shieldcn.dev/badge/dynamic/json.svg?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fvercel%2Fnext.js&query=%24.stargazers_count&variant=secondary&mode=light"></picture>Caching
Dynamic JSON responses are cached for 5 minutes.