diff --git a/docs/quick-start.md b/docs/quick-start.md
index 281f00d..ae00479 100644
--- a/docs/quick-start.md
+++ b/docs/quick-start.md
@@ -256,10 +256,14 @@ separated by an equal sign `=`. Options are separated by spaces. Options can be
 used to modify the behaviour of markup tags, for example changing the target of
 a link.
 
+<mf2-interactive>
+
 ```mf2
-This is a {#link to="home"}link{/link}.
+This is a {#link to=|https://example.com|}link{/link}.
 ```
 
+</mf2-interactive>
+
 It is best practice to not mix styles into messages too much - instead, use
 markup tags to add semantic meaning and selectors to text, and let the
 application decide how to render the message. This makes it easier to change the
diff --git a/playground.tsx b/playground.tsx
index 174204a..f654562 100644
--- a/playground.tsx
+++ b/playground.tsx
@@ -258,7 +258,7 @@ export default function IndexPage({ comp }: any) {
                     <code>link</code>
                   </td>
                   <td class="border px-2">
-                    Add a link, pointing to the <code>url</code> option.
+                    Add a link, pointing to the <code>to</code> option.
                   </td>
                 </tr>
                 <tr>
diff --git a/src/_utils/message_format.ts b/src/_utils/message_format.ts
index b6adb4e..6d4d456 100644
--- a/src/_utils/message_format.ts
+++ b/src/_utils/message_format.ts
@@ -51,7 +51,7 @@ export function formatMessageToHTML(
             }
             case "link": {
               const link = document.createElement("a");
-              link.href = part.options?.url as string;
+              link.href = part.options?.to as string;
               link.target = "_blank";
               link.rel = "noopener noreferrer";
               currentElement.appendChild(link);