Treedoc-viewer NPM

Treedoc Viewer

A feature-rich viewer for Treedoc implemented with VueJS and typescript. Treedoc is an abstraction for all the tree-structured document formats such as JSON, YAML, XML. This viewer has built-in support of JSON/JSONex, YAML and XML. It provides an easy way to plugin any other format by implementing the ParserPlugin interface.

Features

Three views: Source, Tree and Table and they are toggleable
Flexible navigation
- Back/forward navigation between tree nodes
- Support breadcrumb view of the node path for easy navigation to parent nodes
- Navigation through $ref node as defined in OpenAPI or Google Discovery Service
- Navigation is synchronized between tree view and table view
Treeview
- Support expand / collapse one level or all levels.
- Tree is also embedded in table views
Table view (Based on vue2-datatable-component)
- Expand attributes for the child nodes as table columns
- Support column filtering and sorting
- Support pagination
- Support column selection
Source View (Based on CodeMirror)
- Syntax source highlighting
- Synchronized highlighting in the source code when navigating through nodes
Support multiple file formats
- different sources of the document: open local file, open URL or copy/paste
- Auto-detect format to choose the right parser
- Buildin Support following formats
  - JSONex format (extension of JSON) (Based on treedoc)
  - text protobuf which is support by JSONex parser
  - Custom format such as java Map.toString, java Lombok.toString
  - Prometheus text format.
  - csv, tsv, ssv (space-separated values)
  - XML, Compact XML
  - YAML, include multiple document format
- Plugable parser, so that more format can be easily added.
Implemented as VueJS component, so it's easy to be reused in different applications

Usage

As a Vue component

yarn add treedoc-viewer

// main.js
import TreedocViewer from 'treedoc-viewer'

Vue.use(TreedocViewer);

In public/index.html

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

In component template

<json-tree-table :data='jsonData'>

As embedded iframe

If you are not using VueJs or don't want to introduce heavy dependencies, you can use embedded mode either through iframe or open a new window (tab)

<iframe id='tdvFrame' src="https://www.treedoc.org?embeddedId=tdv_1" width="100%" height="100%"></iframe>
<script>
  function setJttData(target, data) {
    target.postMessage({type:'tdv-setData', data}, '*');
  }
  setTimeout(() => setJttData(frame, {message:"after timeout"}), 1000);
</script>

For a working example, please refer to sample/embedded.html in github repo.