When content meets code,

Motif is a collaborative authoring platform for MDX and Markdoc.
From playful blogs to kick-ass docs, Motif scales with you.

As easy as a Google Doc, as powerful as a Jamstack IDE.

A powerful collaborative MDX and Markdoc editor with real-time preview, allowing your team to produce state-of-the-art websites with zero setup.

Kanjun Qiu

Founder, Generally Intelligent

Motif has been such a game changer. I’m so excited to finally be able to put my thoughts on the web.


Hannah Le

Software engineer, SickKids

Motif gives me the familiarity of Markdown and flexibility of NPM and React, with the ease of use of a Google Doc. For someone who wants both low friction to publish her thoughts and high standards website design, Motif is the answer.


Jess Chang

Designer, Airbnb

Motif is a game changer for designing my portfolio. It's way better than Webflow for my personal needs.


Chris Smothers

Founder, Homebase

I do really love Motif for my personal site. Honestly I probably wouldn’t have one if Motif didn’t make it so easy to get something I’m happy with.


Build from the comfort of your browser.
No Node required.

No local dev environment to setup, no `npm install`, no fixing dependencies, no pull requests, no deploy step. Motif is a local-first app running 100% in the browser, without a server, so it even works when you are offline. Just open it up, and start building.
npm install XXX

Out-of-the-box greatness

Built on top of a world-class frontend stack


MDX / Markdoc

MDX and Markdoc both combine Markdown and JSX into a powerful mix of content and code. Long-form writing with interactive components becomes a blast.

Tailwind CSS

In addition to vanilla CSS, you can use Tailwind's utility-first CSS framework, making it a joy to work with styling and layouts.


Pages and components are built using React's powerful component paradigm. Creating content feels like playing with LEGO.

Vercel + Next.js

Your content is published as a Next.js application and cached on Vercel's edge network, for optimal speed and SEO.

What’s included

Everything you’d expect from a modern authoring environment

  • Local-first
  • File sync
  • Real-time multiplayer
  • Custom domains
  • SEO
  • Drag-and-drop
  • Shared components
  • Slash commands
  • Instant search
  • IntelliSense
  • Keyboard-first
  • Distraction-free editing

Gorgeous community-powered templates and designs

Apply custom React templates, style your pages using Tailwind CSS, and remix with content from the community.



June 26, 2022• Jessie Kruze, Abigail Matthews, Jeff Wu, Charles Joy

Means for Interactive Communication

main image

Multiple representations give multiple perspectives

Complementing views, like user-controled animation and small multiples, help engage and connect readers.

thumbnail 0
thumbnail 1
thumbnail 2
thumbnail 3
thumbnail 4
thumbnail 5
thumbnail 6
thumbnail 7
thumbnail 8
thumbnail 9
thumbnail 10

Source: Distill.pub

Computing has changed how people communicate. The transmission of news, messages, and ideas is instant. Anyone’s voice can be heard. In fact, access to digital communication technologies such as the Internet is so fundamental to daily life that their disruption by government is condemned by the United Nations Human Rights Council [1].

Dot Changelog

New features, fixes and improvements to Dot.

Subscribe · Follow us on Twitter


June 19, 2022

Discord integration

Clémentine Bardin

Clémentine Bardin

Design · Coffee lover · Strasbourg, FR


Hello there!

I'm a product designer at Playfair, working remotely from Strasbourg, France. In my free time, I flip through Matisse and Cézanne art books, prepare delicious cappuccinos, and go to the cinema to watch and rewatch New Wave movies.

Angela Scott Thomas

Angela Scott Thomas

Hi friends!

My favorite musician (Norah Jones)My favorite artist (Rothko)My favorite food (🥞)

Ten principles for good design

"My heart belongs to the details. I actually always found them to be more important than the big picture. Nothing works without details. They are everything, the baseline of quality." — Dieter Rams

Back in the late 1970s, Dieter Rams was becoming increasingly concerned by the state of the world around him — "an impenetrable confusion of forms, colours and noises." Aware that he was a significant contributor to that world, he asked himself an important question: is my design good design?

As good design cannot be measured in a finite way he set about expressing the ten most important principles for what he considered was good design. Sometimes they are referred as the "Ten commandments".

View templates →


Use your favorite libraries and components,
or build new ones

With ES module support, you can leverage the entire JavaScript package ecosystem with a single import statement within your content, no setup required. Components created on Motif are also ES modules, so you can reuse them wherever you want, or share them with the community.

Explore community components →

import * as d3 from 'd3'

import { DateTime } from 'luxon'

export const date = DateTime.now()
  .minus({ weeks: 1 })

import { Menu } from '@headlessui/react'

A computational process is indeed much like a sorcerer’s idea of a spirit. It cannot be seen or touched. It is not composed of matter at all. However, it is very real. It can perform intellectual work.

import { RoughNotation } from 'react-rough-notation'

Turn your ideas into anything, really.

Release Notes
Research Article
Bio Link
Search docs...


Welcome to the Spearhead documentation. Read through our tutorials and examples to get you started with the Spearhead API. If you have any questions, feel free to join our Discord →

Get started

Draft ready?
Publish anywhere, including to your existing site

Publish your content to a custom domain that you own, or host it on Motif. Already have a website? Import your content from Motif with a single line of code, and it will seamlessly blend in with your existing design and layout. Learn more →

Blazingly fast

Optimized builds and edge deployments for fast delivery

Motif automatically prebuilds your published pages as a Next.js app with ISR, and caches it on Vercel's edge CDN network, so that visitors get served your content in split seconds.

No lock-in

We believe that the content you create should not be tied to the tool you use to create the content. In Motif, everything is represented as plain text files, no proprietary data attached. You can sync them with your files on disk, push them to GitHub, store them on Dropbox, edit them with VS Code, Obsidian or any other tool that understands text.

Ready to get started?

Explore the documentation, find resources in our Community, or join our Discord for support and discussions.
  • © 2022 Motif Land Inc.
  • This site is built with Motif.