Integrate with Webflow

A guide to integrating Motif pages into a Webflow project.

Webflow is a great no-code tool for building websites. However, when it comes to authoring text-heavy content, such as a documentation site or a changelog, a plain text interface like Motif might be better suited.

Suitingly, all content created on Motif is exposed as a JavaScript module, and can be freely reused in any tool that supports imports. This is the case with Webflow. The setup is straightforward, and is explained below.

Obtaining the import URL of your Motif page

First, make sure that "Developer Mode" is activated in Motif. Click the three dots icon at the top-right corner of your page, and check "Developer Mode".

Now, when you open a page's Share menu, you will see a JavaScript import URL at the bottom. Copy that to the clipboard. Only public pages are accessible.

Importing page content into Webflow

Now, head over to Webflow and do the following:

  • Open the Add Elements panel (A)
  • Select Embed under the Components section
  • Insert the component on your page, and click on it to open the code editor
  • Paste the following in the Custom Code field, replacing <MOTIF_MODULE_URL> with the copied URL:
<script type="module">
  import react from "https://cdn.skypack.dev/react";
  import reactDom from "https://cdn.skypack.dev/react-dom";
  import Page from "<MOTIF_MODULE_URL>"

  ReactDOM.render(
    React.createElement(Page, {}, null),
    document.getElementById('core-cms-content')
  )
</script>

Your Motif content will now show up on your Webflow website.

Importing components and data into Webflow

In addition to exposing your page as a JavaScript module, Motif also exposes any component or object within your page. For instance, this could be a navigation bar React component, or some page data. These components and objects can be imported into Webflow in the same way, except that your tell specifically which one to use in your import statement. For instance, say your Motif page defined a component named "Navbar", and an object named "data":

export const Navbar = () => {
  /* */
}
export const data = { title: "..." }

These items can be imported in Webflow, with or without the entire page. For instance, here we import the page, as well as the Nvabar component and data object:

<script type="module">
  // ...
  import Page, { Navbar, data } from "<MOTIF_MODULE_URL>"

  console.log("Data:", JSON.stringify(data))
  // ...
</script>

In this way, you can use Motif as your single source of truth for data, components and content, and use it across all your web assets.

Copyright © 2022 Motif Land Inc. All rights reserved. This website is built with Motif.