Introducing 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. It even works when you are offline.

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 Prism JS

Code blocks, delimited by ```, will now be parsed with the Prism JS 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

Instant search

By hitting the

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. This is a feature of the Pro plan.

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
• Full screen preview
  ⌘
  \
  (Mac) /
  Ctrl
  \
  (PC)
• Full screen editor
  ⌘
  ⇧
  \
  (Mac) /
  Ctrl
  ⇧
  \
  (PC)
• Toggle editor and preview
• 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

Motif is all about bridging 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.

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.

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

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 (Mac:
  ⌘
  K
  , Win/Linux:
  Ctrl
  K
  ).
• Shortcut to add a block (Mac:
  ⌘
  ⇧
  B
  , Win/Linux:
  Ctrl
  ⇧
  B
  ).
• Shortcut to comment text (Mac:
  ⌘
  /
  , Win/Linux:
  Ctrl
  /
  ).

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.

Introducing 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

Quality of life improvements

• Distraction-free mode (Mac:
  ⌘
  ⇧
  \
  , Win/Linux:
  Ctrl
  ⇧
  \
  ).
• Instant full screen previews (Mac:
  ⌘
  \
  , Win/Linux:
  Ctrl
  \
  ).
• Keyboard navigation (Mac:
  ⌘
  [
  and
  ⌘
  ]
  , Win/Linux:
  Ctrl
  [
  and
  Ctrl
  ]
  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.

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.

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.

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.

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).

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.

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 (Mac:
  ⌘
  B
  , Win/Linux:
  Ctrl
  B
  ) and italic (Mac:
  ⌘
  I
  , Win/Linux:
  Ctrl
  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).