From 068eee12ecd9e3143906a34f130ae34cdd15d1bc Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Tue, 25 Nov 2025 12:06:23 -0500
Subject: [PATCH 1/2] Load examples from vcplayground.org.

The VC Examples repo can be used locally for testing (if the
`examplesBaseUrl` is changed in `app.js`:
https://github.com/credential-handler/vc-examples
---
 app.js     | 18 +++++++++++++++++-
 index.html | 18 +++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/app.js b/app.js
index cbf21a4..e096b33 100644
--- a/app.js
+++ b/app.js
@@ -6,6 +6,11 @@ import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'
 
 import { prettyXML } from './helpers.js';
 
+// Production URL
+const examplesBaseUrl = 'https://examples.vcplayground.org/credentials/';
+// Development URL
+//const examplesBaseUrl = 'http://localhost:8788/credentials/';
+
 // global state
 const store = reactive({
   credential: {}
@@ -73,6 +78,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 +97,7 @@ window.app = createApp({
   landscape: "",
   landscapeSVG: "",
   parseError: "",
+  examples: await fetchExamples(),
 
   // methods
   async pickFile() {
@@ -110,6 +122,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 +134,8 @@ window.app = createApp({
       this.parseError = error.message;
       console.error(error);
     }
+  },
+  loadExampleCredential(event) {
+    this.loadCredential(`${examplesBaseUrl}${event.target.value}`);
   }
-  }).mount();
+}).mount();
diff --git a/index.html b/index.html
index a74680d..b63f6de 100644
--- a/index.html
+++ b/index.html
@@ -39,11 +39,27 @@
       </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="(paths, name) in examples" :value="paths.credential"
+                      v-text="name"></option>
+                  </select>
+                </div>
+              </div>
+            </div>
             <span v-text="filename"></span>
             <div class="field">
               <textarea v-model="credentialString" @input="getCredential" placeholder="Credential"></textarea>

From 17afc0c84400d4c99a285d872ec0c74101291ec6 Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Tue, 25 Nov 2025 12:07:42 -0500
Subject: [PATCH 2/2] Switch SVGViewer default tab back to `rendered`.

---
 app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app.js b/app.js
index e096b33..1864cd2 100644
--- a/app.js
+++ b/app.js
@@ -21,7 +21,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) {