The iTwin Viewer is a configurable iTwin.js viewer that provides the ability to view and interact with iModels. It includes basic capabilities and can be extended with iTwin.js extensions. The iTwin Viewer includes several tools.
- Selection tools to select, hide, and emphasize elements
- Basic measurement tools
- Basic clipping tools
- Basic navigation tools to pan, zoom, and rotate
- Walk tool and camera tool
- Basic tree view and property grid
- Status bar with tool-specific contextual information
You can use Create React App to quickly set up a single page React application to view an iModel. The iTwin Viewer Create React App Template provides a template for Create React App for applications which are based on the iTwin Viewer. The following steps can be used to develop and build the application.
npm command line tool.
- Visual Studio Code is the recommended editor and debugger for iTwin.js applications. VS Code also supplies a graphical user interface for working with Git.
- The VS Code extension Debugger for Chrome can also be quite helpful.
Install the necessary prerequisites.
From a terminal,
npx create-react-app@latest your-app-name --template @itwin/web-viewer --scripts-version @bentley/react-scripts.
This will generate a new application based on the iTwin Viewer React component in the
your-app-namedirectory in VS Code.
Go to https://developer.bentley.com in a web browser.
Click the Sign In button and sign-in using your Bentley account credentials
- If you have not already registered, click Register now and complete the registration process.
- Click on your user icon and navigate to the My Apps page
- Click the Register New button
- Give your application a Name
- Select the Visualization API
- Select application type SPA (Single Page Web Application)
- Enter Redirect URL
- Leave post logout redirect URIs empty.
- Click the Save button
- Once your new application is saved and a clientId is generated, add the clientId, list of scopes, and redirect url to the following variables in the .env file within the application's root directory:
- Add a valid projectId and iModelId for your user to the
IMJS_IMODEL_IDvariables in the same .env file. You can obtain the ids using the Projects and iModels REST APIs.
- From a terminal at your application's root directory,
npm start. This will serve the application with live reloading.
- Add/Update/Remove files as needed for your use case. If running
npm startwhile making changes, your application should re-compile and reload.
- The viewer can be modified via the Viewer component in the App.tsx file. Visit the iTwin Viewer React documentation for more information.
- Review the README.md file in the root directory of your application for additional development information.
From a terminal at your application's root directory,
npm run build. This will create a deployment-ready build in the "build" folder within the application's root directory. It is not necessary to build the application during development.
Each extension is its own separate bundle that has access to all iTwin.js shared libraries to enable seamless integration with the host app. Extensions can be used to expand the behavior of iTwin Viewer to support your custom workflows. The iTwin.js SDK includes more information about creating iTwin.js extensions.