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 one of the Mason SDK's 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 an SDK 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 our React quickstart.
Using npm​
npm install @mason-api/react-sdk
Using yarn​
yarn add @mason-api/react-sdk
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. 
Optionally, use our JavaScript Quickstart to get started (or use your own).
<script src="https://static.trymason.com/[email protected]"></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-api/react-sdk';
​
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, after you've built a few features and published them, click the deploy button in the top right. Follow the deploy instructions, and you're live!
Load the page in your browser and verify that your feature renders.
Congratulations! You may now modify your feature in the Mason Builder without redeploying.
​

Documentation

Next - Development

Initialization

Last modified 3yr ago

Copy link

On this page

Create a Mason feature

Add an SDK to your application

Obtain your API key and initialize Mason

Embed your feature in your application