diff --git a/stories/components/todo/todo.html.stories.js b/stories/components/todo/todo.html.stories.js
index aaed9d6a8a..5cf5a3af5e 100644
--- a/stories/components/todo/todo.html.stories.js
+++ b/stories/components/todo/todo.html.stories.js
@@ -29,3 +29,16 @@ export const tasksWithInitialId = () => html`
 export const ReadOnly = () => html`
   <mgt-todo read-only></mgt-todo>
 `;
+
+export const events = () => html`
+  <mgt-todo></mgt-todo>
+  <script>
+    const todo = document.querySelector('mgt-todo');
+    todo.addEventListener('updated', (e) => {
+      console.log('updated', e);
+    });
+    todo.addEventListener('templateRendered', (e) => {
+      console.log('templateRendered', e);
+    });
+  </script>
+`;
diff --git a/stories/components/todo/todo.react.stories.js b/stories/components/todo/todo.react.stories.js
index 5c8507e01a..9d46aa661e 100644
--- a/stories/components/todo/todo.react.stories.js
+++ b/stories/components/todo/todo.react.stories.js
@@ -24,3 +24,36 @@ export const todos = () => html`
     );
   </react>
 `;
+
+export const events = () => html`
+  <mgt-todo></mgt-todo>
+  <react>
+    import { Todo } from '@microsoft/mgt-react';
+
+    export default () => {
+    const onUpdated = useCallback((e: CustomEvent<undefined>) => {
+      console.log('updated', e);
+    });
+
+    const onTemplateRendered = useCallback((e: CustomEvent<MgtElement.TemplateRenderedData>) => {
+      console.log('templateRendered', e);
+    });
+
+    return (
+      <Todo
+      updated={onUpdated}
+      templateRendered={onTemplateRendered}>
+    </Todo>
+    );
+  };
+  </react>
+  <script>
+    const todo = document.querySelector('mgt-todo');
+    todo.addEventListener('updated', (e) => {
+      console.log('updated', e);
+    });
+    todo.addEventListener('templateRendered', (e) => {
+      console.log('templateRendered', e);
+    });
+  </script>
+`;