When content meets code,
magic happens
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.
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.
kanjun.me →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.
hannahle.ca →Jess Chang
Designer, Airbnb
Motif is a game changer for designing my portfolio. It's way better than Webflow for my personal needs.
temporaryoffice.us →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.
chris.motif.land →Build from the comfort of your browser.
No Node required.
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.
React
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
Blog
About
June 26, 2022• Jessie Kruze, Abigail Matthews, Jeff Wu, Charles Joy
Means for Interactive Communication
Multiple representations give multiple perspectives
Complementing views, like user-controled animation and small multiples, help engage and connect readers.
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
v1.3.2
June 19, 2022
Discord integration
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
Hi friends!
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".
Components
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.
import * as d3 from 'd3'
import { Menu } from '@headlessui/react'
import { RoughNotation } from 'react-rough-notation'
Turn your ideas into anything, really.
Welcome
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
2022-06-24
Ten principles for good design
Nat Johnson
@natrsjohnson
Good design is innovative
The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design.
Dot Release Notes
New features, fixes and improvements.
Subscribe · Follow us on Twitter
v1.3.2
June 25, 2022
Discord integration
Welcome
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
June 26, 2022 • Fred Hohman, Matthew Conlen, Jeffrey Heer, Duen Horng Chau
Communicating with Interactive Articles
Multiple representations give multiple perspectives
Complementing views, like user-controled animation and small multiples, help engage and connect readers.
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].
Angela Scott Thomas
Hi friends!
Clémentine Bardin
Design · Coffee lover · Amsterdam, NL
Hello there!
I'm a product designer at Playfair, working remotely from Amsterdam. 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.
Draft ready?
Publish anywhere, including to your existing site
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?
- © 2022 Motif Land Inc.
- This site is built with Motif.