# Basic Example
Let's explore the most basic Speckle viewer example, step-by-step.
Before we can do anything, we'll need a HTML container for the viewer.
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<div id="renderer">
...
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
First thing we want to do is to create and initialize a viewer instance.
/** Get the HTML container */
const container = document.getElementById("renderer");
/** Create Viewer instance */
const viewer = new Viewer(container);
/** Initialise the viewer */
await viewer.init();
1
2
3
4
5
6
7
2
3
4
5
6
7
Next, let's add a camera controller so we have control over the camera.
/** Add the stock camera controller extension */
viewer.createExtension(CameraController);
1
2
2
Finally, let's load in some data from a Speckle model.
/** Create a loader for the speckle stream */
const resource =
"https://latest.speckle.dev/streams/c43ac05d04/objects/d807f3888a400dbd814529fafd8ccac0";
const loader = new SpeckleLoader(viewer.getWorldTree(), resource, "");
/** Load the speckle data */
await viewer.loadObject(loader, true);
1
2
3
4
5
6
7
2
3
4
5
6
7
Here is the end result: