# TipTap examples

## TipTap basic example

Link Image Video Source
<p>Visit <a href="https://github.com/patternslib/pat-tiptap">pat-tiptap on GitHub</a>.</p> <p>Visit <a href="https://patternslib.com" target="_blank">Patternslib.com in a new window</a>.</p> <p>Hello, <a class="pat-tooltip" href="https://en.wikipedia.org/wiki/Mary_(name)" data-mention contenteditable="false" data-pat-tooltip="url: ./index-remote-content.html#mary; source: ajax; trigger: click" data-title="Mary">@Mary</a>, have a nice day!</p> <p>Yo, <a class="pat-tooltip" href="https://en.wikipedia.org/wiki/James_(given_name)" data-mention data-pat-tooltip="url: ./index-remote-content.html#james; source: ajax; trigger: click">@James Dean</a>! </p> <p>The following should show an image directly on the top-level</p> <p><img alt="blue image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAkElEQVR42u3QMQ0AAAjAsPk3DRb4 eJpUQavhTIEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKB LFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEs WbJkyUKBLFnPFse76yukbN6SAAAAAElFTkSuQmCC" title="this is a blue image" /></p> <figure><img alt="green image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAkElEQVR42u3QMQ0AAAjAsPk3DRb4 eJpUQWviSoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKB LFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEs WbJkyUKBLFnfFrL06ytLHYipAAAAAElFTkSuQmCC" title="this is a green image" /><figcaption>Above is a image within a figure/img/figcaption structure.</figcaption></figure> <p>Here is an inline-image. This image is allowed by our schema, parsed and displayed, but adding a new image will add it as and image within a figure tag. <img alt="red image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAkElEQVR42u3QMQ0AAAjAsPk3DRb4 eJpUQZviSIEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKB LFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEs WbJkyUKBLFnvFp4t6yugc3LNAAAAAElFTkSuQmCC" title="this is a red image" /></p> <figure> <iframe allowfullscreen frameborder="0" height="315" src="https://www.youtube.com/embed/GO1mRJkGXTA" width="560" ></iframe> <figcaption>hello</figcaption> </figure> <p>A new paragraph with a table.</p> <table> <tbody> <tr> <th> <p>column 1</p> </th> <th> <p>column 2</p> </th> <th> <p>column 3</p> </th> </tr> <tr> <td> <p>cell 1.1</p> </td> <td> <p>cell 1.2</p> </td> <td> <p>cell 1.3</p> </td> </tr> <tr> <td> <p>cell 2.1</p> </td> <td> <p>next cell is intentionally left blank</p> </td> <td> <p></p> </td> </tr> </tbody> </table>