{"id":18307545,"url":"https://github.com/clubside/theia-json-view","last_synced_at":"2026-05-04T07:38:37.728Z","repository":{"id":151082466,"uuid":"269362644","full_name":"clubside/Theia-JSON-View","owner":"clubside","description":"JSON Data View with syntax highlighting, collapsible nodes, themes, images and more","archived":false,"fork":false,"pushed_at":"2023-04-11T23:14:48.000Z","size":558,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-15T05:24:42.508Z","etag":null,"topics":["class","json","json-tree","pure-javascript","themable","vanilla-javascript","vanilla-js","viewer"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clubside.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-04T13:09:02.000Z","updated_at":"2023-03-25T02:24:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"0894f4aa-0ce0-45db-a3bc-7527fb12c913","html_url":"https://github.com/clubside/Theia-JSON-View","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clubside%2FTheia-JSON-View","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clubside%2FTheia-JSON-View/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clubside%2FTheia-JSON-View/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clubside%2FTheia-JSON-View/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clubside","download_url":"https://codeload.github.com/clubside/Theia-JSON-View/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248027912,"owners_count":21035680,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["class","json","json-tree","pure-javascript","themable","vanilla-javascript","vanilla-js","viewer"],"created_at":"2024-11-05T16:04:36.690Z","updated_at":"2026-05-04T07:38:37.664Z","avatar_url":"https://github.com/clubside.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Theia JSON View\n\n\u003e Display JSON objects in HTML including **collapsible** navigation.\n\n**[Live Demo](https://clubside.github.io/Theia-JSON-View/)**\n\n## Install\n\nCopy sources from git repository and link the minified file to your HTML document:\n\n```html\n\u003cscript src=\"TheiaJSONView/dist/TheiaJSONView.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nCreate a new instance of the TheiaJSONView class passing it your data and ID of the HTML element in your document to serve as host:\n\n```js\nvar data = {\n  \"foobar\": \"foobaz\"\n}\nvar tjt = new TheiaJSONView(data, 'mydiv')\n```\n\n## API\n\n### `TheiaJSONView([json [, element[, config] ]])`\n\n#### `json` (`Object` or `String`)\n\nThe JSON you want to display. If a string is passed during initialization it will be validated and converted if posible, or an error object will be inserted. Objects and arrays will be accepted as is.\n\n#### `element` (`String`)\n\nThe ID of the element in your HTML document that will contain the control.\n\n#### `config` (`Object`)\n\nDefault:\n\n```js\n{\n  theme: 'default',\n  fontfamily: 'ui-monospace, Menlo, Monaco, \"Cascadia Mono\", \"Segoe UI Mono\", \"Roboto Mono\", \"Oxygen Mono\", \"Ubuntu Monospace\", \"Source Code Pro\", \"Fira Mono\", \"Droid Sans Mono\", \"Courier New\", monospace',\n  fontsize: '1rem',\n  autocollapse: 0,\n  allowcollapse: true,\n  itemcounts: false,\n  itemnumbers: false,\n  rollups: false\n}\n```\n\nAvailable configurations:\n\n| Property | Value |\n| --- | --- |\n| `theme` | a `string` that must be one of these Themes: `['default', 'dark', 'light', 'material']`. |\n| `fontfamily` | a `string` that is a valid CSS `font-family` |\n| `fontsize` | a `string` that is a valid CSS `font-size` |\n| `autocollapse` | a `number` representing how many levels deep to automatically collapse. |\n| `allowcollapse` | a `boolean` that determines whether or not expand/collapse functionality is available to the user. Combined with autocollapse you can restrict how deep the data is visible. |\n| `itemcounts` | a `boolean` that determines whether or not to display the number of children of an array/object. |\n| `itemnumbers` | a `boolean` that determines whether or not to display the item numbers of children as a virtual key. |\n| `rollups` | a `boolean` that determines whether or not to look at child objects for the singular of the parent and use that value as a key. |\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclubside%2Ftheia-json-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclubside%2Ftheia-json-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclubside%2Ftheia-json-view/lists"}