cosmic-lib/EXAMPLES.md

A JavaScript implementation of the CosmicLink protocol for Stellar

**cosmic-lib /**
[Documentation](https://cosmic.plus/#view:js-cosmic-lib/web/doc)
• [Examples](https://cosmic.plus/#view:js-cosmic-lib/EXAMPLES)
• [Contributing](https://cosmic.plus/#view:js-cosmic-lib/CONTRIBUTING)
• [Changelog](https://cosmic.plus/#view:js-cosmic-lib/CHANGELOG)

# Examples

Here are some live examples for you to play with.

<script async src="https://static.codepen.io/assets/embed/ei.js" hidden></script>

## Transaction Request

<!--QWLdPeo--><p class="codepen" data-height="400" data-theme-id="37456" data-default-tab="js,result" data-user="cosmic-plus" data-slug-hash="QWLdPeo" data-preview="true" data-editable="true" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="cosmic-lib, Transaction Request">
  <span>
    Open the live editor on
    <a href="https://codepen.io/cosmic-plus/pen/QWLdPeo?editors=1010#0">
      Codepen
    </a> or
    <a href="https://cosmic.plus/#view:js-cosmic-lib/EXAMPLES">
      Cosmic.plus
    </a>
  </span>
</p>

## Transfer Request Form

<!--wZEwjK--><p class="codepen" data-height="400" data-theme-id="37456" data-default-tab="js,result" data-user="cosmic-plus" data-slug-hash="wZEwjK" data-preview="true" data-editable="true" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="cosmic-lib, Transfer Request Form">
  <span>
    Open the live editor on
    <a href="https://codepen.io/cosmic-plus/pen/wZEwjK?editors=1010#0">
      Codepen
    </a> or
    <a href="https://cosmic.plus/#view:js-cosmic-lib/EXAMPLES">
      Cosmic.plus
    </a>
  </span>
</p>

## Contract Template

<!--rNBQGEP--><p class="codepen" data-height="400" data-theme-id="37456" data-default-tab="js,result" data-user="cosmic-plus" data-slug-hash="rNBQGEP" data-preview="true" data-editable="true" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="cosmic-lib, Contract Template">
  <span>
    Open the live editor on
    <a href="https://codepen.io/cosmic-plus/pen/rNBQGEP?editors=1010#0">
      Codepen
    </a> or
    <a href="https://cosmic.plus/#view:js-cosmic-lib/EXAMPLES">
      Cosmic.plus
    </a>
  </span>
</p>

## Transfer Request Form (html only)

<!--xxKLXNZ--><p class="codepen" data-height="400" data-theme-id="37456" data-default-tab="html,result" data-user="cosmic-plus" data-slug-hash="xxKLXNZ" data-preview="true" data-editable="true" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="html-only, Transfer Request Form">
  <span>
    Open the live editor on
    <a href="https://codepen.io/cosmic-plus/pen/xxKLXNZ?editors=1000#0">
      Codepen
    </a> or
    <a href="https://cosmic.plus/#view:js-cosmic-lib/EXAMPLES">
      Cosmic.plus
    </a>
  </span>
</p>

## Open Trustline Button (html only)

<!--QWLQLBG--><p class="codepen" data-height="400" data-theme-id="37456" data-default-tab="html,result" data-user="cosmic-plus" data-slug-hash="QWLQLBG" data-preview="true" data-editable="true" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="cosmic-lib, Open Trustline Button">
  <span>
    Open the live editor on
    <a href="https://codepen.io/cosmic-plus/pen/QWLQLBG?editors=1000#0">
      Codepen
    </a> or
    <a href="https://cosmic.plus/#view:js-cosmic-lib/EXAMPLES">
      Cosmic.plus
    </a>
  </span>
</p>

## Sell Token Form (html only)

<!--zYOROWW--><p class="codepen" data-height="400" data-theme-id="37456" data-default-tab="html,result" data-user="cosmic-plus" data-slug-hash="zYOROWW" data-preview="true" data-editable="true" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="html-only, Sell Token Form">
  <span>
    Open the live editor on
    <a href="https://codepen.io/cosmic-plus/pen/zYOROWW?editors=1000#0">
      Codepen
    </a> or
    <a href="https://cosmic.plus/#view:js-cosmic-lib/EXAMPLES">
      Cosmic.plus
    </a>
  </span>
</p>