> ## Documentation Index
> Fetch the complete documentation index at: https://docs.speckle.systems/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> These docs contain multiple Speckle product experiences. For Speckle 2026.9, prefer /next/ pages for the topics and changes they cover. The navigation label Current does not override this version-specific precedence.
> Coverage under /next/ is incremental. Use Current documentation for unchanged topics and when a /next/ page says coverage is unavailable or explicitly refers you to Current. Do not infer a feature was removed from a missing page.
> Read the page-specific documentation status, applicability, affected guidance and replacement links in agent-only content. Impacted, changed and superseded apply only to the stated scope; they do not mean the entire feature is deprecated. Historical connector guides apply only to the legacy connector described.
> Match guidance to the customer's deployment version, model data format and connector. Respect plan, permission and compatibility restrictions. If an unknown version or data format changes the answer, ask a focused clarification; do not infer deployment version from the date alone.

# 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.

```html Basic Example theme={null}
<!DOCTYPE html>
<html>
  <head>
    ...
  </head>

  <body>
    ...
    <div id="renderer">
    ...
  </body>
</html>
```

First thing we want to do is to create and initialize a viewer instance.

```typescript theme={null}
/** Get the HTML container */
const container = document.getElementById('renderer')

/** Create Viewer instance */
const viewer = new Viewer(container)
/** Initialise the viewer */
await viewer.init()
```

Next, let's add a camera controller so we have control over the camera.

```typescript theme={null}
/** Add the stock camera controller extension */
viewer.createExtension(CameraController)
```

Finally, let's load in some data from a Speckle model. It's easier to use the provided `UrlHelper` which knows how to parse various speckle URL formats

```typescript theme={null}
/** Create a loader for the speckle stream */
const urls = await UrlHelper.getResourceUrls(
  'https://app.speckle.systems/projects/24c98619ac/models/38639656b8'
)
for (const url of urls) {
  const loader = new SpeckleLoader(viewer.getWorldTree(), url, '')
  /** Load the speckle data */
  await viewer.loadObject(loader, true)
}
```

<Frame caption="Basic Example">
  <iframe src="https://stackblitz.com/edit/speckle-basic-setup?embed=1&file=src/main.ts&view=preview&hideExplorer=true&hideNavigation=true" height="500" style={{ width: '100%', border: 0 }} allowFullScreen />
</Frame>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.