Changelog

Intercom integration

Support for CSV/TSV imports

Password-protected pages

Page version history

Diff editor

Clipboard support for images and files

Comments and votes component

Improve onboarding

Per-project data loading

Faster publishing

Fuzzy search on file names and folders.

Improve automatic link insertion shortcut.

Explicitly show non-MDX file extensions.

Improve component insertion in Markdoc pages.

Write project to disk, in addition to two-way sync.

Improve Monaco Tailwind support.

Expose page headings to templates, so that they can be indluded in the search index, for instance.

The Motif editor can be customized using Remark plugins, adding capabilities such as spell checking, readability warnings and stylistic errors.

When uploading an image through Motif, it will automatically benefit from Next.js image optimizations, for faster downloads and reduced layout shift. This improves performance metrics and SEO.

When using Markdown links between pages, Motif will prefetch the content for faster page transitions, using Next.js links.

Templates are persistent across page transitions, and will therefore keep their state. This is useful for instance for sidebar menus, to keep the scroll position.

When using some popular JavaScript packages, such as React and Lodash, in your pages, Motif will shim them to reduce the size of your published pages and improve load speed.

The Motif platform has a fallback datastore, in case of database downtime during a page rebuild process.

Motif now has an out-of-the-box search component, which is also part of the docs templates.

The page build process has been moved from the client to the server, drastically speeding up the publishing process.

The Motif platform includes Preview Deployments, allowing you to see the latest version of your website before publishing it.

A progress indicator is displayed while your site is being published.

Pages are now generated using On-Demand Incremental Static Regeneration.

A global CSS file is compiled for the entire project, instead of per page. We have also improved the way Tailwind classes are extracted for compilation, for instance for components which are initially hidden, such as a dropdown menu.

Upgrade to Tailwind CSS 3.1.

Markdoc pages have full support for syntax highlighting of code boxes.

Motif supports TypeScript, as well well JSX/TSX, JSON and plain text files.

In addition to @ imports, relative (e.g. `../components/navbar`) and absolute (`/pages/welcome`) imports are supported.

Improved error handlings across all file types.

Better performance for large projects (100+ pages).

Markdoc, the Markdown extension built by Stripe and powering their documentation site, is now supported in Motif, alongside MDX.

You can now sync all your Motif content with a local folder on disk. This enables you to edit your content with your tools of choice, such as VS Code or Obsidian, and store it wherever you want, such as on GitHub or Dropbox.

Components and sites now have a public-facing website, at motif.land/community.

You can now add a `sitemap.excludePaths` entry to motif.json to prevent public pages from being included in the sitemap.

We are introducing component libraries, which allow you to share content between projects, or with the community. Similar to NPM, but with 1-click sharing.

Each tab now has its own URL, for easy sharing of pages when collaborating.

We have created a guide showing you how to import content from Motif into Webflow, giving you a better writing experience for long-form content, all while maintaining your Webflow assets and design intact.

Pages now load much faster thanks to reduced JS bundle sizes and code splitting.

Join the Motif community on Discord and share your projects, questions, and feedback.

Head over to motif.land/play and experiment with code samples to get a grip on how Motif works. Try out samples such as a full-featured blog and changelog, a demonstration of Tailwind CSS, or the use of external libraries like Headless UI and d3.js.

Projects can now be moved between teams.

Visit motif.land/docs to access the new Motif documentation. With extensive guides, examples, API docs, tips and more.

Pause publishing now applies to an entire project, and not only a single page. The content you create will still save and propagate to all collaborators, but will not be published until you explicitly decide to. You can trigger a publish via the Share menu.

Slash commands, invoked by hitting "/", offer quick auto-complete suggestions for common blocks, such as a table, or actions, such as bringing up the image file picker.

In the options menu, hit Show responsive preview to bring up a preview resizer, enabling you to view your page in mobile, tablet or desktop mode.

New keyboard shortcuts for creating and deleting files and folders, navigating tabs, formatting content, duplicating lines, and multi-cursor selection.

Motif is now local-first: everything is stored on your device, and synced remotely when needed and when possible. This means that you can access all your content at any time, regardless of whether you are online or not. And because it's all local, it become incredibly fast.

When you hit save, your content will be automatically formatted using Prettier.

You can now download all your invoices from the Billing page.

Motif now supports real-time multiplayer, allowing you to seamlessly edit pages with as many collaborators as you want, at the same time.

The Motif Platform API gives you access to the Motif platform, such as teams, projects and files, via an HTTP endpoint. The API also exposes your pages as ES modules, so that you can reuse them across any JavaScript project that supports ES modules.

You can now automatically build an index of pages, for instance for your blog, by using the `files` value passed in a template.

Code blocks, delimited by ```, will now be parsed with the PrismJS tokenizer. You can customize the colors in your main.css file.

Instant search now allows you to quickly navigate between your files.

You can now bulk import Markdown files into a project.

If you no not want your content to be instantly published (for instance while working on a draft), you can hit "Pause publishing" in the Share menu. When untoggled, publishing is resumed.

We are introducing projects, which allow you to better organize your content. Each project has its own subdomain, and can be assigned its own custom domain. Furthermore, instead of sharing single pages, you can now share an entire project.

We are making it easier to access your content, by putting all your project pages into the sidebar, and introducing folders to better organize them.

The editor is now tab-based, so that you can work on several open files at the same time.

With templates, you can create shared designs to be reused across sets of pages.

Motif now supports ES modules, allowing you to import your favorite JavaScript modules from the web straight into a page, with no further setup.

Motif now supports a custom Tailwind configuration, and includes the latest Tailwind compiler with JIT support.

A global CSS file can now be included for things that are currently cumbersome to do in Tailwind, such as keyframe animations.

We have optimized the in-browser build process even further, to achieve near-perfect Lighthouse scores, which indicate among others how fast your pages are loading for your visitors.

You can now drag and drop files and images into the editor. The assets will be uploaded to Motif, and corresponding content blocks will be inserted into your page at the position of the cursor.

We are introducing a `usePages()` hook, which allows you to obtain a list of all the pages in your space. This makes it easy to create an auto-generated index of pages for your blog or book.

You can now paste rich content in Motif, such as images and files. Furthermore, if pasting from rich text sources, the editor will preserve formatting, such as links, headings and bold.

The editor is now offloading MDX transpilation to a background worker, improving performance for large text content.

You can browse the full edit history of your page and restore previous versions of your content.

You can load external JavaScript libraries into your page. For ES modules, use the async import function. For libraries without ESM support, use the useScript hook.

We have added a new Community section, for finding and sharing content. You can now go to the Community section, find a template that fits your use case, and press the "Duplicate" button.

We have introduced keyboard shortcuts to improve the typing experience, and to quickly perform actions that would typically require using the mouse/trackpad.

Turn on distraction-free editing, as well as full-screen previews.

You can get unbranded content or add additional team members to your spaces through our Pro or Team plans.

Motif is available as a desktop app.

You can now give individual users fine-grained permissions on your pages, via the Share button.

In the Member settings, you can assign roles, even for users who have not yet joined. You can also resend or cancel invitations, and remove members.

You can now track page visits by providing a Google Analytics 4 property using the gaMeasurementId key (or gaTrackingId for legacy configurations) in your page metadata.

When hosting pages on a custom domain, a sitemap and robots.txt file will automatically be generated for all the public pages in your space. This will make it easier for search engines to discover and list your content.

Upload multiple files at once using the file picker.

If you visit a page from a custom domain, it will now appear almost instantaneously, as it has been pre-generated and cached on the edge.

When serving a page via your custom domain, you can now specify Open Graph meta properties in your page's metadata, under the meta property, for SEO and sharing purposes.

You can now give your page a custom favicon by specifying an image in the page metadata using the favicon key.

With Tailwind CSS support, you can add arbitrary CSS styling to your pages and components, including media queries for responsive designs.

By adding the export keyword to your custom React components, they become available for reuse across all your pages.

As part of the built-in blocks, we now have a fully customizable, responsive <Navbar /> component.

In your page metadata, you can now apply classes to specific elements.

The editor now supports shortcuts for bold and italic text.