Basics
The Viewer is a client-side JavaScript library for 2D and 3D model rendering. It supports viewing a wide variety of 2D and 3D model file formats by first translating to SVF using the Model Derivative API.
With the help of the Model Derivative API, developers can upload their design files (also called “seed files”) and have them translated into the appropriate format. Once the process has completed, the Viewer will be able to consume these translated files.

Terminology
Term | Definition |
---|---|
seed file | the original model file that you want to visualize in the Viewer |
manifest | the result of the translation process, a structured
collection of resources (e.g., model geometry,
thumbnails, camera views) used by the Viewer
Get a manifest using the GET :urn/manifest endpoint.
The Viewer can only render viewables.
|
access token | An access token (sometimes just “token” or “bearer token”) is returned at the end of a successful
authentication flow.
It is required that tokens for the Viewer have scope
viewables:read .For more information, see the Authentication API Basics and Scopes sections.
|
viewable | either a 3D model or a 2D sheet referenced by the manifest |
headless | the Viewer without UI elements; only the 3D render canvas |
measure | feature for measuring distances in the rendered geometry |
markup | feature for annotating viewables |
section(ing) | feature for cutting 3D models and see inside of them |
search | feature for searching the viewable’s metadata, also called “property database” |
property database | metadata associated with a viewable and its parts; may contains metadata for each geometry node |
geometry node | a selectable entity in the viewable |
extensions | JavaScript code that extends or modifies the Viewer’s
behavior
Some extensions are bundled with the Viewer, and developers
can write their own.
|
Check out our Field Guide for additional terms related to the JavaScript library.
Getting the Code
Latest
Get started by including the latest Viewer library and stylesheet from Autodesk’s CDN. Note that the default URL shown here will always obtain the latest version. The next section provides additional information about obtaining specific versions.
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css" type="text/css">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js"></script>
Version-specific
Instead, we strongly recommend that for web applications deployed to production, you specify the version of the Viewer code to include.
Visit the Recent Changes page to see the list of available versions.
For example, to request the latest 6.x version, use the following URL:
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/6.*/style.min.css" type="text/css">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/6.*/viewer3D.min.js"></script>
Developers can validate that the correct version of the code has been fetched by checking the value of the global variable LMV_VIEWER_VERSION
.
A version range can be specified, to allow your application to fetch the latest non-breaking version of the Viewer.
Version Range | URL value | URL Example |
---|---|---|
^6.0.0 |
6.* |
/modelderivative/v2/viewers/6.*/viewer3D.min.js |
~6.1.0 |
6.1 |
/modelderivative/v2/viewers/6.1/viewer3D.min.js |
6.1.2 |
6.1.2 |
/modelderivative/v2/viewers/6.1.2/viewer3D.min.js |
By specifying a version range, your application will stay up to date with the latest Viewer hotfixes.
Loading a Design File
The translation of a seed file using the Model Derivative API is identified by a uniform resource name (URN). Provide this URN to the Viewer, and it will fetch all additional resources required to render the scene.
Check out the Step-by-Step Tutorials to see how to use the URN to load a particular design file.
A 3D Design

At the bottom, there is the default toolbar UI. In the top right you’ll find the ViewCube, a tool that helps orienting the camera view on the model.
A 2D Design

The default toolbar is also available when viewing 2D models. Some of the toolbar buttons are unique to the whether the model is 2D or 3D. For example, the section and explode features are only available in 3D models.
The ViewCube will not be visible when viewing 2D models.