Changelog

New features, fixes and improvements.

Follow @motifland on Twitter

January 13, 2022

Motif playground

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.

Quality of life improvements

  • Move project to another team.
  • Add option to disable auto-formatting.
  • Add option to disable render-on-type.
  • Create new file from folder.
  • Shortcut to create a new template.

Bugfixes

  • Fix bug causing editor to reload sporadically.
December 18, 2021

New documentation website

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

Pause publishing entire project

Pause publishing now applies to an entire project, and not only a single page. Go to the project settings (hit ,), select the Publishing tab and disable Auto-publish. 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.

Responsive preview

In the page's options menu, hit Show responsive preview to bring up a preview resizer, enabling you to view your page in mobile, tablet or desktop mode. You can also drag the preview window to obtain an arbitrary size.

New shortcuts

New file^N
New folder^N
Next tab>
Previous tab<
Close tab^W
Close other tabs^W
Close tabs to the right^R
Format contentS
Toggle render on typeS
Multi-cursor selectD
Duplicate lineD
Delete file (in sidebar)
Rename file (in sidebar)

Quality of life improvements

  • Updated onboarding flow.
  • Slightly redesigned project sidebar.
  • Toggle developer mode to quickly grab the ES module link of your page.
December 1, 2021

Slash commands

Hit / from anywhere in your text to bring up the slash command palette. This offers quick auto-complete suggestions for common blocks (e.g. a table) or actions (e.g. bringing up the image file picker).

Enable/disable render-on-type

By default, your page preview gets updated with each keystroke, to make it easy to see the results of your actions in real time. However, sometimes this may not be convenient, for instance when working on a JSX component, where intermediate steps can result in temporary invalid code. Or you may just want to be focused on your writing, and not on the visual result (hint: \). For that reason, we're introducing the option to disable render-on-type. This can be activated via the options menu at the top right of your page. It can also be toggled on/off using the shortcut S. Once you are done with your writing, hit S to update the preview.

Upgrade to MDX 2

Motif is now using the latest version of the MDX compiler. This means faster compilation and execution, improved syntax (for instance, better support for Markdown within JSX blocks), and a foundation for future improvements to Motif.

Quality of life improvements

  • Faster publishing of large projects.
  • Improved error handling, for instance showing a link to erring files and line number references when available.
  • Improved 404 pages, with hints to fix potential publishing issues.
  • New help menu (accessed via the ? button) with shortcuts and Markdown cheat sheet.
  • Improved CSS auto-completions.

Bugfixes

  • Fix issue preventing large projects (>4MB) from being synchronized locally.
  • Fix bug causing image not being inserted when the cursor is within a text block.
  • Fix file merging issue when a file is updated on two different clients while both are offline.
November 20, 2021

Offline mode

Motif is now a local-first app: everything is stored on your device first and foremost – and only 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's incredibly fast. Motif even caches online resources, such as images or imported JavaScript modules, so your pages will load seamlessly, as if you were online.

Since the main storage source is on the client, it also means that whatever you want to do, you can do without a connection. For instance, you can create new teams, projects and pages while offline. When Internet becomes available again, your data is synced across your clients.

Instant actions

Because your data is now stored locally on all your clients, everything becomes instantly available and actionable. You will notice how Motif got way snappier, for instance when opening a new file or when switching projects.

Prettier auto-formatting

When you hit S, your content will be automatically formatted using Prettier. If you wish to disable auto-formatting for a section of your page, simply add {/* prettier-ignore */} in front of the section.

Quality of life improvements

  • Duplicate files.
  • Duplicate projects.
  • More resilient handling of case in imports.
  • Download invoices.
  • Update card payment details.
  • Show toast messages for common actions.
  • Show loading indicator while project is publishing.

Bugfixes

  • Fix Safari sync issues on large projects.
  • Fix React hydration issue on Safari.
  • Fix issue with bulk uploading multiple Markdown files.
  • Fix issue with glob matching of templates.
  • Fix resolution of external imports (@headlessui/react) vs. internal imports (@components/navbar).
October 29, 2021

Real-time multiplayer

Motif is about bridging the gap between developers and non-developers, and bringing everyone on the same page to meaningfully and productively collaborate on content. That's why we are thrilled to announce today the introduction of real-time multiplayer. By leveraging state-of-the-art technologies like Y.js and WebRTC, Motif now allows you to seamlessly edit pages with as many collaborators as you want, at the same time.

August 13, 2021
curl "https://api.motif.land/v1/projects" \
  -H "Authorization: Bearer <TOKEN>"

Introducing the Motif Platform API

The Motif Platform API gives you access to the Motif platform, such as projects and pages, via a simple HTTP endpoint. For instance, fetch a list of pages within a project using the /v1/projects/:id request:

curl "https://api.motif.land/v1/projects/a-page-id" \
  -H "Authorization: Bearer <TOKEN>"

The API also exposes your pages as ES modules, so that you can reuse them across any JavaScript project that supports ES modules, for instance:

import Page, { meta } from "https://api.motif.land/v1/pages/esm/a-page-id"

const Component = () => {
  console.log("Meta", JSON.stringify(meta))
  return <Page />
}

export default Component

Generate page indexes

You can now automatically build an index of pages, for instance for your blog, by using the files value passed in a template. Learn more about this in the "Generate an Index of Pages" guide.

Syntax highlighting with PrismJS

Code blocks, delimited by ```, will now be parsed with the PrismJS tokenizer, which allows you to beautifully highlight it. You can customize the colors in your main.css file, as explained in the guide on syntax highlighting.

<!-- Some highlighted HTML -->
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

Quality of life improvements

  • Improve public page indicator.
  • Improve linking to community resources.
  • Improve support for dynamic page metadata.
July 20, 2021

Instant search

By hitting the P key, you can bring up the new instant search dialog, which allows you to quickly navigate through your files.

Markdown import

You can now easily import all your Markdown files into the pages folder of your project. Head over to the project settings, and navigate to the Import tab.

Pause publishing

By default, when marking a page as "Public" via the Share menu, all subsequent changes are automatically published. Now, if you don't want your content to be instantly published (for instance while working on a draft), you can hit the "Pause publishing" toggle in the Share menu. Only when untoggled will publishing be resumed.

Quality of life improvements

  • Syntax highlighting.
  • Recover deleted files.
  • Reorder tabs.
  • Improved file tree UX.
  • Improved version history.
  • Prevent accidental deletes of spaces and projects.
  • Improved error handling with line numbers.

Bug fixes

  • Fix Safari bug causing file tree to be non-editable.
  • Fix guest access bug causing guests to not see pages with templates.
June 28, 2021

Motif is all about removing the gap between developer tools and no-code tools, and with this release, we are taking this a major step further on several fronts.

Projects, folders and tabs

In addition to spaces, we are introducing projects, which allow you to better organize your content. Within one space, you can for instance have a project for your main website, your blog, a marketing experiment, documentation, shared notes, and so on. Each project has its own subdomain, and can be assigned its own custom domain. Also, instead of sharing single pages for others to reuse, you can now share an entire project.

Furthermore, 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.

Finaly, we are introducing tabs, so that you can work on several open pages at the same time.


One important change is that the path of your pages are now determined by the page name, and the folder it's in. So for instance if you have a page named welcome within the blog folder, it will be accessible at the blog-slash-welcome path. So you no longer need to add a path entry to your page's metadata. If you want a title for your public webpage which is different from the file name, you can specify that in the metadata using the title key. If you want a page to be accessible without a path, simply name it Index. Don't worry, for all your pages with a custom path, we've migrated them to the new folder-based structure.

Templates

Many of you have been asking for the ability to create a design, and reuse it across multiple pages. Now, thanks to ES module imports, you can do just that. In your project's source (which you can access by tapping the down arrow next to the sidebar toggle , and select "Source"), you will find a templates folder holding your templates. These are pages that should export a default component to wrap your page content. Read more in the Templates guide.

ES module support

With ES module support, you can import your favorite JavaScript modules straight into a page, with no further setup. Simply include lines of the form

import * as d3 from "d3"
import React, { useState } from "react"
import { RadioGroup } from "@headlessui/react"

and use the modules just as you would in a classical Node-based application.

Similarly, content from your pages can be exported for other pages to reuse, such as a shared navigation bar, or a list of authors for your blog posts. For instance, here is a page named data, located in a folder named assets:

export const authors = [
  {
    name: "Hannah Nelson",
    twitter: "Hannah_KL_Nelson"
  },
  ...
]

Now, from any other page, import the authors list by prepending the path with @:

import { authors } from "@assets/data"

{
  authors.map((author) => <Card author={author} />)
}

Tailwind configuration and JIT

We now support a custom Tailwind configuration for you to include custom color palettes, typography, dimensions etc. in your Tailwind classes. Furthermore, Motif features the latest Tailwind compiler with JIT support. So you will now see your style changes being applied in real time, with an optimized stylesheet. It also means that we now support Tailwind classes with custom values, such as bg-[#f0f] or my-[97px], which is convenient for very specific, on-off use cases.

Global stylesheet

In the styles folder, you will find a main.css file, allowing you to create project-wide CSS to be applied to all your pages. This is a convenient place to include things that are currently cumbersome to do in Tailwind, such as keyframe animations.

Speed: reaching near-perfect Lighthouse scores

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. This is important for SEO and user experience.

March 9, 2021

Introducing the Pages API: easily generate an index for your blog or book

This is the beginning of a broad set of API functionalities for interacting with your own data. We introduce a usePages() hook, which allows you to obtain a list of all the pages accessible to you or to viewers of your content. You can freely apply transformations to your page list, such as filtering by tag or public state, or sorting by publication date. This makes it easy for instance to create an auto-generated index of pages for your blog or book.

Drag and drop

You can 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.

Paste rich content (Chrome/Edge/Brave only)

We are introducing rich copy-paste functionality. Using the V shortcut, content (e.g. from a website) will be pasted preserving the formatting (links, images, headings, bold, etc.). You can even copy an image or any other file from your computer, and paste it into the editor, and Motif will take care of uploading the file and generating the corresponding block. Of course, if you wish to paste content but not preserve the formatting, use the usual V shorctut.

Note that rich paste functionality is only available on Chrome, Edge and Brave. It is not yet supported on Safari and Firefox.

New guides

  • Metadata. An overview of the currently supported metadata items.
  • Create an index of pages. A guide on how to use the Pages API to create an index of pages, e.g. for your blog.

Quality of life improvements

  • Performance improvements for large page, by running the MDX transpiler in a background worker.
  • Auto-complete when a <Tag></Tag> is entered.
  • Bullet points are automatically indented.
  • Numbering in numbered lists is automatically incremented.
  • Improved line wrap behavior.
  • Adjust Motif footer logo to page color.
  • Access a template's source code without having to duplicate it.
  • New comment block {/**/}.
  • New image block to add an image from a URL (rather than from the file picker).
  • Version history is more fine-grained for snapshots closer to now.
  • Shortcut to create a link: K.
  • Shortcut to add a block: B.
  • Shortcut to comment text: /.

Bug fixes

  • Fix bug preventing to enter card details.
  • Fix version history stalling on documents with a lot of edits.
  • Fix Tailwind CSS colors.
  • Fix issue allowing you to register a custom domain even when it is registered elsewhere.
  • Fix clipboard permission issue on Firefox.
February 16, 2021

Community resources

We've added a new Community section, available in your sidebar. This is the beginning of a centralized place to find and share already built-out content. You can now go to the Community section, find a template that fits your use case, and press the "Duplicate" button. This creates a copy in your current space, which you can then adjust to fit your needs. In addition, you can also turn any page into a template for others to duplicate and reuse. Simply press the "Share" button to open the Share menu and toggle on Publish as template.

Updated guides

We've created a new Guides section, where, as part of the introduction of community resources, we have centralized all guides, tutorials and sample code, and created a series of new guides.

Import external JavaScript libraries

You can load external JavaScript libraries into your page. In that way, you can benefit from the resources built by the JavaScript community without requiring Motif to support them explicitly. For modern ES modules, use the async import function. For libraries without ESM support, use the useScript hook. Read more in the JavaScript import guide.

Version history

You can browse the full edit history of your page and restore previous versions of your content. Access it via the page settings menu → Show version history.

Keyboard shortcuts

We have introduced keyboard shortcuts to improve the typing experience, and to quickly perform actions that would typically require using the mouse/trackpad. For instance, you can now immediately preview your page in full screen, or go into distraction free writing. The shortcuts currently supported are listed in the Help menu, accessible via the ? button at the bottom right of the app.

Quality of life improvements

  • Distraction-free mode: \.
  • Toggle full screen preview: \.
  • Keyboard navigation: [ and ] to navigate back and forward).
  • New useScrollPosition() hook to track page scroll position, allowing for things like fade in animations and parallax effects. Read more in the Parallax tutorial.
  • Speedier look and feel.
  • SEO and performance optimizations.
  • Support for aria-label on links and alt on images.
  • Improved error handling in the page metadata.
  • Keep track of last cursor position within a page, and restore it upon reopening.
  • Improved scrolling for public pages (especially elastic scroll on mobile).
  • More resilient handling of paths in page metadata.
  • Collapse sections in the code editor.

Bug fixes

  • Fix link pre-fetching bug that caused some links to break for server-side rendered pages.
  • Fix bug causing spurious path conflict errors.
  • Fix background color issue when overscrolling on mobile.
  • Fix cursor glitch when opening a new page.
January 16, 2021

New Pro and Team plans

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

Desktop app

Motif is available as a desktop app! Open the space switcher, and you should see "Download desktop app" as an option.

For Mac, Windows and Linux.

Page sharing permissions

Give individual users fine-grained permissions on your pages. Hit the Share button, invite people by email, and give them view, edit or full access.

User management

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.

In addition to invitation links, you can use email to invite others to collaborate on your space.

Google Analytics

When hosting pages on a custom domain, you can track visits by providing a Google Analytics 4 property using the gaMeasurementId key (or gaTrackingId for legacy configurations) in your page metadata. Read more on the Google Analytics guide.

Sitemaps

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.

Quality of life improvements

  • Upload multiple images at once using the Image file picker.
  • Display page path in My Pages.
  • Delete account.
  • Delete space.
  • "Copy to clipboard" button to share a page link.
  • Swallow Cmd/Ctrl+S.
  • Adapt default page padding on mobile devices.
  • Adapt default padding for headings.

Bug fixes

  • Fix bug causing users to be redirected to their space when accessing a public page from a space of which they are not members.
  • Fix bug causing imported components not to display on pages served via custom domains.
  • Fix bug causing the editor toolbar to be unclickable.
  • Fix bug causing pages containing client-side code (such as document) to err when rendered server side.
  • Fix mobile page scrolling issue for public pages.
  • Fix bug causing delete pages to fail.
December 13, 2020
100
Performance
100
Accessibility
100
Best Practices
100
SEO

Fast page loads

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.

Open Graph meta tags

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:

---
meta:
  "og:url": "https://acme.com/blog/design-principles"
  "og:title": "Ten principles for good design"
  "og:description": "Ten principles for good design by Dieter Rams."
  "og:image": "https://res.cloudinary.com/djp21w..."
---

Custom favicons

You can now give your page a custom favicon by specifying an image in the page metadata using the favicon key. Read more in the Custom Favicon guide.

Quality of life improvements

  • Add support for sub-paths, e.g. path: blog/ten-principles-of-design.
  • Add support for uploading SVG images.
November 30, 2020

Tailwind CSS support

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

Shareable components

By adding the export keyword to your custom React components, they become available for reuse across all your pages. You can find them in the block picker (click "Add Block" at the bottom of the editor).

New <Navbar> component

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

Global page styles

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

---
class:
  container: "max-w-screen-lg"
  h1: "text-5xl sm:text-6xl font-black text-gray-900"
  p: "pt-2 py-2"
  Input: "rounded-xl py-3 text-lg"
---

Quality of life improvements

  • Shortcuts for bold B and italic I.
  • Automatically add a new bullet point when hitting enter from another bullet point.
  • Shift-click to select ranges of pages in "My pages" for bulk actions.
  • New Recents section in the sidebar.
  • Fonts now display nicely on Windows.
  • Faster page creation.
  • Sync status indicator.

Bug fixes

  • Fix bug causing editor to stall or be read-only.
  • Fix bug causing onboarding to not complete.
  • Fix bug causing root path to reload infinitely.
  • Fix bug causing editor not to resize.
  • Fix bug causing Unsplash images to flicker on Safari.
  • Fix bug causing sender name and avatar to not display on message blocks.
  • Fix bug causing large images not to be uploaded via the image picker.
  • Better handling of Guest access on a space.
  • Better handling of resizing.
  • Better handling of path collisions (to avoid several pages at yourdomain.motif.land/same-path).