Published in


The iTwin Viewer

By Kevin Krisfalusy

The What

The iTwin Viewer is an iModel.js viewer that contains basic functionality for navigation, element selection, and measuring/clipping, as well as a basic tree view and property grid out-of-the-box.

It can be extended with additional functionality via iModel.js Extensions.

The Why

iModel.js contains a full featured framework for rendering models in the browser. The cost of providing such a robust framework, however, is increased complexity and startup time for new applications.

The iTwin Viewer simplifies the process of adding an iModel.js viewer to a new or existing application and decreases the amount of time that would be required to get “up and running”. In the iTwin Viewer, much of the boilerplate that is required to initialize iModel.js is abstracted away or parameterized in a single API.

The How

React Component

For most users, the simplest way to add the iTwin Viewer is to import the Viewer component from the NPM package.

Typescript API

For users who are importing Node modules in their application, but are not familiar with React, the Typescript API can be used directly.

NOTE: The iTwin Viewer still has a dependency on React in this case (it contains React components internally). The user is just not required to write React code.

Javascript API

Coming soon….If you do not wish to use Node modules and/or a build tool such as Webpack to compile your application, the iTwin Viewer API will be able to be consumed from a CDN. This will allow you to add the files to your application via script and style tags and use the Javascript API globally.





Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store