# Basic Setup
The first thing you'll need is a container for the viewer and a javascript (opens new window)/typescript (opens new window) script which will run the viewer code.
We'll create a simple HTML and a simple typescript file
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="renderer" style="width:100%;height:100%;left:0px;top:0px;position:absolute" />
<script src="src/index.ts"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Now save this HTML snippet as index.html
Next we'll create the typescript file:
import {
Viewer,
DefaultViewerParams,
SpeckleLoader,
UrlHelper,
} from "@speckle/viewer";
import { CameraController, SelectionExtension } from "@speckle/viewer";
async function main() {
/** Get the HTML container */
const container = document.getElementById("renderer");
/** Configure the viewer params */
const params = DefaultViewerParams;
params.showStats = true;
params.verbose = true;
/** Create Viewer instance */
const viewer = new Viewer(container, params);
/** Initialise the viewer */
await viewer.init();
/** Add the stock camera controller extension */
viewer.createExtension(CameraController);
/** Add the selection extension for extra interactivity */
viewer.createExtension(SelectionExtension);
/** Create a loader for the speckle stream */
const urls = await UrlHelper.getResourceUrls(
"https://app.speckle.systems/projects/7591c56179/models/32213f5381"
);
for (const url of urls) {
const loader = new SpeckleLoader(viewer.getWorldTree(), url, "");
/** Load the speckle data */
await viewer.loadObject(loader, true);
}
}
main();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
Now save this typescript snippet asindex.ts
You can run the example live here (opens new window) or