Interactive molecular visualization with
MolstarViewer,
EditorWithViewer,
and a visual
State Builder
component
0.5.x — Stable Preact-based build. Includes
MolstarViewer and
EditorWithViewer only.
0.6.x — Experimental. Migrated to React and adds the visual
State Builder
and builder-combo components. API may still change.
Using
MolstarViewer from
@molstar/molstar-components. This component
accepts MolViewSpec data as part of its `props` and will
update when that data changes.
Using
EditorWithViewer
from @molstar/molstar-components. This
component combined an Editor with the Viewer above. The
editor evaluate JS code to produce MolViewSpec data
which reactivly updated the Viewer.
Edit code and see live updates (500ms debounce)
Using
BuilderWithViewer
from @molstar/molstar-components. Visual MVS
node tree builder on the left; Molstar viewer on the right.
Click "Generate Code" to update the viewer.
Using
BuilderWithEditorAndViewer
from @molstar/molstar-components. Two-panel
layout: left panel toggles between visual builder and Monaco
editor via tabs; Molstar viewer always visible on the right.