Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mohsen1/pretty-json
Pretty JSON HTML Custom Element
https://github.com/mohsen1/pretty-json
custom-elements html json web-components
Last synced: 3 days ago
JSON representation
Pretty JSON HTML Custom Element
- Host: GitHub
- URL: https://github.com/mohsen1/pretty-json
- Owner: mohsen1
- Created: 2024-04-10T17:49:27.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-04-21T18:01:05.000Z (5 months ago)
- Last Synced: 2024-04-22T12:25:38.322Z (5 months ago)
- Topics: custom-elements, html, json, web-components
- Language: JavaScript
- Homepage: https://azimi.me/pretty-json
- Size: 18.1 MB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# `` HTML Custom Element
[**See the live demo**](https://azimi.me/pretty-json/)
`` is an HTML custom element that allows you to render JSON objects in HTML documents with human-readable formatting and expandable interaction for browsing deep JSON structures.
## Usage
Include [`pretty-json-custom-element/index.js`](https://github.com/mohsen1/pretty-json/blob/main/index.js) in your HTML page and use the HTML custom element as follows:
```html
{
"hello": "world",
"value": 42,
"enabled": true,
"extra": null,
"nested": { "key": "value" }
}
````
Your JSON will be rendered as a human-readable format:
## Features
- Outputs a valid JSON string that can be copied and pasted into a JSON file
- HTML Custom Element without any dependencies, works in any modern browser
- No need to install any dependencies or build tools, just drop the script in your HTML and start using it
- Allows a high level of customization using CSS variables
- Display large JSON objects with expandable and collapsible sections
- Supports truncating very large strings and arrays with an ellipsis
## To-do List
- [ ] Support grouping very large arrays
## Attributes
You can customize the rendering of the JSON object by setting the following attributes on the `` element:
### `expand`
By default, the JSON object is rendered expanded up to 1 level deep. You can set the `expand` attribute to a number to expand the JSON object up to that level deep:
```html
{"hello": {"world": "!"}}
```
#### Collapsed by default
You can set the `expand` attribute to `0` to render the JSON object collapsed by default:
```html
{"hello": {"world": "!"}}
```
### `truncate-string`
By default, strings longer than 500 characters are truncated with an ellipsis. You can set the `truncate-string` attribute to a number to truncate strings longer than that number of characters:
```html
{"hello": "long string that will be truncated"}
```
## Customization
You can customize the appearance of the rendered JSON using CSS variables:
```css
pretty-json {
--key-color: #cc0000;
--arrow-color: #737373;
--brace-color: #0030f0;
--bracket-color: #0030f0;
--string-color: #009900;
--number-color: #0000ff;
--null-color: #666666;
--boolean-color: #d23c91;
--comma-color: #666666;
--ellipsis-color: #666666;
--indent: 2rem;
}
/* Also handle the dark mode */
@media (prefers-color-scheme: dark) {
pretty-json {
--key-color: #f73d3d;
--arrow-color: #6c6c6c;
--brace-color: #0690bc;
--bracket-color: #0690bc;
--string-color: #21c521;
--number-color: #0078b3;
--null-color: #8c8888;
--boolean-color: #c737b3;
--comma-color: #848181;
--ellipsis-color: #c2c2c2;
}
}
```
## Development
To run the development server:
```bash
yarn install
yarn start
```
### Running tests
This repository uses Playwright for testing.
To run the tests:
```bash
yarn test
```