1.0.0-beta.83 • Public • Published

Discovery.js project logo


NPM version Twitter

Hackable JSON discovery tool

Documentation in progress...


Examples of usage

Related projects

  • Discovery CLI – CLI tools to serve & build projects based on Discovery.js
  • JsonDiscovery – Chrome/Firefox browser extension built on Discovery which allows to discover a JSON document and make reports
  • Jora – data query language
  • Jora CLI – a tool to process JSON data using Jora in command line interface



> npm install @discoveryjs/discovery

Base concepts

Model goes through data->prepare->render chain. Data can be modified with prepare function and rendered by various views and its combinations.

View is a function(el, config, data, context) where:

  • el - DOM-element in which view will be rendered
  • config - configuration of view
  • data - data to render
  • context - contains of model data, metaifo (createdAt, etc), router (optional), any user defined or view defined additional data

Page is a root view function(el, data, context). Similar to view it has all of its arguments except config.


To define a page you should call discovery.page.define(pageId, render(el, data, context), options) where:

  • pageId - unique page identifier
  • render - page render function described above
  • options - object with options:
    • reuseEl - do not clear container before render page (skiped for first render or pageId change)
    • init - invokes on first page render or pageId change
    • keepScrollOffset - dont scroll to page top if pageId didn't changed since last page render
    • encodeParams
    • decodeParams

Other handy methods for working with page:

  • discovery.renderPage()
  • discovery.setPage(pageId, pageRef, renderParam), discovery.setPageParams(renderParams) triggers renderPage()
  • discovery.getPageContext() gets context of page

Special pages

There are some built-in special pages:

  • default
  • report
  • not-found

You can override this pages with page.define() method


To define new view just call discovery.view.define(viewId, render, options) where:

  • viewId - unique view identifier
  • render - function(el, config, data, context) or view definition object
  • options - object with following fields:
    • tag - a tag name for a view container element. When value is false or null then DocumentFragment is used as a container

You can render your view with discovery.view.render(el, view, data, context) where:

  • view can be string viewId, ViewDefinition or Array<ViewDefinition> viewId will expand to { view: viewId }.

Also you can specify view as viewId:query, that will give you handy shortcut to { view: viewId, data: query }

  • viewDefinition object with view definition settings:
    • view: string viewId
    • when: query, will be coerced to Boolean (but empty arrays and objects will coerce to false)
    • data: query (will be described later)
    • Also there can be view specific additional fields

Special views

Also special built-in sidebar view is available you can override this view with view.define


As a query you can specify string which will be processed by Jora so your data will be a result of following flow:

jora(value) -> function(data, context) -> data

Or you can use function(data, context) as query as well. Also you can use any data as query right away.






Package Sidebar


npm i @discoveryjs/discovery

Weekly Downloads






Unpacked Size

1.43 MB

Total Files


Last publish


  • lahmatiy
  • smelukov
  • exdis