CIFPlayer

The CIFPlayer component allows you to embed the interactive crystal structure viewer directly into your Svelte application. This is useful for visualizing the crystal structure formats CIF, POSCAR, and Optimade in scientific and educational projects.

Usage

<CIFPlayer data={initialData} />

<script>
    import { CIFPlayer } from 'svelte-spectre';
    let initialData = `...`; // your crystal structure
</script>

Features

  • Embeds the crystal structure viewer via an iframe
  • Responsive width and fixed height (customizable)
  • Accepts structure data as a prop and sends it to the viewer on load

Note: The viewer is loaded from an external website https://nanoshow.mpds.io. Ensure your users have internet access to use this feature.

Example


© 2021 — 2026 BASF SE and Materials Platform for Data Science OÜ

API CIFPlayer

data: String
Show initial structure
data: string (data to visualize, sent to the viewer on load)