<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Live Editor</h1>
<div id="items">
<div>
<button onclick="items.showhtml=true;items.showoutput=false;" rv-disabled="items.showhtml">Show HTML</button>
<button onclick="items.showoutput=true;items.showhtml=false;" rv-disabled="items.showoutput">Show Output</button>
</div>
<textarea style="width:80%;" rv-value="items.content" rv-show="items.showhtml"></textarea>
<section style="width:80%;" rv-html="items.content" rv-show="items.showoutput"></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>',
showhtml: false,
showoutput: true
};
<!-- 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 */