SimpleWrapper + elements

Empty wrapper (will show nothing)

Wrapper with StructureRCSB.svelte

<script lang="ts">
	// replace "$lib/" with "molstar-svelte/" in your project:
	import StructureRCSB from '$lib/elements/StructureRCSB.svelte';
	import MolstarWrapper from '$lib/wrappers/SimpleWrapper.svelte';
	import PDBIdsList from './PDBIdsList.svelte';
	export let pdbIds = ['7D4B', '5WJF', '5WIW', '6A3W'];
	let selectedPdbIds = [...pdbIds];
</script>

<p class="text-xs">
	Selected: <span class="text-violet-500">{selectedPdbIds.join(', ')}</span>
</p>
<MolstarWrapper class="h-96">
	<svelte:fragment slot="inside">
		{#each selectedPdbIds as pdbId (pdbId)}
			<StructureRCSB {pdbId} />
		{/each}
	</svelte:fragment>
</MolstarWrapper>
{#if pdbIds.length > 1}
	<PDBIdsList {pdbIds} bind:selectedPdbIds />
{/if}

PdbID, with one instance

PdbID, with several instances (reactive)

Wrapper with StructureURL.svelte

<script lang="ts">
	// replace "$lib/" with "molstar-svelte/" in your project:
	import StructureURL from '$lib/elements/StructureURL.svelte';
	import MolstarWrapper from '$lib/wrappers/SimpleWrapper.svelte';
	import StructuresURLsList from './StructuresURLsList.svelte';
	export let structuresURLs = [
		{ url: 'https://files.rcsb.org/view/7U4A.pdb', type: 'pdb' },
		{ url: 'https://files.rcsb.org/view/7YLB.pdb', type: 'pdb' },
		{ url: 'https://files.rcsb.org/view/7YUB.cif', type: 'mmcif' },
		{ url: 'https://alphafold.ebi.ac.uk/files/AF-P00533-F1-model_v4.cif', type: 'mmcif' }
	];
	let selectedStructuresURLs = [...structuresURLs];
</script>

<p class="text-xs">
	Selected: <span class="text-violet-500"
		>{selectedStructuresURLs.map((e) => e.url).join(', ')}</span
	>
</p>
<MolstarWrapper class="h-96">
	<svelte:fragment slot="inside">
		{#each selectedStructuresURLs as structureURL (`${structureURL.url}-${structureURL.type}`)}
			<StructureURL url={structureURL.url} type={structureURL.type} />
		{/each}
	</svelte:fragment>
</MolstarWrapper>
{#if structuresURLs.length > 1}
	<StructuresURLsList {structuresURLs} bind:selectedStructuresURLs />
{/if}

URL, with one instance

URL, with several instances (reactive)

(todo: fix this, some problems with the reactive part/each keyed loop)

URLChain one instance

URLChain several instances

(Q07011 structures)