Quickstart

Deploying your first Mason feature can be done as soon as you create your Mason account, in 4 steps:

1. ​Create a Mason feature​

2. ​Add the Mason Library to your application​

3. ​Obtain your API key and initialize Mason​

4. ​Embed your feature in your application​

Create a Mason feature

Mason features are functional pieces of UI that perform common (or custom) client-side application functions. Examples include Login and News Feed. We also provide a Canvas feature where you can create a custom UI from scratch.

In the new feature dashboard, select a template as a starting point and give it a name. A good template for testing is Login.

Add the Mason Library to your application

If you're adding Mason to a React application, simply add it as a dependency. If you'd like to create a new application, use create-react-app.​

Using npm​

npm install mason-library

Using yarn​

yarn add mason-library

If you're not using React, you can include Mason features compiled as HTML custom elements by including the following script tag in your document header

<script src="https://static.trymason.com/mason@latest.js"></script>

Obtain your API key and initialize Mason

Find your API Key on your Mason profile.​

In a React app

import React, { Component } from 'react';
import Mason from 'mason-library';
​
class App extends Component {
    componentDidMount() {
        Mason({ 
            apiKey: 'YOUR_API_KEY',
            projectId: 'YOUR_PROJECT_ID', //optional string or array of project id strings to pre-fetch
        });
    }
    
    ...
}

In an HTML document containing Mason features

<script type="text/javascript">
    window.masonAsyncInit = function() {
        Mason({ apiKey: 'YOUR_API_KEY', projectId: 'YOUR_PROJECT_ID' });
    }
</script>

Embed your feature in your application

In the Mason Builder, open the export modal from the left toolbar. Copy the import statement and JSX snippet, or the HTML embed tag to your clipboard. Paste the code into your render function, or your HTML document.

Load the page in your browser and verify that your component renders.

Congratulations! You may now modify your feature in the Mason Builder without redeploying.

​