ES Modules and URL Imports

A guide to using ES modules and URL imports.

ES modules and URL imports add powerful possibilities to your pages, as you can leverage the full web ecosystem without any further setup.

URL imports

import confetti from "canvas-confetti"

{confetti()}


With a single line, we've imported the canvas-confetti module from the web—no further configuration required.

When you specify a package without any URL, Motif looks it up at Skypack. You can also specify full URLs:

import confetti from "https://unpkg.com/canvas-confetti@1.4.0/dist/confetti.module.mjs"


Your pages and components are ES modules as well

The pages and components you create are also ES modules, and can be used just like external modules. For instance, if we create a navigation bar component in the components folder:

// File: /components/navbar
export const Navbar = () => {
return <div>My navbar</div>
}


it can be imported into your page or template using the same import syntax, and prefixing the path with the @ symbol:

import { Navbar } from "@components/navbar"


Pages are ES modules as well, exported as the default export, so you can do:

import Post1, { title as title1 } from "@pages/posts/post1"
import Post2, { title as title2 } from "@pages/posts/post2"
import Post3, { title as title3 } from "@pages/posts/post3"

# {title1}

<Post1 />

# {title2}

<Post2 />

# {title3}

<Post3 />


Importing into other projects

If a page is marked as public, it is exposed as an ES module via a public URL, so you can use it in your other, non-Motif, projects, with the same ease as when you use them internally in your project. For instance, you can create content in Motif and import it into a Webflow site with a simple import statement. This is explained in the Webflow integration guide.