MetaES

VanillinDoc is a web based UI tookit to explore users' data. In its architecture VanillinDoc follows bottom-top philosophy when simple in mind parts are composed upwards creating UIs users want to use - from single widget to organized dashboard or panel.

Main features:

Render and explore your data immediately.

If your data is expressed in JSON - and very likely it already is or easily can be - that's all you need to start.
Render data on top of your existing page, there's no need for creating full application - yet possible when needed.
Use extendable spreadsheet as a base for tabular data.

If your data is a 2x2 grid (array), it will be automatically recognized and rendered as table.

Tables are rendered lazily to spare CPU time and keep webpage responsive. Tables can contain any shape of data with any level of depth, because they are just HTML.
Use automatic forms for organized data manipulation.

For convenient edits there are provided forms which can be generated by recognizing data shape on the fly.

They support several typical widgets and it's easy to add custom ones.
Render large amounts of data points at the same time with high performance.

To quickly get insights about data layout simply use existing JSON files as they are with no tooling - that's enought for a quick start.

Your data can be rendered with GPU using WebGL which can be much faster in many cases than HTML and DOM.

Hint: drag&drop handle on JSON view. Click on JSON part to start rendering it in the DOM.
Scroll up and down to zoom in and zoom out.

Example: Render random items.
Progressively render long datasets.

VanillinDoc (and Vanillin) automatically renders data in a lazy stream that can be stopped and resumed - which mean huge amounts of data will not kill your browser performance.

In this example each block gets 16ms to render as much as it can in that timebox and then rendering is suspended. It's resumed when user clicks on the block.
Contextually dig into data - recursively.

VanillinDoc uses JavaScript to explore data - you can freely dig in and change, extract, filter, calculate to the degree JavaScript with MetaES allows. Which is more than sufficient for most cases.
Search anything.

Because all data in VanillinDoc is eventually JSON - searching through data is like searching through JSON text file. Which is easy.

Click to show example
Gradually create specialized UI components.

Once you understand your data better, you can start creating bespoke components for specific data elements. And then immediabely display them as a part of bigger picture.
Predesigned integrated view.

When want more integrated environment than simple set of loosely connected components - it's convenient to pick systematic user interface. It allows to compose views with different sets of data and browse them using modern UI elements like tabs, sidebars, grids and more.

How it works:

Robust

VanillinDoc follows Robustness principle - VanillinDoc components accept all the data you pass to them, but will render in an uniformed way. More fine grained details you pass, the more detailed visual output will be.
Components

Predefined UI elements for typical use-cases.
Changes propagation

No need for manual data orchestration - directly change your data with JavaScript to change UI:

VanillinDoc

Main features:

Render and explore your data immediately.

How it works:

Components

Changes propagation