diff --git a/readme.md b/readme.md
index b9f6738..008e6d7 100644
--- a/readme.md
+++ b/readme.md
@@ -45,6 +45,7 @@ npm run watch
## Examples and SandBoxes
- Selections
- [Ligand with surrounding](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/selection/select_ligand_and_surroundings)
+ - [Language Selections](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/selection/select_from_language)
- Representation
- [Create representations](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/representation/create_representations)
- [Set transparency on selection](https://codesandbox.io/p/sandbox/github/molstar/example-gallery/master/representation/transparency_using_selection)
diff --git a/selection/select_from_language/index.html b/selection/select_from_language/index.html
new file mode 100644
index 0000000..7c0b7b5
--- /dev/null
+++ b/selection/select_from_language/index.html
@@ -0,0 +1,14 @@
+
+
+ Mol* Gallery
+
+
+
+
+
+
+
+
+
+
+
diff --git a/selection/select_from_language/package.json b/selection/select_from_language/package.json
new file mode 100644
index 0000000..e58ba21
--- /dev/null
+++ b/selection/select_from_language/package.json
@@ -0,0 +1,24 @@
+{
+ "name": "molstar-typescript-example",
+ "version": "1.0.0",
+ "description": "Molstar and TypeScript example starter project",
+ "main": "index.html",
+ "scripts": {
+ "start": "parcel index.html",
+ "build": "parcel build index.html"
+ },
+ "dependencies": {
+ "parcel-bundler": "1.12.5",
+ "molstar": "4.3.0"
+ },
+ "devDependencies": {
+ "typescript": "4.4.4"
+ },
+ "resolutions": {
+ "@babel/preset-env": "7.13.8"
+ },
+ "keywords": [
+ "typescript",
+ "molstar"
+ ]
+ }
\ No newline at end of file
diff --git a/selection/select_from_language/src/common/init.ts b/selection/select_from_language/src/common/init.ts
new file mode 100644
index 0000000..3b5dbaa
--- /dev/null
+++ b/selection/select_from_language/src/common/init.ts
@@ -0,0 +1,19 @@
+import { PluginContext } from "molstar/lib/mol-plugin/context";
+import { DefaultPluginSpec } from "molstar/lib/mol-plugin/spec";
+
+export async function createRootViewer() {
+ const viewport = document.getElementById("app") as HTMLDivElement;
+ const canvas = document.getElementById("canvas") as HTMLCanvasElement;
+
+ const plugin = new PluginContext(DefaultPluginSpec());
+ await plugin.init();
+
+ if (!plugin.initViewer(canvas, viewport)) {
+ viewport.innerHTML = "Failed to init Mol*";
+ throw new Error("init failed");
+ }
+ //@ts-ignore
+ window["molstar"] = plugin;
+
+ return plugin;
+}
diff --git a/selection/select_from_language/src/index.ts b/selection/select_from_language/src/index.ts
new file mode 100644
index 0000000..b9c1b48
--- /dev/null
+++ b/selection/select_from_language/src/index.ts
@@ -0,0 +1,62 @@
+import { Queries, QueryContext, StructureProperties, StructureSelection } from "molstar/lib/mol-model/structure";
+import { createRootViewer } from "./common/init";
+import { setStructureOverpaint } from "molstar/lib/mol-plugin-state/helpers/structure-overpaint";
+import {Script} from "molstar/lib/mol-script/script";
+import { StructureSelectionQuery } from "molstar/lib/mol-plugin-state/helpers/structure-selection-query";
+import { Color } from "molstar/lib/mol-util/color";
+
+async function init() {
+ // Create viewer
+ const plugin = await createRootViewer();
+
+ // Download PDB
+ const fileData = await plugin.builders.data.download(
+ { url: "https://models.rcsb.org/4hhb.bcif", isBinary: true }
+ );
+
+ // Load PDB and create representation
+ const trajectory = await plugin.builders.structure.parseTrajectory(fileData, "mmcif");
+ const presetStateObjects = await plugin.builders.structure.hierarchy.applyPreset(trajectory, "default");
+
+ if (!presetStateObjects) {
+ throw new Error("Structure not loaded");
+ }
+
+ // Get Structure object from the structure stateObject selector.
+ // The Structure object contains properties and accessors to the underlying molecular data such as chains, residues, atoms, etc.
+ const struct = presetStateObjects.structure.data!;
+
+ // Get the StructureRef object from the Structure object. The StructureRef object is the
+ // part of the state that represents the structure. We use it to access the structure's components
+ // generated from the default preset.
+ const structRef = plugin.managers.structure.hierarchy.findStructure(struct)!;
+
+ // Here we build 3 scripts using PyMOL, VMD, and JMOL
+ const pymolScript = Script('chain A and hetatm', 'pymol'); // Select HETATM and chain A with PyMOL
+ const vmdScript = Script('chain B and hetero', 'vmd'); // Select HETATM and chain B with VMD
+ const jmolScript = Script(':C and hetero', 'jmol'); // Select HETATM and chain C with Jmol
+
+ // Highlight each of the selections with a different color
+ const selectionColors = [
+ {// PyMOL
+ color: Color(0xff0000),
+ script: pymolScript
+ },
+ { // VMD
+ color: Color(0x00ff00),
+ script: vmdScript
+ },
+ { // Jmol
+ color: Color(0x0000ff),
+ script: jmolScript
+ }
+ ];
+ for (const {color, script} of selectionColors) {
+ // Convert the script to a Loci object on the current structure
+ const loci = Script.toLoci(script, struct);
+ // Use the setStructureOverpaint helper to highlight the selection with the specified color
+ // Need to use await otherwise only the latest overpaint will be applied
+ await setStructureOverpaint(plugin, structRef.components, color, async (s) => loci);
+ }
+}
+init();
\ No newline at end of file
diff --git a/selection/select_from_language/tsconfig.json b/selection/select_from_language/tsconfig.json
new file mode 100644
index 0000000..cbf7936
--- /dev/null
+++ b/selection/select_from_language/tsconfig.json
@@ -0,0 +1,16 @@
+{
+ "compilerOptions": {
+ "strict": true,
+ "module": "commonjs",
+ "jsx": "preserve",
+ "esModuleInterop": true,
+ "sourceMap": true,
+ "allowJs": true,
+ "lib": [
+ "es6",
+ "dom"
+ ],
+ "rootDir": "src",
+ "moduleResolution": "node"
+ }
+ }
\ No newline at end of file