diff --git a/src/apps/viewer/index.ts b/src/apps/viewer/index.ts
index 9b8943b41114fc5401d18dac930cfe55123000a9..cc87379f4d1618ed74c9fa53f69be60756a6e27f 100644
--- a/src/apps/viewer/index.ts
+++ b/src/apps/viewer/index.ts
@@ -23,6 +23,7 @@ import { ObjectKeys } from '../../mol-util/type-helpers';
 import { PluginState } from '../../mol-plugin/state';
 import { DownloadDensity } from '../../mol-plugin-state/actions/volume';
 import { PluginLayoutControlsDisplay } from '../../mol-plugin/layout';
+import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
 
 require('mol-plugin-ui/skin/light.scss');
 
@@ -59,7 +60,7 @@ type ViewerOptions = typeof DefaultViewerOptions;
 export class Viewer {
     plugin: PluginContext
 
-    constructor(elementId: string, options: Partial<ViewerOptions> = {}) {
+    constructor(elementOrId: string | HTMLElement, options: Partial<ViewerOptions> = {}) {
         const o = { ...DefaultViewerOptions, ...options };
 
         const spec: PluginSpec = {
@@ -99,21 +100,23 @@ export class Viewer {
             ]
         };
 
-        const element = document.getElementById(elementId);
-        if (!element) throw new Error(`Could not get element with id '${elementId}'`);
+        const element = typeof elementOrId === 'string'
+            ? document.getElementById(elementOrId)
+            : elementOrId;
+        if (!element) throw new Error(`Could not get element with id '${elementOrId}'`);
         this.plugin = createPlugin(element, spec);
     }
 
-    async setRemoteSnapshot(id: string) {
+    setRemoteSnapshot(id: string) {
         const url = `${this.plugin.config.get(PluginConfig.State.CurrentServer)}/get/${id}`;
-        await PluginCommands.State.Snapshots.Fetch(this.plugin, { url });
+        return PluginCommands.State.Snapshots.Fetch(this.plugin, { url });
     }
 
-    async loadSnapshotFromUrl(url: string, type: PluginState.SnapshotType) {
-        await PluginCommands.State.Snapshots.OpenUrl(this.plugin, { url, type });
+    loadSnapshotFromUrl(url: string, type: PluginState.SnapshotType) {
+        return PluginCommands.State.Snapshots.OpenUrl(this.plugin, { url, type });
     }
 
-    async loadStructureFromUrl(url: string, format = 'cif', isBinary = false) {
+    loadStructureFromUrl(url: string, format: BuiltInTrajectoryFormat = 'mmcif', isBinary = false) {
         const params = DownloadStructure.createDefaultParams(this.plugin.state.data.root.obj!, this.plugin);
         return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
             source: {
@@ -128,7 +131,13 @@ export class Viewer {
         }));
     }
 
-    async loadPdb(pdb: string) {
+    async loadStructureFromData(data: string | number[], format: BuiltInTrajectoryFormat, options?: { dataLabel?: string }) {
+        const _data = await this.plugin.builders.data.rawData({ data, label: options?.dataLabel });
+        const trajectory = await this.plugin.builders.structure.parseTrajectory(_data, format);
+        await this.plugin.builders.structure.hierarchy.applyPreset(trajectory, 'default');
+    }
+
+    loadPdb(pdb: string) {
         const params = DownloadStructure.createDefaultParams(this.plugin.state.data.root.obj!, this.plugin);
         const provider = this.plugin.config.get(PluginConfig.Download.DefaultPdbProvider)!;
         return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
@@ -148,7 +157,7 @@ export class Viewer {
         }));
     }
 
-    async loadPdbDev(pdbDev: string) {
+    loadPdbDev(pdbDev: string) {
         const params = DownloadStructure.createDefaultParams(this.plugin.state.data.root.obj!, this.plugin);
         return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
             source: {
@@ -164,7 +173,7 @@ export class Viewer {
         }));
     }
 
-    async loadEmdb(emdb: string) {
+    loadEmdb(emdb: string) {
         const provider = this.plugin.config.get(PluginConfig.Download.DefaultEmdbProvider)!;
         return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadDensity, {
             source: {