diff --git a/playground/next/editor.mjs b/playground/next/editor.mjs
index f37ccca5..1fa0bb2b 100644
--- a/playground/next/editor.mjs
+++ b/playground/next/editor.mjs
@@ -93,16 +93,17 @@ function editorListener(docName) {
         const latestChange = changes[changes.length-1];
         if (latestChange === '') {
           this[docName] = '';
-          this.parseError = '';
+          this.parseError = {};
           setEditorValue(readOnlyEditor, '');
           return;
         } else {
           try {
             const parsed = JSON.parse(latestChange);
             this[docName] = parsed;
-            this.parseError = '';
+            this.parseError = {};
+            this.setOutputTab(this.outputTab);
           } catch (err) {
-            this.parseError = err.message;
+            this.parseError = err;
           };
         }
       }, 1000).call(this, docName);
@@ -325,17 +326,16 @@ window.app = createApp({
   remoteDocURL: '',
   remoteSideDocURL: '',
   message: {type: '', text: ''},
-  parseError: '',
+  parseError: {},
   inputTab: 'json-ld',
   outputTab: 'expanded',
   options: {
-    processingMode: '',
+    processingMode: 'json-ld-1.1',
     base: '',
-    baseUrl: '',
     compactArrays: true,
     compactToRelative: true,
     rdfDirection: '',
-    safe: ''
+    safe: false
   },
   tabs: {
     expanded: {icon: 'expand alternate', label: 'Expanded'},
@@ -412,7 +412,7 @@ window.app = createApp({
       this.remoteDocURL = '';
       this.remoteSideDocURL = '';
     } catch (err) {
-      this.parseError = err.message;
+      this.parseError = err;
     }
   },
   async loadExample(file) {
@@ -431,7 +431,7 @@ window.app = createApp({
     this.setOutputTab(this.outputTab);
   },
   async setOutputTab(value) {
-    if (!value || !this.doc) return;
+    if (!this.doc) return;
     if (value) this.outputTab = value;
     let context = this.contextDoc;
     switch (this.outputTab) {
@@ -440,9 +440,9 @@ window.app = createApp({
         try {
           const expanded = await jsonld.expand(this.doc, this.options);
           setEditorValue(readOnlyEditor, expanded);
-          this.parseError = '';
+          this.parseError = {};
         } catch(err) {
-          this.parseError = err.message;
+          this.parseError = err;
         }
         break;
       case 'compacted':
@@ -457,9 +457,9 @@ window.app = createApp({
         try {
           const compacted = await jsonld.compact(this.doc, {'@context': context['@context'] || {}}, this.options);
           setEditorValue(readOnlyEditor, compacted);
-          this.parseError = '';
+          this.parseError = {};
         } catch(err) {
-          this.parseError = err.message;
+          this.parseError = err;
         }
         break;
       case 'flattened':
@@ -474,18 +474,18 @@ window.app = createApp({
         try {
           const flattened = await jsonld.flatten(this.doc, {'@context': context['@context'] || {}}, this.options);
           setEditorValue(readOnlyEditor, flattened);
-          this.parseError = '';
+          this.parseError = {};
         } catch(err) {
-          this.parseError = err.message;
+          this.parseError = err;
         }
         break;
       case 'framed':
         try {
           const framed = await jsonld.frame(this.doc, this.frameDoc, this.options);
           setEditorValue(readOnlyEditor, framed);
-          this.parseError = '';
+          this.parseError = {};
         } catch(err) {
-          this.parseError = err.message;
+          this.parseError = err;
         }
         break;
       case 'nquads':
@@ -496,21 +496,21 @@ window.app = createApp({
             ...this.options
           });
           setEditorValue(readOnlyEditor, output);
-          this.parseError = '';
+          this.parseError = {};
         } catch(err) {
-          this.parseError = err.message;
+          this.parseError = err;
         }
         break;
       case 'canonized':
         // TODO: this should happen elsewhere...like a watcher
         try {
           const output = await jsonld.canonize(this.doc, {
-            format: 'application/n-quads', ...this.options
+            format: 'application/n-quads', ...{...this.options, ...{safe: true}}
           });
           setEditorValue(readOnlyEditor, output);
-          this.parseError = '';
+          this.parseError = {};
         } catch(err) {
-          this.parseError = err.message;
+          this.parseError = err;
         }
         break;
       case 'table':
@@ -518,9 +518,9 @@ window.app = createApp({
         try {
           const output = await jsonld.toRDF(this.doc, this.options);
           this.tableQuads = output;
-          this.parseError = '';
+          this.parseError = {};
         } catch(err) {
-          this.parseError = err.message;
+          this.parseError = err;
         }
         break;
       case 'yamlld':
@@ -544,10 +544,10 @@ window.app = createApp({
           this.cborLD.diagnostics = cbor2.diagnose(this.cborLD.bytes, {
             pretty: true})
           setEditorValue(readOnlyEditor, this.cborLD.diagnostics, 'cbor');
-          this.parseError = '';
+          this.parseError = {};
         } catch (err) {
           // TODO: currently, the editor keeps it's old value...unupdated...
-          this.parseError = err.message;
+          this.parseError = err;
           console.error(err);
         }
         break;
diff --git a/playground/next/index.html b/playground/next/index.html
index dda25087..599b766d 100644
--- a/playground/next/index.html
+++ b/playground/next/index.html
@@ -143,24 +143,17 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
         <form class="ui form">
           <div class="inline fields" id="options-api-processingMode">
             <label for="options-api-processingMode" class="two wide field">Processing Mode</label>
-            <div class="field">
-              <div class="ui radio checkbox">
-                <input type="radio" id="options-api-processingMode-default" name="processingMode" value="" checked
-                  v-model="options.processingMode">
-                <label for="options-api-processingMode-default">Default</label>
-              </div>
-            </div>
             <div class="field">
               <div class="ui radio checkbox">
                 <input type="radio" id="options-api-processingMode-1-0" name="processingMode" value="json-ld-1.0"
-                  v-model="options.processingMode">
+                  v-model="options.processingMode" @change="setOutputTab()">
                 <label for="options-api-processingMode-1-0">JSON-LD 1.0</label>
               </div>
             </div>
             <div class="field">
               <div class="ui radio checkbox">
                 <input type="radio" id="options-api-processingMode-1-1" name="processingMode" value="json-ld-1.1"
-                  v-model="options.processingMode">
+                  v-model="options.processingMode" @change="setOutputTab()">
                 <label for="options-api-processingMode-1-1">JSON-LD 1.1</label>
               </div>
             </div>
@@ -168,23 +161,9 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
 
           <div class="inline fields" id="options-api-base">
             <label for="options-api-base" class="two wide field">Base</label>
-            <div class="field">
-              <div class="ui radio checkbox">
-                <input type="radio" id="options-api-base-default" name="base" value="" checked
-                  v-model="options.base">
-                <label for="options-api-base-default">Default</label>
-              </div>
-            </div>
-            <div class="field">
-              <div class="ui radio checkbox">
-                <input type="radio" id="options-api-base-custom" name="base" value="custom"
-                  v-model="options.base">
-                <label for="options-api-base-custom">Custom URL</label>
-              </div>
-            </div>
-            <div class="eleven wide field">
+            <div class="sixteen wide field">
               <input type="text" id="options-api-base-url" placeholder="URL"
-                v-model="options.baseUrl">
+                v-model="options.base" @change="setOutputTab()">
             </div>
           </div>
 
@@ -193,7 +172,7 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
             <div class="field">
               <div class="ui checkbox">
                 <input type="checkbox" id="options-api-compactArrays"
-                  v-model="options.compactArrays">
+                  v-model="options.compactArrays" @change="setOutputTab()">
                 <label for="options-api-compactArrays">Compact Arrays</label>
               </div>
             </div>
@@ -204,7 +183,7 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
             <div class="field">
               <div class="ui checkbox">
                 <input type="checkbox" id="options-api-compactToRelative"
-                  v-model="options.compactToRelative">
+                  v-model="options.compactToRelative" @change="setOutputTab()">
                 <label for="options-api-compactToRelative">Compact To Relative</label>
               </div>
             </div>
@@ -216,14 +195,14 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
               <div class="field">
                 <div class="ui radio checkbox">
                   <input type="radio" id="options-api-rdfDirection-default" name="rdfDirection" value="" checked
-                    v-model="options.rdfDirection">
+                    v-model="options.rdfDirection" @change="setOutputTab()">
                   <label for="options-api-rdfDirection-default">Default (null)</label>
                 </div>
               </div>
               <div class="field">
                 <div class="ui radio checkbox">
                   <input type="radio" id="options-api-rdfDirection-i18n-datatype" name="rdfDirection" value="i18n-datatype"
-                    v-model="options.rdfDirection">
+                    v-model="options.rdfDirection" @change="setOutputTab()">
                   <label for="options-api-rdfDirection-i18n-datatype">"i18n-datatype"</label>
                 </div>
               </div>
@@ -235,22 +214,15 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
               <label for="options-api-safe" class="two wide field">Safe</label>
               <div class="field">
                 <div class="ui radio checkbox">
-                  <input type="radio" id="options-api-safe-default" name="safe" value="" checked
-                    v-model="options.safe">
-                  <label for="options-api-safe-default">Default (False)</label>
-                </div>
-              </div>
-              <div class="field">
-                <div class="ui radio checkbox">
-                  <input type="radio" id="options-api-safe-false" name="safe" value="false"
-                    v-model="options.safe">
+                  <input type="radio" id="options-api-safe-false" name="safe" :value="false"
+                    v-model="options.safe" @change="setOutputTab()">
                   <label for="options-api-safe-false">False</label>
                 </div>
               </div>
               <div class="field">
                 <div class="ui radio checkbox">
-                  <input type="radio" id="options-api-safe-true" name="safe" value="true"
-                    v-model="options.safe">
+                  <input type="radio" id="options-api-safe-true" name="safe" :value="true"
+                    v-model="options.safe" @change="setOutputTab()">
                   <label for="options-api-safe-true">True</label>
                 </div>
               </div>
@@ -291,7 +263,12 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
     </div>
   </div>
   <!-- errors -->
-  <div class="ui error message" v-show="parseError" v-text="parseError"></div>
+  <div class="ui error message" v-show="parseError.message">
+    <div class="header" v-text="parseError.message"></div>
+    <div class="content">
+      <pre v-text="JSON.stringify(parseError?.details?.event, null, 2)"></pre>
+    </div>
+  </div>
   <!-- outputs and renderings -->
   <div class="ui top attached tabular menu">
     <div v-for="(tab, key) in tabs" :class="{ active: outputTab == key, disabled: doc === '' }" class="item" @click="setOutputTab(key)"><i class="icon" :class="tab.icon"></i> <span v-text="tab.label"></span></div>