Rivets binding example #1

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Live Editor</h1>
    <div id="items">
      <textarea style="width:80%;" rv-value="items.content"></textarea>
      <section style="width:80%;" rv-html="items.content"></section>
    </div>
  
  <!-- Include rivets via the CDN -->  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.8.1/rivets.bundled.min.js"></script>
  <script type="text/javascript">
    <!-- What data should we start with? -->
    var items = {content: '<p>Try editing this</p><p><b>This is bold text</b><i>This is italic text</i></p>'};
    <!-- Bind the data to part of the DOM -->
    var el = document.getElementById('items');
    rivets.bind(el, {items: items})
  </script>
  </body>
  
</html>

// Code goes here

/* Styles go here */