![Tony Spiro's avatar](https://imgix.cosmicjs.com/c50b1390-4c31-11ee-82b2-d53af1858037-tux-cropped.jpg?w=100&h=100&auto=format&dpr=2)
Tony Spiro
January 04, 2016
![cover image](https://imgix.cosmicjs.com/14f4f800-48c1-11ed-a07b-05c6717a9348-sebastian-unrau-sp-p7uuT0tw-unsplash-1.jpg?w=1000&auto=format&dpr=2)
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.
You might also like