Creating a new styleshot

A styleshot is a snapshot of the content and styling behind an app or webpage at a particular state and time.

This can be generated manually through the web browser, or programmatically through the API.

Creating manually through browser

When you click the bookmarklet link, a UI will appear that allows you to select the page you’d like to use for the fixture.

You can also create a fixture based on a specific element on the page by holding down the CTRL key and clicking on its area. The next screen will allow you to choose a unique query selector if it was not detected automatically.

Example html javascript

HTML

 htmlCopy<script type="text/javascript" src="https://www.butterflyfx.io/static/js/client.js"></script>
<script type="text/javascript">
    var API_KEY = "INSERT-API-KEY-HERE";
    var PROJECT_ID = 0;
    var client = new ButterflyFX({project:PROJECT_ID, token:API_KEY});
    var selector = ".my-container";
    var html = document.querySelector(selector.outerHTML);
    client.saveFixture({
      name: "Hello world",
      html: html,
      selector: selector,
      // Assumes a previously create fixture with slug "main-page"
      parent: "main-page"
    });
</script>

JavaScript

 javascriptCopy// npm install butterflyfx-client
const API_KEY = “INSERT-API-KEY-HERE”;
const PROJECT_ID = 0;
const ButterflyFX = require(‘butterflyfx-client’);
let client = new ButterflyFX({project:PROJECT_ID, token:API_KEY});
// An ordinary html string can be used here instead of document.querySelector
let selector = “.my-container”;
let html = document.querySelector(“html”).outerHTML;
client.saveFixture({
  name: “Hello world”,
  html: html,
  selector: selector,
  // Assumes a previously create fixture with slug “main-page”
  parent: “main-page”
});

Styleshots based on a specific element require an existing styleshot of the entire page.