Quick Start
Create a ProjectEdit a PageLink to a PageSet a TemplatePrepare for SEOPublish to the WebSet up a Custom DomainBasics
Project StructureMarkdownJSXMDXMarkdocES ModulesCSS StylingTailwind CSSMetadataLayout and Design
LayoutsTemplatesResponsive DesignsUsing ColorsTypographyMathematicsPublishing
SEO and SharingCustom DomainsAnalyticsSitemapsFaviconsGuides
WebflowNotionFramerConfiguration
motif.jsontailwind.config.jsmain.cssApp
Keyboard ShortcutsSlash CommandsInstant SearchOffline AccessDistraction-Free WritingReal-Time CollaborationDesktop AppAdvanced
Motif APIA guide to building interactive documents with Markdoc.
Markdoc is the document format powering Stripe's world-class documentation pages. It is similar to MDX in that it offers a combination of Markdown and components, but in a slightly different way that enforces a more strict separation between content and code. With Motif, you can now author Markdoc pages straight from the browser:
/
You can create a user account programmatically by calling the Account API, providing the following:
account_name
account_email
refresh_url
// Set your secret key. Make sure to switch to your live key in production.
const globex = require('globex')('sk_test_aklJAkI3d07982fKl24SLoii0462');
const accountLink = await globex.accountLinks.create({
account: 'acct_7203602998dfIjdfADLLr',
refresh_url: 'https://example.com/reauth',
return_url: 'https://example.com/return',
type: 'account_onboarding',
});
You can easily get started publishing Markdoc, for instance by duplicating the above example from the Community pages.
View sample →In order to create a page that uses the Markdoc format, simply add the .mdoc
extension to your filename.
You are free to mix Markdoc with MDX throughout your project.
In Motif, the Markdoc configuration should be stored in a file named markdoc.config.js
at the root of your project source. It adheres to the ES module syntax, and should export a default value holding the config object. Here is an example:
// markdoc.config.js
const config = {
nodes: {
heading: {
render: 'Heading',
attributes: {
id: { type: String },
level: { type: Number }
}
}
},
tags: {
callout: {
render: 'Callout',
attributes: {
title: {
type: String,
description: 'The title displayed at the top of the callout'
}
}
}
},
variables: {
name: 'Dr. Mark',
frontmatter: {
title: 'Configuration options'
}
},
functions: {
includes: {
transform(parameters, config) {
const [array, value] = Object.values(parameters);
return Array.isArray(array) ? array.includes(value) : false;
}
}
}
};
export default config
Components, as referenced from the Markdoc config's nodes
and tags
entries, should be exported from a file named markdoc.components.js
, as the default export. It is also adhering to the ES module syntax, and can freely import components and variables from other places in the project, or from the web. Here is an example:
// markdoc.components.js
import { Note } from "https://cdn.motif.land/motifblocks@0.0.4"
import { HeadingWrapper } from "@components/wrappers"
export const Heading = ({ id, children }) => {
return <HeadingWrapper id={id}>{ children }</HeadingWrapper>
}
export default {
Callout: Note,
Heading
}
Partials are not currently supported. Instead, we recommend using the same powerful Template mechanism that is used throughout for non-Markdoc pages.
© 2022 Motif Land Inc. All rights reserved. This site is built with Motif.