HTML Embeddable
Export WLJS notebook cells as framework-agnostic HTML web components for embedding interactive plots, graphics, and widgets in any webpage.
This export option converts notebook cells into HTML web components and associated assets, making it easy to embed them in a webpage, such as your blog post or note.
Call Share from the top menu or click the icon and choose HTML Embeddable:
Use cases
- Embed notebook cells in a blog post or webpage
- Share your work on the internet with interactive components
Embeddable WLJS cells provide the same features as the standard HTML export option, including:
Features
- Lazy Loading - Components and dependencies load progressively, showing meaningful raw content while loading
- Graceful Degradation - Users with JavaScript disabled still see readable code and expressions
- Interactive Content - 2D/3D graphics, plots, manipulatable widgets, and more
- CDN-Ready - Single script import; all dependencies load automatically
- No Build Step - Ready to use immediately after export
- Framework Agnostic - Life cycle managed automatically using native web components compatible with any modern web framework
Generated HTML and bootstrap
Narrative cells are exported as standard HTML. Code cells and their visible output are preserved in wljs-editor custom elements, so their source remains readable before JavaScript loads and when JavaScript is disabled:
<wljs-editor display="codemirror" type="Input">
<xmp>Plot[Sin[x], {x, 0, 2 Pi}]</xmp>
</wljs-editor>Load the framework-agnostic bootstrap once on the page to activate highlighting and supported interactive output:
<script
type="module"
src="https://cdn.jsdelivr.net/gh/WLJSTeam/web-components@latest/src/common/app.js"
></script>To self-host the bootstrap and its assets, choose Share – HTML Embeddable – Bootstrap and publish the exported package with your site.
Export Options
For detailed export options and modes (Static, Interactive, etc.), see the HTML file export documentation.
How to Use
After exporting, you'll receive a folder containing HTML components and assets. Simply include the provided script in your webpage and use the custom web components. For detailed integration instructions and examples, see:
wljsteam/web-components
0