diff --git a/README.md b/README.md
index 3288f4c..56c93d5 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,14 @@ that file). The rest happens in your browser.
 The Web app is built using [petite-vue](https://github.com/vuejs/petite-vue) and
 is delightfully build tool free (for now).
 
+## Examples
+
+Examples are pulled from the hosted version of
+https://github.com/credential-handler/vc-examples via a Linked Data Platform
+(LDP) Basic Container description hosted at
+https://examples.vcplayground.org/credentials/index.json
+
+
 ## Render Method implementations
 
 The current viewer code implements *only* SVG processing based on the
diff --git a/app.js b/app.js
index cbf21a4..d60ced3 100644
--- a/app.js
+++ b/app.js
@@ -6,6 +6,10 @@ import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'
 
 import { prettyXML } from './helpers.js';
 
+const examplesBaseUrl = window.location.hostname !== 'localhost' ?
+  'https://examples.vcplayground.org/credentials/' :
+  'http://localhost:8788/credentials/';
+
 // global state
 const store = reactive({
   credential: {}
@@ -16,7 +20,7 @@ function SVGViewer({idx}) {
   return {
     $template: '#svg-viewer',
     // local state
-    currentTab: 'code', // rendered or code
+    currentTab: 'rendered', // rendered or code
     code: '',
     // methods
     mustache(template, credential) {
@@ -73,6 +77,12 @@ function SVGViewer({idx}) {
   }
 }
 
+async function fetchExamples() {
+  const examples = await fetch(`${examplesBaseUrl}index.json`)
+    .then((r) => r.json());
+  return examples;
+}
+
 window.app = createApp({
   // components
   SVGViewer,
@@ -86,6 +96,7 @@ window.app = createApp({
   landscape: "",
   landscapeSVG: "",
   parseError: "",
+  examples: await fetchExamples(),
 
   // methods
   async pickFile() {
@@ -110,6 +121,7 @@ window.app = createApp({
       .then((r) => r.json())
       .then((credential) => {
         store.credential = credential;
+        this.credentialString = JSON.stringify(credential, null, 2);
       })
       .catch(console.error);
   },
@@ -121,5 +133,8 @@ window.app = createApp({
       this.parseError = error.message;
       console.error(error);
     }
+  },
+  loadExampleCredential(event) {
+    this.loadCredential(event.target.value);
   }
-  }).mount();
+}).mount();
diff --git a/index.html b/index.html
index a74680d..09c10e2 100644
--- a/index.html
+++ b/index.html
@@ -39,11 +39,28 @@
       </div>
     </template>
 
+    <!-- main appication -->
     <main class="ui basic segment" v-scope>
       <div class="ui one column grid">
         <div class="column">
           <div class="ui form">
-            <button class="ui button" @click="pickFile()">Choose Credential...</button>
+            <div class="ui grid">
+              <div class="two wide column">
+                <button class="ui button" @click="pickFile()">Choose Credential...</button>
+              </div>
+              <div class="fourteen wide column">
+                <div class="inline field">
+                  <label for="examples">Examples:</label>
+                  <select id="examples" @change="loadExampleCredential">
+                    <option value="" disabled selected>Select an example</option>
+                    <option
+                      v-for="example in examples.contains"
+                      :value="example.files.credential"
+                      v-text="example.title"></option>
+                  </select>
+                </div>
+              </div>
+            </div>
             <span v-text="filename"></span>
             <div class="field">
               <textarea v-model="credentialString" @input="getCredential" placeholder="Credential"></textarea>