Project Structure

An overview of the file structure of a project.

In your team, you can have any number of projects: one for your website, blog, marketing experiment, documentation, shared notes, and so on. Each project can be assigned a custom domain. In addition to your pages, a project contains templates, components, and configuration files.

Project files

By default, only pages are visible in your sidebar, so that you can stay focused on the content:

Blog
Index
Welcome
About
Index

The checkmark indicates that the page is public.

Your pages are simply files that exist in a special pages folder within your project. To view all your project's files, tap on Pages at the bottom of the sidebar, and select the Source view.

Project source

This will reveal the full project file tree:

components
Navbar
pages
Blog
Index
Welcome
About
Index
styles
main.css
templates
blog
plain
motif.json
tailwind.config.js

In addition to the pages folder, the project contains:

  • A components folder, in which you can conveniently put your JSX components. Note that this is not a requirement: your components can live anywhere, including within pages themselves. See below for how components can be imported from other files.
  • A styles folder, containing a file named main.css, which is your project's global stylesheet. Read more about this in the Main CSS article.
  • A templates folder, containing your project's templates. Read more about this in the Templates article.
  • A motif.json file, which is where your main project configuration is defined, such as the project's favicon, metadata tags, and font imports. Read more about this in the Motif Config article.
  • A tailwind.config.js file, which is where your Tailwind configuration is defined. Read more about this in the Tailwind Config article.

File import paths

With the exception of the three project configuration files, every file that you create in your project is an MDX file, and can be imported from any other file using the standard import syntax for ES modules:

import Page from "@pages/welcome"

The import path of a file is determined by the folder in which it resides, and is prepended with an @ symbol to distinguish it from external imports, such as react. For instance, the Navbar file in the components folder can be imported using the syntax:

import Navbar from "@components/navbar"

File and folder names can include spaces and uppercase characters. However, the associated import path is obtained by replacing spaces with dashes, and all letters are lowercased. So if you have a file named Project Sidebar in a folder named My Components, its import syntax will look like:

import Sidebar from "@my-components/project-sidebar"

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