diff --git a/src/apps/canvas/app.ts b/src/apps/canvas/app.ts
index 9aeeccf00a3c9a622834b2372c37c854d62eef24..af974f06c57097f5051fc13ab0976574fbbc4f4d 100644
--- a/src/apps/canvas/app.ts
+++ b/src/apps/canvas/app.ts
@@ -38,15 +38,17 @@ export class App {
         this.pdbIdLoaded.next(this.structureView)
     }
 
-    async loadPdbId(id: string, assemblyId?: string) {
-        if (this.structureView) this.structureView.destroy()
-        const cif = await getCifFromUrl(`https://files.rcsb.org/download/${id}.cif`)
-        this.loadCif(cif, assemblyId)
+    async loadPdbIdOrUrl(idOrUrl: string, options?: { assemblyId?: string, binary?: boolean }) {
+        if (this.structureView) this.structureView.destroy();
+        const url = idOrUrl.length <= 4 ? `https://files.rcsb.org/download/${idOrUrl}.cif` : idOrUrl;
+        const cif = await getCifFromUrl(url, options ? !!options.binary : false)
+        this.loadCif(cif, options ? options.assemblyId : void 0)
     }
 
     async loadCifFile(file: File) {
-        if (this.structureView) this.structureView.destroy()
-        const cif = await getCifFromFile(file)
+        if (this.structureView) this.structureView.destroy();
+        const binary = /\.bcif$/.test(file.name);
+        const cif = await getCifFromFile(file, binary)
         this.loadCif(cif)
     }
 }
\ No newline at end of file
diff --git a/src/apps/canvas/component/app.tsx b/src/apps/canvas/component/app.tsx
index c1d099b6a7e3e5d77e38a14040e21dbce3ebb4d8..ec4cb9be232c8d9ec90236f2a346b815155734c3 100644
--- a/src/apps/canvas/component/app.tsx
+++ b/src/apps/canvas/component/app.tsx
@@ -16,12 +16,14 @@ export interface AppProps {
 }
 
 export interface AppState {
-    structureView: StructureView | null
+    structureView: StructureView | null,
+    binary: boolean
 }
 
 export class AppComponent extends React.Component<AppProps, AppState> {
     state = {
         structureView: this.props.app.structureView,
+        binary: false
     }
 
     componentDidMount() {
@@ -42,14 +44,16 @@ export class AppComponent extends React.Component<AppProps, AppState> {
 
             <div style={{width: '330px', paddingLeft: '10px', paddingRight: '10px', right: '0px', height: '100%', position: 'absolute', overflow: 'auto'}}>
                 <div style={{marginTop: '10px'}}>
-                    <span>Load PDB ID </span>
+                    <span>Load PDB ID or URL</span>&nbsp;&nbsp;
+                    <input type='checkbox' checked={this.state.binary} onChange={e => this.setState({ binary: e.target.checked })} /> Binary<br />
                     <input
+                        style={{ width: '100%' }}
                         type='text'
                         onKeyDown={e => {
                             if (e.keyCode === 13) {
                                 const value = e.currentTarget.value.trim()
                                 if (value) {
-                                    this.props.app.loadPdbId(value)
+                                    this.props.app.loadPdbIdOrUrl(value, { binary: this.state.binary })
                                 }
                             }
                         }}
@@ -70,7 +74,7 @@ export class AppComponent extends React.Component<AppProps, AppState> {
                     <select
                         style={{width: '200px'}}
                         onChange={e => {
-                            this.props.app.loadPdbId(e.target.value)
+                            this.props.app.loadPdbIdOrUrl(e.target.value)
                         }}
                     >
                         <option value=''></option>
diff --git a/src/apps/canvas/index.ts b/src/apps/canvas/index.ts
index 0c110a8856d8a28fa1a44b277c49c3727cab9222..05ec4d3732a6e6f1dd3fec80a97770580008d7b7 100644
--- a/src/apps/canvas/index.ts
+++ b/src/apps/canvas/index.ts
@@ -21,4 +21,4 @@ ReactDOM.render(React.createElement(AppComponent, { app }), elm);
 
 const assemblyId = urlQueryParameter('assembly')
 const pdbId = urlQueryParameter('pdb')
-if (pdbId) app.loadPdbId(pdbId, assemblyId)
\ No newline at end of file
+if (pdbId) app.loadPdbIdOrUrl(pdbId, { assemblyId })
\ No newline at end of file
diff --git a/src/apps/canvas/util.ts b/src/apps/canvas/util.ts
index 9a2c8f7fa9f6d9b27d5f4973450962c741a7a7ba..577c3a3da2c6588b3ddff7a6fc630747bde55d6a 100644
--- a/src/apps/canvas/util.ts
+++ b/src/apps/canvas/util.ts
@@ -24,8 +24,8 @@ export async function getCifFromData(data: string | Uint8Array) {
     return parsed.result.blocks[0]
 }
 
-export async function getCifFromUrl(url: string) {
-    return getCifFromData(await readUrlAs(url, false))
+export async function getCifFromUrl(url: string, binary = false) {
+    return getCifFromData(await readUrlAs(url, binary))
 }
 
 export async function getCifFromFile(file: File, binary = false) {