Documentation
  • Documentation
  • Development
    • Quickstart
    • Initialization
    • Embedding
    • Pages
    • Forms: Sending Data
    • Datasources: Fetching Data
    • Mapping Data
    • Custom event listeners
    • URL Parameters
    • Handling Errors
    • Security
    • Nesting Components
  • 3rd-Party Integrations
    • reCAPTCHA
    • Stripe
Powered by GitBook
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
  1. Development

Quickstart

Get up and running with our library and deploy your first feature.

PreviousDocumentationNextInitialization

Last updated 6 years ago

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

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 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 application, simply add it as a dependency. If you'd like to create a new application, use .

Using

npm install @mason-api/react-sdk

Using

yarn add @mason-api/react-sdk

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

Optionally, use our to get started (or use your own).

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

Obtain your API key and initialize Mason

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.

Find your API Key on your

Mason profile.
create your Mason account,
new feature dashboard,
React
our React quickstart
npm
yarn
HTML custom elements
JavaScript Quickstart
Create a Mason feature
Add one of the Mason SDK's to your application
Obtain your API key and initialize Mason
Embed your feature in your application