Embedding

Observable Framework documentation: Embedding Source: https://observablehq.com/framework/embeds

In addition to standalone apps, you can use Framework to embed interactive views within other applications. Framework supports multiple approaches to embedding:

• exported modules for seamless integration and performance,
• exported files for hotlinking images, data, and other assets, or
• iframe embeds for compatibility.

Exported modules

Framework allows JavaScript modules to be exported for use in another application. Exported modules are vanilla JavaScript and behave identically in an external web application as on a Framework page. As with local modules, exported modules can load data from a static file or a data loader, import other local modules, and import libraries from npm or JSR.

Exported modules typically define data components: functions that render dynamic content, such as a chart or table, by returning a DOM element. Data components can take options (or “props”), and load any needed data using FileAttachment. For example, the chart.js module below exports a Chart data component that loads a CSV file and renders a responsive scatterplot of global surface temperature.