Changelog

Easy Cosmic Browser Example

Tony Spiro

January 04, 2016

Easy Cosmic Browser Example - cover image

It's now faster and easier to make the content on your webpages dynamic. The Official Cosmic JavaScript Client now comes with a minified browser version that allows you to add the power of Cosmic cloud-hosted content into your HTML page with a single file. Download the Cosmic browser file then copy and paste this real-working browser example into an html file to check it out:

<!DOCTYPE html>
<html>
<head>
  <title>Cosmic Easy Browser Example</title>
</head>
<body>
<h1 id="title">If you see this, something isn't working...</h1>
<div id="content"></div>
<div id="metafields"></div>
<script src="cosmicjs.browser.min.js"></script>
<script>
var config = {
  bucket: {
    slug: 'easy-browser-example'
  },
  object: {
    slug: 'home'
  }
};
Cosmic.getObject(config, config.object, function(err, res) {
  var object = res.object;
  document.getElementById('title').innerHTML = object.title;
  document.getElementById('content').innerHTML = object.content;
  var metafields = object.metafields;
  var images = '';
  metafields.forEach(function(metafield){
    images += '<h2>' + metafield.title + '</h2>';
    images += '<img width="300" src="https://www.cosmicjs.com/uploads/' + metafield.value + '"/>';
    images += '<br><br>';
  })
  document.getElementById('metafields').innerHTML = images;
});
</script>
</body>
</html>

Sign in to your Cosmic account and connect this example to one of your buckets to see how easy it is to create powerful CMS-powered websites and app with Cosmic.