squiggle/packages/website/docs/Internal/ImportIntoMdx.mdx

---
title: How to import squiggle files into `.mdx` documents
sidebar_position: 5
---

:::caution Proof of concept

The following usage pattern is currently broken. We expect to bring it back in some form in 0.5.1 or 0.5.2 release.

:::

## Consider the following squiggle file

In our docusaurus repo, we have a static asset called `demo.squiggle`. It looks like this

```js
x = 1 to 2
y = {a: x, b: 1e1}
f(t) = normal(t, 1.1)
z = y.b * y.a
```

We can call `f(z)` upon the assignments in `demo.squiggle` like so:

```jsx
import { SquiggleEditorWithImportedBindings } from "../../src/components/SquiggleEditor";

<SquiggleEditorWithImportedBindings
  defaultCode={"f(z)"}
  bindingsImportFile={"/estimates/demo.squiggle"}
/>;
```

Notice, you need to wrap the export of `@quri/squiggle-components` in custom code for dynamicism, please view `packages/website/src/components/` in github for details.