Documentation

# Introduction

Here you will find tutorials that cover the main features of the viewer. Step by step, you will build a complete viewer example by adding a feature at a time.

# How to start

The code examples on the following tutorials can be used in different way.

The simplest way is to start with the following code (index.html):

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>BIMDataViewer - Tutorials</title>
    <script src="https://cdn.jsdelivr.net/npm/@bimdata/viewer@1.9.3"></script>
  </head>

  <body>
    <div style="height: 100vh">
      <div id="viewerId"></div>
    </div>

    <script>

      /******* INSERT COMPLETE CODE EXAMPLES HERE *******/

    </script>
  </body>
</html>

You just need to have the viewer installed (via CDN) and add a div with an id attribute (e.g. "viewerId"). Then paste the Complete code example sections you will find on the tutorials in the <script> tag above, and open that index.html in a compatible browser.

# Tutorials list

TIP

It is a good idea to do this tutorials in order as code is added to the same file step by step.

# What do I do next?

Once finished, you will have solid knowledge of the main viewer features. The next sections Customize the UI and Develop your plugins covers the respective features in depth and are the logic sequel of these tutorials. You will find features you already saw here with more detailed informations.

← Make your own window layout →