This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
JSON viewer for elm apps
version 2.1.1
license ISC
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 2.1.1
Committed At 2018-07-07 22:43:23 UTC
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.0.0 <= v < 6.0.0 5.1.1
1602/json-value 2.0.0 <= v < 3.0.0 2.0.0




JSON value viewer. Demo.

When to use this module


Alternative to state debugger. In case if you want to see a value, but don't want to write decoder and presentation.

Presentation of unknown data structures

In the times of continuous delivery we often encounter unknown data structures even on production (think of rich error details object, which may contain information about the context of an error).


  • [x] standard init-update-view API
  • [x] expand/collapse of nested values (object, array)
  • [x] preview of expandable values
  • [x] visual highlight of some JSON values (number, string, null, boolean)
  • [x] custom element <json-viewer value='{ "foo": "bar" }'></json-viewer>
  • [x] preview of object/array with values for collapsed nodes

Upcoming features

  • [ ] highlight space characters (tab, newline, etc..)
  • [ ] display hidden unicode characters
  • [ ] configurable pagination for long arrays
  • [ ] node operation (copy to clipboard, save as file, etc..)
  • [ ] configurable expandable view of long strings
  • [ ] configurable preview of media data


There are two ways of using this component:

  • as custom element (using web-components API)
  • as elm library

Custom element

  1. Register custom element
<script src="//"></script>
  1. Use in your code, as html
<json-viewer value='{ "foo": "bar" }'></json-viewer>

Currently there's only one attribute supported: value which should be a valid JSON value, more attributes will be added in future releases in order to support additional feature, such as copying node to clipboard. See demo of web-component usage.

Elm library

  1. Install dependency
elm-package install 1602/json-viewer
  1. Use in your code, as elm component. This component uses standard init-update-view cycle. Check API documentation for examples of usage.