diff --git a/_extensions/molstar/molstar.lua b/_extensions/molstar/molstar.lua
index 5151afd..38eeaaf 100644
--- a/_extensions/molstar/molstar.lua
+++ b/_extensions/molstar/molstar.lua
@@ -131,6 +131,7 @@ local function createViewer(args)
     volumeExtension = args.volumeExtension,
     snapshotUrl = args.snapshotUrl, 
     snapshotExtension = args.snapshotExtension,
+    afdb = args.afdb,
     data = args.data,
     options = mergeMolstarOptions(args.userOptions)
   }
@@ -178,6 +179,8 @@ local function createViewer(args)
     ]]
   elseif args.snapshotUrl and args.snapshotExtension then
     viewerFunction = 'viewer.loadSnapshotFromUrl(url="${snapshotUrl}", "${snapshotExtension}");'
+  elseif args.afdb then
+    viewerFunction = 'viewer.loadAlphaFoldDb(afdb="${afdb}")'
   else -- otherwise read from url (local or remote)
     viewerFunction = 'viewer.loadStructureFromUrl("${url}", format="${urlExtension}");'
   end
@@ -204,6 +207,24 @@ return {
     })
   end,
 
+  ['mol-afdb'] = function(args, kwargs)
+    -- return early if the output format is unsupported
+    if not quarto.doc.isFormat("html:js") then
+      return pandoc.Null()
+    end
+
+    addDependencies()
+
+    local afdb = pandoc.utils.stringify(args[1])
+    local appId = 'app-' .. afdb
+
+    return pandoc.RawBlock('html', createViewer {
+      appId = appId,
+      afdb = afdb,
+      userOptions = kwargs
+    })
+  end,
+
   ['mol-url'] = function(args, kwargs, meta)
     if not quarto.doc.isFormat("html:js") then
       return pandoc.Null()
diff --git a/index.html b/index.html
index 460ffa6..fc81f06 100644
--- a/index.html
+++ b/index.html
@@ -109,6 +109,7 @@ <h2 id="toc-title">Table of contents</h2>
   <li><a href="#usage-examples-for" id="toc-usage-examples-for" class="nav-link active" data-scroll-target="#usage-examples-for">Usage examples for</a>
   <ul class="collapse">
   <li><a href="#rcsb-pdb" id="toc-rcsb-pdb" class="nav-link" data-scroll-target="#rcsb-pdb">RCSB PDB</a></li>
+  <li><a href="#alphafold-model." id="toc-alphafold-model." class="nav-link" data-scroll-target="#alphafold-model.">AlphaFold model.</a></li>
   <li><a href="#local-pdb-file" id="toc-local-pdb-file" class="nav-link" data-scroll-target="#local-pdb-file">Local pdb file</a></li>
   <li><a href="#pdb-file-from-url" id="toc-pdb-file-from-url" class="nav-link" data-scroll-target="#pdb-file-from-url">pdb file from url</a></li>
   <li><a href="#local-xyz-file" id="toc-local-xyz-file" class="nav-link" data-scroll-target="#local-xyz-file">local xyz file</a></li>
@@ -152,10 +153,21 @@ <h2 class="anchored" data-anchor-id="rcsb-pdb">RCSB PDB</h2>
 <p><code>{{&lt; mol-rcsb 7sgl &gt;}}</code></p>
     <div id="app-7sgl" class="molstar-app"></div>
     <script type="text/javascript">
-    molstar.Viewer.create("app-7sgl", {"layoutShowLog":false,"viewportShowExpand":true,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"layoutShowSequence":false,"emdbProvider":"rcsb","pdbProvider":"rcsb","viewportShowAnimation":true,"layoutShowRemoteState":false}).then(viewer => {
+    molstar.Viewer.create("app-7sgl", {"layoutShowRemoteState":false,"layoutShowSequence":false,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"viewportShowAnimation":true,"layoutShowLeftPanel":true,"pdbProvider":"rcsb","emdbProvider":"rcsb","layoutShowLog":false,"viewportShowExpand":true,"layoutShowControls":false}).then(viewer => {
     viewer.loadPdb("7sgl");    });
     </script>
     
+</section>
+<section id="alphafold-model." class="level2">
+<h2 class="anchored" data-anchor-id="alphafold-model.">AlphaFold model.</h2>
+<p>Load the predicted structure of a protein from the <a href="https://alphafold.com/">AlphaFold Database</a> using the AlphaFold Database ID. The loaded structure is coloured based on the prediction score.</p>
+<p><code>{{&lt; mol-afdb Q8W3K0 &gt;}}</code></p>
+    <div id="app-Q8W3K0" class="molstar-app"></div>
+    <script type="text/javascript">
+    molstar.Viewer.create("app-Q8W3K0", {"layoutShowRemoteState":false,"layoutShowSequence":false,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"viewportShowAnimation":true,"layoutShowLeftPanel":true,"pdbProvider":"rcsb","emdbProvider":"rcsb","layoutShowLog":false,"viewportShowExpand":true,"layoutShowControls":false}).then(viewer => {
+    viewer.loadAlphaFoldDb(afdb="Q8W3K0")    });
+    </script>
+    
 </section>
 <section id="local-pdb-file" class="level2">
 <h2 class="anchored" data-anchor-id="local-pdb-file">Local pdb file</h2>
@@ -163,7 +175,7 @@ <h2 class="anchored" data-anchor-id="local-pdb-file">Local pdb file</h2>
 <p><code>{{&lt; mol-url ./www/7sgl.pdb &gt;}}</code></p>
     <div id="app-./www/7sgl.pdb" class="molstar-app"></div>
     <script type="text/javascript">
-    molstar.Viewer.create("app-./www/7sgl.pdb", {"layoutShowLog":false,"viewportShowExpand":true,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"layoutShowSequence":false,"emdbProvider":"rcsb","pdbProvider":"rcsb","viewportShowAnimation":true,"layoutShowRemoteState":false}).then(viewer => {
+    molstar.Viewer.create("app-./www/7sgl.pdb", {"layoutShowRemoteState":false,"layoutShowSequence":false,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"viewportShowAnimation":true,"layoutShowLeftPanel":true,"pdbProvider":"rcsb","emdbProvider":"rcsb","layoutShowLog":false,"viewportShowExpand":true,"layoutShowControls":false}).then(viewer => {
     viewer.loadStructureFromUrl("./www/7sgl.pdb", format="pdb");    });
     </script>
     
@@ -174,7 +186,7 @@ <h2 class="anchored" data-anchor-id="pdb-file-from-url">pdb file from url</h2>
 <p><code>{{&lt; mol-url https://files.rcsb.org/download/7sgl.pdb &gt;}}</code></p>
     <div id="app-https://files.rcsb.org/download/7sgl.pdb" class="molstar-app"></div>
     <script type="text/javascript">
-    molstar.Viewer.create("app-https://files.rcsb.org/download/7sgl.pdb", {"layoutShowLog":false,"viewportShowExpand":true,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"layoutShowSequence":false,"emdbProvider":"rcsb","pdbProvider":"rcsb","viewportShowAnimation":true,"layoutShowRemoteState":false}).then(viewer => {
+    molstar.Viewer.create("app-https://files.rcsb.org/download/7sgl.pdb", {"layoutShowRemoteState":false,"layoutShowSequence":false,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"viewportShowAnimation":true,"layoutShowLeftPanel":true,"pdbProvider":"rcsb","emdbProvider":"rcsb","layoutShowLog":false,"viewportShowExpand":true,"layoutShowControls":false}).then(viewer => {
     viewer.loadStructureFromUrl("https://files.rcsb.org/download/7sgl.pdb", format="pdb");    });
     </script>
     
@@ -185,7 +197,7 @@ <h2 class="anchored" data-anchor-id="local-xyz-file">local xyz file</h2>
 <p><code>{{&lt; mol-url ./www/example.xyz &gt;} }</code></p>
     <div id="app-./www/example.xyz" class="molstar-app"></div>
     <script type="text/javascript">
-    molstar.Viewer.create("app-./www/example.xyz", {"layoutShowLog":false,"viewportShowExpand":true,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"layoutShowSequence":false,"emdbProvider":"rcsb","pdbProvider":"rcsb","viewportShowAnimation":true,"layoutShowRemoteState":false}).then(viewer => {
+    molstar.Viewer.create("app-./www/example.xyz", {"layoutShowRemoteState":false,"layoutShowSequence":false,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"viewportShowAnimation":true,"layoutShowLeftPanel":true,"pdbProvider":"rcsb","emdbProvider":"rcsb","layoutShowLog":false,"viewportShowExpand":true,"layoutShowControls":false}).then(viewer => {
     viewer.loadStructureFromUrl("./www/example.xyz", format="xyz");    });
     </script>
     
@@ -196,7 +208,7 @@ <h2 class="anchored" data-anchor-id="local-pdb-and-trajectory">local pdb and tra
 <p><code>{{&lt; mol-traj ./www/example.pdb ./www/example.xtc &gt;}}</code></p>
     <div id="app-./www/example.pdb./www/example.xtc" class="molstar-app"></div>
     <script type="text/javascript">
-    molstar.Viewer.create("app-./www/example.pdb./www/example.xtc", {"layoutShowLog":false,"viewportShowExpand":true,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"layoutShowSequence":false,"emdbProvider":"rcsb","pdbProvider":"rcsb","viewportShowAnimation":true,"layoutShowRemoteState":false}).then(viewer => {
+    molstar.Viewer.create("app-./www/example.pdb./www/example.xtc", {"layoutShowRemoteState":false,"layoutShowSequence":false,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"viewportShowAnimation":true,"layoutShowLeftPanel":true,"pdbProvider":"rcsb","emdbProvider":"rcsb","layoutShowLog":false,"viewportShowExpand":true,"layoutShowControls":false}).then(viewer => {
         viewer.loadTrajectory(
     {
       model: {
@@ -218,7 +230,7 @@ <h2 class="anchored" data-anchor-id="snapshot-file">snapshot file</h2>
 <p><code>{{&lt; mol-snapshot ./www/molstar.molj &gt;}}</code></p>
     <div id="app-./www/molstar.molj" class="molstar-app"></div>
     <script type="text/javascript">
-    molstar.Viewer.create("app-./www/molstar.molj", {"layoutShowLog":false,"viewportShowExpand":true,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"layoutShowSequence":false,"emdbProvider":"rcsb","pdbProvider":"rcsb","viewportShowAnimation":true,"layoutShowRemoteState":false}).then(viewer => {
+    molstar.Viewer.create("app-./www/molstar.molj", {"layoutShowRemoteState":false,"layoutShowSequence":false,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"viewportShowAnimation":true,"layoutShowLeftPanel":true,"pdbProvider":"rcsb","emdbProvider":"rcsb","layoutShowLog":false,"viewportShowExpand":true,"layoutShowControls":false}).then(viewer => {
     viewer.loadSnapshotFromUrl(url="./www/molstar.molj", "molj");    });
     </script>
     
@@ -228,7 +240,7 @@ <h2 class="anchored" data-anchor-id="local-file-with-volume-information">local f
 <p><code>{{&lt; mol-volume ./www/traj.xyz ./www/density.cube &gt;}}</code></p>
     <div id="app-./www/traj.xyz./www/density.cube" class="molstar-app"></div>
     <script type="text/javascript">
-    molstar.Viewer.create("app-./www/traj.xyz./www/density.cube", {"layoutShowLog":false,"viewportShowExpand":true,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"layoutShowSequence":false,"emdbProvider":"rcsb","pdbProvider":"rcsb","viewportShowAnimation":true,"layoutShowRemoteState":false}).then(viewer => {
+    molstar.Viewer.create("app-./www/traj.xyz./www/density.cube", {"layoutShowRemoteState":false,"layoutShowSequence":false,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"viewportShowAnimation":true,"layoutShowLeftPanel":true,"pdbProvider":"rcsb","emdbProvider":"rcsb","layoutShowLog":false,"viewportShowExpand":true,"layoutShowControls":false}).then(viewer => {
         viewer.loadStructureFromUrl("./www/traj.xyz", "xyz")
     viewer.loadVolumeFromUrl(
     {url: "./www/density.cube",
@@ -255,7 +267,7 @@ <h3 class="anchored" data-anchor-id="molstar-options">Molstar options</h3>
 <p><code>{{&lt; mol-rcsb 7eqr viewportShowAnimation=false &gt;}}</code></p>
     <div id="app-7eqr" class="molstar-app"></div>
     <script type="text/javascript">
-    molstar.Viewer.create("app-7eqr", {"layoutShowLog":false,"viewportShowExpand":true,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"layoutShowSequence":false,"emdbProvider":"rcsb","pdbProvider":"rcsb","viewportShowAnimation":false,"layoutShowRemoteState":false}).then(viewer => {
+    molstar.Viewer.create("app-7eqr", {"layoutShowRemoteState":false,"layoutShowSequence":false,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"viewportShowAnimation":false,"layoutShowLeftPanel":true,"pdbProvider":"rcsb","emdbProvider":"rcsb","layoutShowLog":false,"viewportShowExpand":true,"layoutShowControls":false}).then(viewer => {
     viewer.loadPdb("7eqr");    });
     </script>
     
diff --git a/index.qmd b/index.qmd
index 10d6a88..27ff4a1 100644
--- a/index.qmd
+++ b/index.qmd
@@ -17,6 +17,14 @@ Get a protein from the RCSB PDB with:
 
 {{< mol-rcsb 7sgl >}}
 
+## AlphaFold model.
+
+Load the predicted structure of a protein from the [AlphaFold Database](https://alphafold.com/) using the AlphaFold Database ID. The loaded structure is coloured based on the prediction score.
+
+`{{{< mol-afdb Q8W3K0 >}}}`
+
+{{< mol-afdb Q8W3K0 >}}
+
 ## Local pdb file
 
 Get a local pdb file with:
@@ -39,7 +47,7 @@ Get a local xyz file with:
 
 `{{{< mol-url ./www/example.xyz >}} }`
 
-{{< mol-url ./www/example.xyz >}} 
+{{< mol-url ./www/example.xyz >}}
 
 ## local pdb and trajectory
 
@@ -51,8 +59,7 @@ Load a topology and a trajectory with:
 
 ## snapshot file
 
-Load a snapshot file, to share a saved Mol* session which will save aesthetic 
-parameters and scene setup.
+Load a snapshot file, to share a saved Mol\* session which will save aesthetic parameters and scene setup.
 
 `{{{< mol-snapshot ./www/molstar.molj >}}}`
 
@@ -60,12 +67,10 @@ parameters and scene setup.
 
 ## local file with volume information
 
-
 `{{{< mol-volume ./www/traj.xyz ./www/density.cube >}}}`
 
 {{< mol-volume ./www/traj.xyz ./www/density.cube >}}
 
-
 ## Customization
 
 ### Molstar options
@@ -88,7 +93,7 @@ Example
 
 To embed plain text files (such as `.pdb`, `.xyz`) into the rendered html, add this to your yml header:
 
-```yml
+``` yml
 molstar: embed
 ```
 
@@ -98,11 +103,12 @@ It does not work for binary trajectory formats such as `xtc`.
 
 ### CSS
 
-Each embedded app is inserted into a div with an ID created from the path of the pdb-file or trajectory (please don't embed the same thing twice, it will only show up once). So the first app on this page will respond to css for `#app-7sgl`.
+Each embedded app is inserted into a div with an ID created from the path of the pdb-file or trajectory (please don't embed the same thing twice, it will only show up once).
+So the first app on this page will respond to css for `#app-7sgl`.
 
 All apps have the class `molstar-app` and the following css is included by default:
 
-```css
+``` css
 .molstar-app {
   position: relative;
   width: 100%;
@@ -112,9 +118,8 @@ All apps have the class `molstar-app` and the following css is included by defau
 
 For example, you might want to make one app a bit shorter because there is text above it:
 
-```css
+``` css
 #app-7sgl {
   padding-bottom: 40%;
 }
 ```
-