If you are encountering an issue, chances are you are not alone. Here are a few common ones, and how to get around them.

My docs sidebar does not include some pages

Make sure your page is public. Your sidebar is likely using the files prop supplied via a template, which deliberately only contains public files, to avoid accidentally exposing private data to a live website.

Embedding an iframe generates an error

Oftentimes, embed snippets use plain HTML syntax, including for inline CSS styles. Here is an example from Airtable:

  style="background: transparent; border: 1px solid #333" />

However, Motif uses JSX syntax, which require the style prop to be a JavaScript key-value object, and not a string as above. The above example should therefore be rewritten as follows:

    background: "transparent",
    border: "1px solid #333"
  }} />

The preview doesn't load

Do a hard refresh of the page . If the problem persists, open the browser console, and look for errors. If there are none, try to clear the browser cache. If the problem is still there, ping us on Discord.

I added a Google Analytics tracking ID, but my analytics dashboard doesn't show any events

It usually takes a little time (up to a few hours) before the first events appear on the Google Analytics dashboard.

Using inline CSS styles generate a React error

Motif uses JSX syntax, which require the style prop to be a JavaScript key-value object, and not a string as in HTML. So instead of

<div style="background-color: red" />

you should write

<div style={{ backgroundColor: "red"}} />

Notice how the key is turned from kebab case (background-color) to camel case (backgroundColor).

My images are loading slowly and cause content to shift on the page

If your images are hosted elsewhere than on Motif, we may not be able to perform image optimizations, such as serving the image at the right resolution and precomputing the aspect ratio to prevent Cumulative Layout Shift. One solution is to upload your images on Motif (simply drag and drop them into the editor). This allows Motif to do the required optimizations (leveraging Next.js' Image component) and serve images fast to visitors of your site.

LinkedIn uses outdated SEO tags / metadata when I share a page

When you paste a link on LinkedIn, even before sharing it, LinkedIn stores the page metadata instantly. Unfortunately, if you subsequently change your SEO tags (such as the title or cover image), LinkedIn does not clear the cache, and you will still see the old values showing up. One workaround that currently works is to paste the same link, but add a character at the end of the link, such as ?, that still opens up the same page. This will trick LinkedIn to think it's a new page, and load the updated SEO metadata.

I am on a paid plan and the Motif footer is still showing up

Head over to the project settings , go to the Pages tab and untoggle "Include footer".

My editor shows a bunch of yellow squiggly lines

These are warnings and hints generated by the active Remark plugins. You can disable them by editing the .remarkrc.js file located at the root of your project. Learn more about Remark plugins

Log in form shows an error

Try to reset the app data. In Chrome and Brave, open the browser console, choose the Application tab, then the Storage tab, and hit "Clear site data":

In Firefox, open the settings, navigate to Privacy & Security, and hit "Clear Data". In Safari, open the settings, navigate to Privacy and hit "Manage Website Data...". Choose "motif.land" and hit "Remove all".

I created a page named "Analytics" and when opening it in the live version, it shows an error

On some browsers, such as Chrome, pages named something with "analytics", like "Page Analytics" get treated specially, perhaps by ad trackers. This issue has been filed on the Next.js project. It usually works in incognito mode. Due to the unpredictable behavior of browsers, we recommend you name your pages something different.

Can't find your issue? Ping us on Discord.