@advanced-rest-client/json-viewer
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.4 • Public • Published

    Published on NPM

    Build Status

    Published on webcomponents.org

    <json-viewer>

    ARC JSON payload (HTTP response) viewer.

    <json-viewer json="..."></json-viewer>

    API components

    This components is a part of API components ecosystem

    Usage

    Installation

    npm install --save @advanced-rest-client/json-viewer
    

    In an html file

    <html>
      <head>
        <script type="module">
          import '@advanced-rest-client/json-viewer/json-viewer.js';
        </script> 
      </head>
      <body>
        <json-viewer json="..."></json-viewer>
      </body>
    </html>

    In a LitElement

    import { LitElement, html } from 'lit-element';
    import '@advanced-rest-client/json-viewer/json-viewer.js';
     
    class SampleElement extends PolymerElement {
      render() {
        return html`
        <json-viewer .json="${this.json}"></json-viewer>
        `;
      }
    }
    customElements.define('sample-element', SampleElement);

    In a Polymer 3 element

    import {PolymerElement, html} from '@polymer/polymer';
    import '@advanced-rest-client/json-viewer/json-viewer.js';
     
    class SampleElement extends PolymerElement {
      static get template() {
        return html`
        <json-viewer json="[[json]]"></json-viewer>
        `;
      }
    }
    customElements.define('sample-element', SampleElement);

    Big numbers in JavaScript

    This element marks all numbers that are above Number.MAX_SAFE_INTEGER value and locates the numeric value in source json if passed json was a string or when raw attribute was set. In this case it will display a warning and explanation about use of big numbers in JavaScript. See js-max-number-error element documentation for more information.

    Content actions

    The element can render a actions pane above the code view. Action pane is to display content actions that is relevan in context of the response displayed below the icon buttons. It should be icon buttons or just buttons added to this view.

    Buttons needs to have content-action property set to be included to this view.

    <json-viewer json='{"json": "test"}'>
      <paper-icon-button content-action title="Copy content to clipboard" icon="arc:content-copy"></paper-icon-button>
    </json-viewer>
    

    Installation

    git clone https://github.com/advanced-rest-client/json-viewer
    cd json-viewer
    npm install

    Running the demo locally

    npm start

    Running the tests

    npm test

    Install

    npm i @advanced-rest-client/json-viewer

    DownloadsWeekly Downloads

    150

    Version

    3.1.4

    License

    Apache-2.0

    Unpacked Size

    74.9 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar